사파리에서 SVG 렌더링 이슈 해결하기

체크박스 아이콘의 테두리가 잘려 보인다는 QA 요청이 왔습니다.

이슈 재현을 해보니 사파리 브라우저에서만 발생하는 이슈였습니다.

(특정 브라우저에서만 발생하는 이슈는 정말 귀찮다고 생각해요..ㅠ)

 

개발자 도구로 스타일 조작을 해봐도 요지부동이었습니다.

검색을 통해 발견한 방법들은 다 적용해 본 것 같습니다 🫠

 

그러면 제가 찾아 보았던 방법과 결과를 정리해 보겠습니다.

 

문제

Safari에서 SVG 아이콘 픽셀이 깨짐 (정상 렌더링이 되지 않음)

 

원인

Safari 자체에서 SVG 지원이 완벽하지 않음

 

해결 방법

1. img 태그 사용하기
2. svg view box 수정
3. svg에 attribute 추가
4. svg width와 height 단위 변경
5. 아이콘의 border만 css로 처리하기
6. svg 디자인 직접 수정하기 (✅ 이 방법으로 선택했습니다.)

 

img 태그 사용하기

이미지화가 되기 때문에 픽셀 깨짐을 바로 해결할 수 있었습니다.

이미지 태그 사용에서 첫번째로는 직접 경로를 작성하는 방법이 있습니다. (정적 경로)

간단하지만 이 방법은 hover, pressed 같은 마우스 이벤트가 발생해도 이미지가 업데이트 되지 않는 문제가 있었습니다.

<img src="/static/img/icon_checkbox_normal.svg">

 

그래서 변경이 필요하다면 이미지 모듈화가 필요합니다. 이미지를 모듈화하여 Data-URI 형식으로 인코딩합니다.

<img src="data:image/svg+xml;base64,해시값”>

테스트했을 때 모듈화하면 이미지가 이벤트 때마다 정상적으로 업데이트었습니다.

그렇지만 이 이슈로 수정하는 것은 맞지 않으므로 다른 방법을 다시 찾았습니다.

 

SVG Viewbox 수정

<svg viewbox="0 0 15 14.999" ... />

이슈가 있는 svg 파일의 viewbox에서 소수로 된 부분을 정수로 수정했습니다.

그렇지만 해결되지 않았습니다.

 

SVG에 attribute 추가하기

shape-rendering 속성을 추가하면 된다는 아티클을 보았습니다.

shape-rendering: crispedges을 추가했지만 이 또한 해결되지 않았습니다.

 

SVG width와 height 단위 변경

반응형 지원을 위해 컴포넌트들이 rem 단위로 작성되어 있습니다.

뷰포트가 변경될 때마다 정상 노출되기도, 테두리의 픽셀이 깨지기도 했습니다.

그래서 px 단위로 고정하면 되지 않을까 했습니다. 이전의 렌더링 상태보다는 나아졌지만 완벽하지는 않았습니다.

 

아이콘의 border만 css로 처리하기

테두리가 깨져 보이는 문제이므로 border만 css로 처리하면 정상 렌더링될 것이라 생각했습니다.

이렇게 하면 해결이 되지만 작업의 공수가 많이 들 것으로 예상했습니다.

 

SVG 디자인 직접 수정하기

위의 방법들을 모두 시도해 보았고... 안되겠다 싶어서 위 내용들을 정리해서 팀원들에게 도움을 요청했습니다.

그리고 이전에 야매 방법으로 해결했었다는 조언을 들었습니다...! 홀리 

현재 아이콘은 viewbox가 꽉차게 디자인되어 있었는데요.

야매 방법이라 함은 viewbox에 약간의 padding을 넣어서 svg 파일을 교체하기입니다.

디자이너에게 요청하여 새로 받아서 적용했습니다. 

야매 방법이라고 하셨지만 간단하고 깔끔하게 이슈를 해결할 수 있었습니다..! 👏

 

요약

효과 ❌

1. svg view box 수정
2. svg에 attribute 추가
3. svg width와 height 단위 변경

효과 🙆‍♀️

1. img 태그 사용
2. 아이콘의 border만 css로 처리하기
3. svg 디자인 직접 수정하기