ngee

제목이 조금 혼란스러울 수 있으니 다시 한 번 설명하며 아래와 같습니다.

인터넷익스플로러 11 버전과 엣지(Edge) 브라우저에서 SVG 이미지를 CSS로 배경에 넣고 싶을 때는 

다른 브라우저와 다르게 Base64로 인코딩해서 입력해야 한다는 것을 정리해봅니다.

일단 왜 2개의 브라우저만 문제를 가지는지 잘 모르겠지만 브라우저가 그렇게 하라는데 웹 개발자가 힘이 있나요.

그렇게 해야죠 :-)

아래와 같은 SVG 파일이 있다고 가정하겠습니다. 일러스트레이터에서 이미지를 쉽게 SVG로 저장할 수 있는데요.

저장된 SVG에서 불필요한 부분을 삭제한 것입니다. 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 77.5 84.4">

<polyline points="13.5,61.4 29.6,72.5 9.5,84.5 "/>

</svg>

보기 쉽게 정리하면 

background-image: url('data:image/svg+xml; SVG내용 ');

하지만 앞서 말씀드린 것 처럼 IE11과 EDGE에서는 배경이미지가 안보입니다.

찾아보니깐 Base64로 인코딩하면 문제가 해결된다고 합니다.

Base64 위키는 여기요.

인코딩 할 수 있는 사이트가 참 많더라고요. 적당한거 골라서 사용하시면 되겠습니다. 

인코딩 된 결과물은 아래와 같이 사용하시면 됩니다. 

background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzcuNSA4NC40Ij4gPHBvbHlsaW5lIHBvaW50cz0iMTMuNSw2MS40IDI5LjYsNzIuNSA5LjUsODQuNSAiLz48L3N2Zz4=");

보기 쉽게 정리하면 

background-image: url('data:image/svg+xml; base64, base64인코딩 결과물');

혹시 동일한 문제로 이 포스팅을 찾으신 분들께 조금이라도 도움이 되었기를 바라면서 !

마치겠습니다. 

감사합니다.

도움이 되셨다면 댓글과 공감 부탁드려요 !