[ WEB ] iOS에서 SVG 이미지가 깨져 보일 때 해결 방법

 

회사에서  iOS개발 파트에 이슈 티켓이 발행되었는데,  AOS에서는 이미지가 정상적인 해상도로 노출되는 반면,  iOS 에서는 이미지가 깨져 보이는 이슈가 있었다. 해당 이미지는  SVG 벡터 이미지라 이론상으로 당연히 깨지는 이슈가 없어야 하는 게 맞는데 참 이상했다.

 

 iOS개발자 분이 해당 화면은 웹뷰라고 웹프론트 파트에 이슈 티켓을 넘겨주어 함께 찾아보았는데, 구글링을 통해 사파리 웹뷰에서 SVG깨짐 현상이 발생하고 있다는 사실을 알았고, 방법을 찾아보았다.

 

 

 

<img /> 태그를 <object /> 태그로 변경해 주는 방법.

<img src='..path/imgae.svg' />

 

이런 이미지 태그를 

<object data='..path/image.svg'></object>

 

이런 식으로 object 태그를 사용하면 간단하게 해결할 수 있다. (<iframe>, <embed> 도 가능)

 

 

 

 

 

구글링을 해본 결과 위의 방법이 가장 쉬워 보였다. 

하지만 모든 SVG 이미지를 <object>로 사용하기는 실질적으로 어려웠다. (서버에서 이미지 소스를 내려주는 경우도 있고, 프로젝트에 너무 많은 이미지들이 있었기 때문에, 전체를 <object>로 바꾸는 건 파트 내부에서 논란의 여지가 있었다.)

 

서비스 오픈이 얼마 남지도 않았고, 이미 QC를 90% 이상 끝낸 상태라 시간적으로도 무리가 있었으므로 우리는 임시방편으로 이미지들을 되도록 png 확장자로 사용하기로 했고, 원인과 방법을 더 찾아보고 파악하여 재논의를 하기로 했다. (원인과 방법을 더 찾게 되면 여기에도 추가 정보를 작성할 예정)

 

 

 

 

 

---

 

🌸 출처 🌸

 

Obejct - MDN

shape-rendering - MDN

SVG 소개 - MDN