최근에 SVG는 대부분 웹사이트에서 가장 각광을 받고 있는 이미지이다. 기존에 jpg, png 등을 대체하며 빠르게 대세로 자리잡은 벡터 이미지인 svg를 살펴본다.
벡터 이미지부터 SVG 까지
CONTENTS
벡터 이미지란?
일반적으로 벡터 이미지는 이미지를 확대해도 웹에서 해상도가 깨지는 현상이 나타나지 않는다. 기존에 픽셀화되는 래스터 이미지와 달리 알고리즘으로 정의되기 때문이다.
쉽게 포토샵으로 만든 이미지는 래스터 이미지로 bmp, png, jpg, gif 확장자를 지니고 있다. 벡터 이미지는 일러스트로 제작한 이미지로 기존에는 ai 확장자를 지니고 있었다. 그런데 이 ai 확장자를 지닌 이미지는 웹에서 바로 렌더링되지 않는 문제점이 존재했다.
그런데 SVG는 벡터 이미지이면서도 웹에서도 렌더링이 가능해 현재 가장 각광을 받고 있는 이미지 확장자이다.
SVG란 무엇인가?
위에서 언급했듯이 svg는 웹에서 구현 가능한 벡터 이미지이다. 그런데 이 SVG는 코드로 구현한 이미지이다. 무슨 말이냐 하면 HTML과 같은 마크업 언어 일종인 XML 기반 언어로 만들어진 이미지가 SVG라는 것이다.
일반적으로 이미지는 포토샵이나 일러스트 등 그래픽 프로그램을 활용해서 이미지를 만든 후에, 이 이미지를 img 태그를 활용해서 코드에 추가한다. 하지만 svg는 코드만으로 이미지를 만들 수 있다. 특히 이렇게 만든 svg 이미지는 화면이 커지거나 작아지더라도 해상도에 아무런 영향을 받지 않는다.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
위의 예시와 같이 svg 태그를 사용해 원을 그릴 수 있다. 원 이외에도 사각형, 다각형 등도 가능하다.
그만큼 svg만 따로 독립적인 챕터로 정리해야 할 만큼 알아야 할 정보가 많다. 여기에서는 가장 기본적인 SVG 튜토리얼만 다룬다. SVG를 자세히 학습하기 원하면 W3 Schools SVG 튜토리얼을 권자안다.
기본적으로 svg 태그 안에 도형 태그를 넣어서 도형 모양을 표현할 수 있다.
대표적인 도형 모양은 위에서 본 원 모양의 circle 태그, 사각형의 rect 태그, 타원의 elipse 태그, 선의 line 태그, 자유로운 선 모양인 polyline 태그, 다각형의 polygon 태그가 있다. 더불어 조금 고급인 path 태그가 있는데, 선을 연결한 각 좌표를 적어서 원하는 형태의 도형을 만들 때 사용한다. 도형 뿐만 아니라 텍스트 자체도 벡타 이미지 자체인 svg로 만들 수도 있다. 이때 사용하는 태그는 text이다.
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="red" />
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
<polygon points="120,0 240,225 0,225" fill="green"/>
<text x="50" y="100" font-family="Verdana" font-size="55"
fill="white" stroke="black" stroke-width="2">
Hello!
</text>
</svg>
위는 MDN 사이트에서 실례로 제시한 SVG 코드이다. 우선 svg 태그 안에 도형 태그를 사용하면서, 각 도형 태그에는 속성들이 존재하고 있음을 알 수 있다. 이렇듯 svg 코드를 구현하려면 각 코드와 속성들을 이해해야만 가능하다.
웹에 SVG 구현하기
위에서 간략하게 살펴본 것처럼 직접 html 코드를 입력해 SVG라는 코드이자 이미지를 구현할 수 있다. 하지만 svg 확장자를 지닌 이미지를 그대로 활용할 수도 있다. 직접 SVG 코드를 입력하는 방식 보다는 SVG 확장자를 지닌 이미지를 웹에 연결하는 게 일반적이다.
이때 확장자가 svg일 뿐, 기존 png 확장자나 jpg 확장자를 지닌 래스터 이미지를 웹에 구현하는 것과 방법에서는 동일하다. 다만 svg 이미지가 벡터 이미지이므로 렌더링될 플랫폼의 크기를 고려하지 않아도, 저절로 기기에 맞게 동일한 해상도로 렌더링될 뿐이다.
<img src="equilateral.svg"
alt="triangle with all three sides equal"
height="87" width="100" />
위의 예시처럼 img 태그에 src 속성을 활용하여 svg 이미지 경로를 담고, 인라인블럭요소 성질을 지닌 img 태그이므로 너비와 높이를 지정하면 된다. 이 방법은 어떤 종류의 이미지라도 상관없이 구현하는 동일한 방식이다.
이처럼 벡터 이미지를 구현하는 SVG는 XML 확장 언어 그 자체로, 반응형 웹을 구현할 때 여러 장의 픽셀 이미지 대신에 단 한 하나의 SVG 이미지만 사용하면 된다는 장점이 있다. 하지만 치명적인 단점이 하나 있는데, 이것은 자바스크립트로 SVG 이미지를 조작할 수 없다는 점이다.
뒤에서 살펴보겠지만 SVG는 한때 코드 자체만으로도 각광을 받았다. XML 확장 언어만으로 이미지를 구현한다는 점, 렌더링할 기기의 크기를 고려하지 않아도 된다는 점에서 인기를 끌었다. 하지만 최근에는 canvas 태그 등장으로 svg는 이미지 자체를 활용할 때 사용하고 코드로 도형이나 사물을 구현할 때는 캔버스가 더 선호되는 추세이다.
