사파리에서 SVG가 나타나지 않을때 해결방법

사파리에서 SVG가 나타나지 않을 때 해결방법

티스토리 스킨을 꾸미면서 SVG를 사용하는 경우가 종종 있는데, SVG형식의 요소가 iPhone, iPad, MacBook 등 크롬, 사파리를 막론하고 SVG가 나타나지 않은 현상을 발견했습니다.

 

우선, 맥북에서 크로미움 브라우저로 접속하면 아래와 같이 정상적으로 출력되는것을 확인했지만, 이상하게도 iPhone 또는 iPad에서는 SVG가 나타나지 않았습니다.

왼: 맥북-크롬    오: 맥북-사파리

그래서 MacBook을 통해 사파리로 접속후, 개발자 도구를 열어 확인해 보았습니다.

?! 애니메이션을 멈추고 보니 컨테이너를 완전히 벗어난 width 497px, height 497px로 되어 컨테이너에 담기지 못한 것이었습니다.

사파리에서 종종 SVG를 인식하거나 지원하지 않은 경우가 있다고 했었는데.. 이게 그건가 봅니다.

 

그래서 저는 SVG 코드에 width / height 스타일을 적용해주었습니다.

 

참고로 사파리에서는 svg가 렌더링 하는 범위가 달라지는데, 크롬의 경우 width="10px"이라고 가정할 때 10px로 정상적으로 인식하는 반면에 사파리에서는 1000%로 인식한다고 합니다. 

 

즉, 과하게 widht값과 height 값이 적용되어 컨테이너에 담아지지 않거나 과하게 blur 처리된 것!

 

해결방법은 픽셀로 적용하는 것이 아닌 퍼센트 %로 적용하면 됩니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="sidebar-btn-ani fa-spin"  style="width:100%;height:100%;">

SVG 코드 끝에 style="width:100%;height:100%"를 넣어주고 사파리에서 확인해보았습니다.

드디어 정상적으로 출력합니다.

 

그렇다면 아이패드와 아이폰에서도 확인해봐야겠죠?

해결 완료..!

 

생각보다 간단한 거였는데 괜히 시간만 잡아먹은 거 같네요 ㅎㅎ 

 

오늘도 지식 하나를 얻어가는 기분. 사파리가 아직 오류가 많이 보여서 메인 브라우저로 정착하기엔 시간이 필요할 듯싶습니다.

 

읽어주셔서 감사합니다 🤟