SVG 활용 1 – 아이콘 폰트가 아니라 SVG를 사용한 이유

SVG란?

SVG는 Scalable Vector Graphics의 약자다. 늘이거나 줄여도 도트가 보이지 않는 이미지를 말한다. 비트맵(즉, 픽셀)을 저장하는 게 아니라 좌표를 저장해 연결하는 방식으로 하기 때문에 그렇다. 이런 Scalable한 것으로 대표적인 건 폰트다(폰트도 물론 비트맵 폰트가 있긴 하지만).

예컨대, 동그라미를 SVG로 그리려면 아래처럼 쓰면 된다(실전에서 아래 코드를 직접 쓸 일은 거의 없다).

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="42" cy="42" r="40" stroke="#34495E" 
    stroke-width="4" fill="#2ECC71"/>
</svg>

동그라미를 나타내는 태그는 circle이고 cx와 cy는 중점의 좌표를 의미한다. stroke는 외곽선 색깔, stroke-width는 외곽선의 굵기, fill은 동그라미의 색깔을 의미한다. 위와 같은 태그를 쓰면 아래와 같은 모양이 나온다. 외곽선이 있는 에메랄드색(#34495E) 원이다. (좌표를 확인할 수 있게 외곽선을 추가로 쳐 줬다.)

▷실제 예제 보기

따로 파일로 넣을 필요없이 HTML처럼 적어 주면 표현된다. 태그에 클래스와 아이디를 적고 CSS와 js로 제어할수 있으니 대박이다. 물론 태그로 제어해도 된다.

img, object, iframe, embed 태그로 넣을 수도 있다. 이렇게 하면 CSS, js로 제어가 안 되거나, 좀 복잡해진다. 여튼 나중에 설명한다.

SVG는 꽤 오래 전에 나왔지만, 고해상도 디스플레이가 등장하면서 드디어 필요성이 커진 것 같다. 레티나 디스플레이처럼 ppi(pixel per inch, 인치당 픽셀수)가 획기적으로 많아진 디스플레이가 나오면서, 이미지가 뿌옇게 보이는 경우가 생겼다.

물론 이미지를 대충 두 배 사이즈로 넣은 뒤 width와 height를 절반으로 줄인 채 표현하면 되기는 했다. 그런데 아이패드와 맥북 프로의 레티나는 또 인치당 픽셀수가 다르다. 안드로이드폰도 ppi가 또 다르다. 와우, 결국 가장 간단한 해법은 ppi가 가장 높은 기기에 맞춰서 이미지를 넣는 것이다. 일반 모니터의 ppi가 72니까, 해당 기기의 ppi에 72를 나누면 실제 이미지를 표현하는 것의 몇 배로 하면 되는지 나온다.

그런데 이렇게 하면 당장 용량이 걱정된다. 레티나 아이폰5에 최적화된 이미지를 아이폰3GS에서도 다운받아서 사용하는 건 대역폭 낭비다. 심지어 기기가 이미지의 사이즈를 줄여서 보여 줘야 하므로 성능에도 문제가 생긴다. 작은 양이겠지만 배터리도 낭비될 것이다.