목차

SVG 기초

SVG란?

Noun 프로젝트에서는 강아지 이미지를 PNG와 SVG 버전으로 내려받을 수 있다. 모두 똑같은 강아지 이미지다. <img> 태그에서 그중 하나를 연결하더라도 똑같은 이미지를 얻는다. 차이점은 무엇일까?

우선 파일 크기가 다르다. PNG 버전은 40KB이고, SVG 버전은 2KB이다. SVG 버전이 문자 그대로 20배다 더 작다.

또 다른 차이점은 파일 형식이다. PNG는 (JPG, GIF와 마찬가지로) 래스터(raster) 이미지 형식이다. 래스터는 픽셀 격자로 생각할 수 있고, 래스터 형식 간 차이점은 대부분 픽셀 정보 격자가 압축되는 방식에 관한 것이다. 즉, 래스터 형식은 굉장히 흔하지만 픽셀이라는 공통분모를 갖고 있다.

그러나 SVG는 다르다. SVG는 메타포(metaphor)나 추상화(abstraction)가 아니다. 말 그대로 모양을 그리기 위한 일련의 명령이다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 뜻한다. '벡터'가 핵심 키워드다. SVG 파일에는 다음과 같은 명령이 정리되어 있다. "특정 좌표로 이동하라, 크고 넓은 사각형을 그려라, 선이나 곡선을 그리고 복잡한 명령을 따라 강아지 아이콘을 그려라."

SVG 이미지는 일련의 그리기 명령이므로 특정 픽셀 차원에 얽매이지 않는다. 똑같은 파일이라면 어떤 크기에서도 똑같이 시각적 선명함을 유지할 것이다. 이 점이 SVG를 돋보이게 만든다.

위에서 예시로든 명령은 정확하게는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. 1999년 W3C의 주도하에 오픈 표준으로개발되었으며, XML 형식이므로 웹 브라우저에서 바로 볼 수 있으며, 일러스트레이터와 같은 벡터 드로잉 프로그램뿐만 아니라 텍스트 편집기를 통해서도 편집이 가능하다. 다만, MS의 IE8 이전 버전에서는 SVG를 지원하지 않으므로 주의해야 한다(따라서 99% 이상의 브라우저에서 지원된다는 의미이다).

또한 XML 형식이기 때문에 SVG에서는 이미지 내 하이퍼링크를 걸거나 자바스크립트 등과 연동시켜 이미지 내 다양한 인터랙션(또는 애니메이션)을 구현할 수 있다.

SVG 활용

SVG와 그 안의 모든 요소는 이른바 DOM으로 표현된다. 이런 구조는 <div>나 <p> 등의 요소에서 수행되는 똑같은 액세스와 제어를 사용한다는 뜻이다. CSS를 통해 아이콘의 색을 입히거나 클릭 시 애니메이션 효과를 줄 수도 있다. 다만 <img> 나 background-image에서 사용한 SVG는 이런 방식으로 제어할 수 없고 스타일시트처럼 다른 외부 자산(assets)을 연결할 수도 없다.

// inline 요소 내 SVG 로드 (HTTP 요청은 저장되나, 이미지는 브라우저에 캐시되지 않음)
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 50 50">
	<path fill="#F5F5F5" />
</svg>