css background로 사용된 svg 이미지 IE에서 깨지는 현상 해결하기

홈페이에 사용된 이미지가 IE에서만 깨지는 현상이 발견되어 수정하였습니다.

! svg 깨짐 현상의 이유는?

원인은 IE 환경에서 SVG 이미지를 css의 backgroud 속성을 사용하여 size 및 position을 설정하는 경우 발생하게 됩니다. 즉 브라우저 환경에 다른 스타일이 적용되어 크로스 브라우징이 필요하게 되었습니다.

! 해결방법

해결한 방법은 먼저 svg 태그에 preserveAspectRatio="none slice"이라는 값을 주도록 합니다.

위와 같이 코드를 적용하면 모든 브라우저에서 같은 모습으로 스타일이 나타나게됩니다. 단, 잘 나오던 화면에서도 깨질 수 있는데 이 때 추가적인 수정이 필요합니다. 즉 화면에 잘 나오도록 background-size 속성값 및 관련 값들을 재정의하여 스타일에 반영하면 됩니다.

이제 IE 브라우저 및 모든 브라우저에서 확인하면 정상적으로 나타날 것입니다.