외부의 svg파일을 img 태그로 불러들이기

개요

svg파일을 img태그의 src에 넣었는데 제대로 표시가 안되서 조사했던걸 적는다.

 

문제

이하의 logo_select.svg파일이 있다.

../assets/images/logo_select.svg

<svg viewBox="0 0 85 16">
<path d="M13.271 5.1H9.434C9.23 3.95 8.53 3.021 6.907 3.021c-1.354 0-2.234.587-2.234 1.58 0 .88.63 1.265 1.848 1.51l2.146.498c2.82.61 4.625 1.76 4.625 4.4 0 3.07-2.528 4.987-6.365 4.987-3.451 0-6.566-1.671-6.927-5.46h3.837c.249 1.353 1.399 2.233 3.203 2.233 1.354 0 2.166-.542 2.166-1.398 0-.542-.293-1.105-1.624-1.354l-2.527-.542C2.03 8.82.61 7.446.61 5.007.613 1.941 3.096 0 6.705 0c2.483 0 6.184.969 6.566 5.1zM19.41 6.453h6.815v3.25H19.41v2.664h7.787v3.319h-11.6V.338h11.6v3.318H19.41v2.797zM40.06 15.683H29.362V.338h3.813V12.32h6.883v3.363zM45.68 6.453h6.815v3.25H45.68v2.664h7.787v3.319h-11.6V.338h11.6v3.318H45.68v2.797zM66.711 9.321h3.926c-.495 3.97-3.52 6.679-7.695 6.679-4.625 0-8.124-3.363-8.124-7.988S58.314.024 62.942.024c4.175 0 7.2 2.708 7.695 6.678h-3.926c-.406-1.917-1.76-3.114-3.792-3.114-2.504 0-4.243 1.873-4.243 4.424 0 2.55 1.736 4.423 4.242 4.423 2.033 0 3.387-1.197 3.793-3.114zM79.71 3.745v11.938h-3.793V3.745h-4.895V.338h13.585v3.407H79.71z">
</path>
</svg>

 

이걸 svg 테스트 사이트에서 테스트해보면 문제 없이 나왔다.

https://codepen.io/drawcode/pen/zGwewg

SVG Path Test

시꺼매서 잘 안보이는데 SELECT라고 적혀있다.

 

그래서 img태그로 불러 들일려고 했는데

<img src="@/assets/images/logo_select.svg" /

이렇게 읽어들일수 없는 파일로 뜬다.

 

원인 & 해결

그 이유는 외부파일을 img 파일로써 읽어 들일려고 하면 파일의 MINE형식이 image/svg+xml로 되어 xml데이터로 인식된다. 그래서 xmlns와 xmlns:xlink의 설정이 필요하다고 한다.

<svg viewBox="0 0 85 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M13.271 5.1H9.434C9.23 3.95 8.53 3.021 6.907 3.021c-1.354 0-2.234.587-2.234 1.58 0 .88.63 1.265 1.848 1.51l2.146.498c2.82.61 4.625 1.76 4.625 4.4 0 3.07-2.528 4.987-6.365 4.987-3.451 0-6.566-1.671-6.927-5.46h3.837c.249 1.353 1.399 2.233 3.203 2.233 1.354 0 2.166-.542 2.166-1.398 0-.542-.293-1.105-1.624-1.354l-2.527-.542C2.03 8.82.61 7.446.61 5.007.613 1.941 3.096 0 6.705 0c2.483 0 6.184.969 6.566 5.1zM19.41 6.453h6.815v3.25H19.41v2.664h7.787v3.319h-11.6V.338h11.6v3.318H19.41v2.797zM40.06 15.683H29.362V.338h3.813V12.32h6.883v3.363zM45.68 6.453h6.815v3.25H45.68v2.664h7.787v3.319h-11.6V.338h11.6v3.318H45.68v2.797zM66.711 9.321h3.926c-.495 3.97-3.52 6.679-7.695 6.679-4.625 0-8.124-3.363-8.124-7.988S58.314.024 62.942.024c4.175 0 7.2 2.708 7.695 6.678h-3.926c-.406-1.917-1.76-3.114-3.792-3.114-2.504 0-4.243 1.873-4.243 4.424 0 2.55 1.736 4.423 4.242 4.423 2.033 0 3.387-1.197 3.793-3.114zM79.71 3.745v11.938h-3.793V3.745h-4.895V.338h13.585v3.407H79.71z">
</path>
</svg>

(혹시 html안에 직접 svg태그 삽입하는 경우에는 MINE타입이 text/html이 되서 xmlns와 xmlns:xlink의 설정은 필요없다

text/html이면 굳이 xmlns라는 네임스페이스 없이 svg와 path는 태그 그 자체로써 이미 인식되어 있기 때문에)

 

참고

xml이란 단어가 나와서 잠깐 정리하면

xml을 번역하자면 eXtension Markup Language(확장 마크업 언어)로 생긴게 html과 닮아있지만 용도는 전혀 틀리다.

html은 데이터를 표현하기 위한 언어라면 xml은 데이터를 전달하기 위한 언어이다. 생긴건 html이지만 json의 성격에 가깝다.

https://ko.wikipedia.org/wiki/XML

XML - 위키백과, 우리 모두의 백과사전