배경

png 파일을 svg 파일로 교체했는데 아이폰에서 이미지가 깨진다. 정확히 말하면 뿌옇게 흐려지는 현상이 나타난다. 크롬 브라우저를 사용했음에도 발생했다고 한다.

원인 분석

이와 관련된 건 상당히 여러 가지가 있다. svg 태그에 대한 이해가 너무 부족한 것도 문제이다.

1. webkit browser

• Why does SVG get blurred when scaled under webkit browsers?

• when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

2. 사파리

• SVG, 사파리에서 흐리게 보이다

3. SVG 태그

• Turn off anti-aliasing on svg when applying CSS3:Zoom on the element?
  

• svg not sharp, but blurry
  
  

+

문제의 svg 파일 코드

<svg width="775" height="496" viewBox="0 0 775 496" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  // (중략)
<image id="image0" width="1600" height="340" xlink:href="data:image/jpeg;base64,/9j/4QikRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAfAAAAcgEyAAIAAAAUAAAAkYdpAAQAAAABAAAAqAAAANQACvyAAAAnEAAK ... />
</svg>

뜬금없는 <image> 태그가 들어가 있어서 수상해서 찾아보니...

비트맵 이미지!! (...진짜 이게 원인이면 이 글에도 '삽질' 태그를 붙여야 한다.)
좀 깨지는 다른 svg 파일이 또 있는데 마찬가지로 <image> 태그가 들어있다. 추측으론 ai 파일이 아닌 jpg나 png를 무료 사이트에서 svg로 변환하면 이렇게 들어가는 듯하다.