왜 SVG인가

아이콘, 가장 효율적인 사용 방법은 무엇일까!

sprite image

기존의 sprite image를 활용한 방식은 아이콘이 추가될 때마다 이미지 원본과 코드를 수정해줘야하는 번거로움이 있었다. 아이콘의 색상도 이미지 원본을 편집해서 지정해줘야했었다.

icon font

아이콘 폰트는 sprite image에 비해 간편한 사용으로 많이 사용하고 있지만, 여러 문제점들이 있다.

• 렌더링 이슈 : 벡터 그래픽 기반이지만, 텍스트로 전달되기 때문에 브라우저에 따라 폰트 렌더링 품질의 차이가 있다.
• 한 가지 색상밖에 사용할 수 없다.
• 커스텀한 아이콘 제작을 위해 폰트 제작 서비스에 의존해야한다.

1. icomoon.io : 아이콘 폰트 제작 사이트
2. FontAwesome : 이미 정의된 아이콘을 사용할 수 있는 사이트
3. Fontello : svg 파일을 업로드하고, 폰트와 CSS코드를 다운받을 수 있는 사이트

그러나 최근의 웹개발은 다양한 크기의 스크린에 대응해야하기 때문에 아이콘을 벡터로 만든다면 사이즈 변화에 전혀 지장이 없다. SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. IE8 이전 버전을 제외한 대부분의 브라우저에서 지원된다.

SVG의 장점

• 반응형 대응, 사이즈 변화에 지장 없음
• 브라우저 호환성
• SVG 속성 사용

참고사이트

• React에서 svg사용하기 : 자동으로 svg component를 만들어줌. 복붙하면 됨.
• WEB에서 svg사용하기 : 속성을 이용한 여러가지 사용방법
• svg에 대해서 : 왜 사용해야하는지
• Using SVG icons component : using svg icons