[SVG] SVG가 사파리에서 흐릿하게 보이는 오류

SVG가 사파리에서 흐릿하게 보이는 오류..

프로젝트 진행중에, SVG가 모바일 사파리, 크롬, 맥북 사파리(webkit 엔진을 사용하는 브라우저들...)에서 과하게 흐릿하게 보이는 문제가 발견되었다.
깃 허브 링크

https://github.com/gitofolio/gitofolio 

GitHub - gitofolio/gitofolio: 💎 Make beautiful resume card and Manage resume

 

그럼

원인과 해결책을 알아보도록 하자.

원인

원인은 크게 2가지로 나뉘는것 같다.
1. svg의 픽셀이 깨져보인다. svg의 테두리가 깨져보여서, 흐릿하게 보인다.(실제로 흐릿해지는것은 아니다.)
위 문제는 shape-rendering으로 해결하거나, svg태그안의 소수점을 모두 없애서 해결할수있다.
간단하게 해결이 가능하므로, 이것에 대해서는 더 이상 서술하지않겠다.
궁금한 사람은 구글에 svg shape-rendering 라고 검색하자.

2. svg가 렌더링하는 범위가 달라진다.
svg filter의 x와 width가 %로 설정되어있는지 확인해보자.
ex) <filter id="nameTag1" x="0" y="0" width="153" height="31" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
크롬, IE의 경우 width="153"등으로 설정되어있으면 153px로 인식하는반면, safari는 15300%로 인식한다.
따라서, 과하게 blur처리가 되는것이다.
해결하기위해 x, y, width, height를 전부 %값으로 바꾼다.

3. svg가 실제로 흐릿해진다. (내가 이 경우에 속했고, 인터넷에 있는 해결법은 대부분 1번에 속한다. 적어도 나는 못찾음 혹시 찾은 사람있으면 댓글로 알려주세요..) svg 태그안에
<feGaussianBlur stdDeviation="0.5"/> 와 같은 내용이 있는지 확인해보자
safari는 stdDeviation값이 1 미만인 경우 반올림해서 1로 만들어 버린다. 따라서, 은은한 블러효과를 낼수가없다.

해결책

1. 가장 간단한 공통적인 해결법(1번원인과 2번원인을 모두 해결할수있는!)
svg 파일을 이리저리 만져보니 html파일에서 img태그로 집어넣을때만 흐릿해지는것이 보였다. (즉, svg파일을 브라우저로 바로 호출해서 봤을때는 정상적으로 작동하였다.)

해결방법은 간단한데,
<object>
<iframe>
<embed>
위 3가지 태그중 하나로 svg파일을 호출하면된다.

하지만 내 애플리케이션은 깃허브 마크다운에서 동작하였고, 깃허브 마크다운은 위 3가지 요소중 지원하는게 하나도 없었다.
깃허브가 지원하지않는 태그들 : https://github.github.com/gfm/

GitHub Flavored Markdown Spec

2. feGaussianBlur의 문제인 경우(내가 이 경우 였다).
1번 해결법을 사용할 수 없다면, 2가지 선택지가 있다.
- javascript파일을 만들어서, 사용자의 브라우저를 체크한다음 만일 사용자의 브라우저가 사파리(문제가되는)라면, blur를 0으로 만들어 버린다.
filter : blur(0px);

- feGaussianBlur의 값을 0으로 만들어 버린다.

2번 해결책의 경우, 해결책 이라기 보단, 타협에 가까워 보인다. 하지만 잘 생각해보자.... safari에서 svg를 렌더링하면, (shape-rendering을 설정하지 않을시)약간 흐릿해보이는 착시효과를 일으킨다. 따라서, blur를 0으로 만들어버리면 은은한 blur효과를 공짜로 얻을수있다.

위 방법들로 해결이 안되거나 더 많은 정보가 필요하다면, 구글에
"svg blurry on safari" 라는 키워드로 검색해보자.
상당히 오래전부터 있었던 이슈인것같다.

---

프로젝트 링크
https://github.com/gitofolio/gitofolio

GitHub - gitofolio/gitofolio: 💎 Make beautiful resume card and Manage resume