작업 중 맞닥뜨린 SVG. 무엇인지 알아보자

SVG ?

SVG(Scalable Vector Graphics)은 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C 주도하에 개발된 오픈 그래픽 표준이다
현재 마이크로소프트의 인터넷 익스플로러 8 및 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다.

🚀 XML
인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어진 다목적 마크업 언어이다

특징

• 벡터 그래픽스여서 확대, 축소에도 화질의 변화가 없다
• 하이퍼링크를 걸거나 자바 스크립트와 연동 시킬 수 있다
• XML로 기술하므로 웹 브라우저 상에서 열람할 수 있고 문서 편집기 등에서 편집할 수 있다

아이콘은 어떤걸로?

웹에서 아이콘을 사용하기 위해선 세 가지 방법 중 하나를 사용해야 한다

• image 파일로 가져오기
• icon font를 이용하기
• svg 파일로 가져오기

image

해당 아이콘을 다운받은 후 img 태그에 src로 넣어주면 된다

이 방법은 정적인 이미지(변화가 없는)라면 상관 없겠지만 해상도의 변경이 필요한 경우 편집해서 다시 import 해야 되는 단점이 있다

icon font

위의 image 방법의 단점을 보완하기 위해 나왔으며 대표적인 icon fonts 사이트로는 font Awesome이 있다

font는 벡터이므로 image와는 다르게 css로 해상도 변경이 가능하며 보편적으로 가상요소(ex.::before, ::after 혹은 특정 요소)를 통해 적용 한다

하지만 화질이 흐릿하거나 깨져보인다는 단점이 있다

때문에 위의 두 방법보단 SVG파일로 아이콘을 사용하는 것이 바람직하다