제목이 조금 혼란스러울 수 있으니 다시 한 번 설명하며 아래와 같습니다.
인터넷익스플로러 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인코딩 결과물');
혹시 동일한 문제로 이 포스팅을 찾으신 분들께 조금이라도 도움이 되었기를 바라면서.. 마치겠습니다.
감사합니다.
도움이 되셨다면 댓글과 공감 부탁드려요 !
'자바스크립트,부트' 카테고리의 다른 글
| datatables redraw (0) | 2019.05.31 |
|---|---|
| jQuery로 select 된 값 가지고 오기 (0) | 2019.05.27 |
| javascript - select - focus and change (0) | 2019.05.26 |
| IE11, Edge 에서 CSS 배경이미지 SVG 사용 (0) | 2018.01.19 |
| 자바스크립트 URL 정보 가져오기(찾기, 확인) (0) | 2017.06.15 |
| jQuery를 활용해서 클래스(class) add / remove 하기 (0) | 2017.06.09 |
| html element delete using jQuery (0) | 2017.03.25 |
| 웹 이미지 최적화 수행하기 (0) | 2017.03.03 |
