SVC 이미지
Scalable Vector Graphics
벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.
벡터 이미지의 공통적 특성으로 확대를 해도 픽셀이 깨지지 않는다. 그렇기 때문에 높은 PPI의 스마트폰들이 대중화된 시점에서 많은 웹사이트들이 자주 이용한다. 게다가 용량도 기존의 PNG나 GIF보다 작다.
그렇다고 만능은 아니고, 단순한 도형으로 표현하기 쉬운 이미지 용도로 적합하다. 이미지의 형태가 복잡해질수록 CPU 연산량이 늘어나 이미지 로딩이 느려질 수도 있고, 패스 데이터가 복잡해져 xml 텍스트가 기하급수적으로 늘어나면 주어진 해상도의 픽셀만 채우는 비트맵 이미지보다 용량이 커질 수도 있다. 요소가 매우 많거나 래스터 이미지를 base64로 인코딩해 넣은 SVG 파일 또한 용량이 엄청 불어난다.
그렇기 때문에 SVG는 "아이콘·로고·상표"같은 마크, "만화·일러스트"같은 플랫한 그림, "도표·차트·다이어그램"같은 데이터, "지도·약도·(지하철)입체구조도"같은 인포그래픽, "보험약관" 같은 깨알같은 글씨가 가득 담긴 문서[1]를 저장하는 데 적합하다.
또한 웹 폰트를 사용하는 대신 폰트를 적용할 문구(타이틀) 자체를 SVG로 전환해서 웹에서의 글꼴이 예쁜 문서를 만드는 용도로도 적합하다. <text> 속성에 글꼴을 지정하여 텍스트를 삽입할 경우, 기기에 폰트가 없으면 기본 폰트로 나온다. 따라서 흔하지 않은 글꼴을 사용할 때는 Inkscape 등을 이용해 래스터화를 진행할 필요가 있다.
SVG 일러스트를 기반으로 LottieFiles 등을 사용해 SVG 애니메이션을 만들 수도 있다.
SVG는 기본적으로 벡터 이미지를 구현하기 위한 포맷이지만 부분적으로 래스터 이미지가 쓰이는 경우도 있다. SVG 일러스트의 경우 대체적으로 벡터로 구현되지만 간혹가다 벡터로 구현이 어려운 디자인 요소가 생기기도 한다. 그래서 SVG가 래스터 이미지 삽입이 가능하도록 개발된 것. <image> 태그에 href나 xlink:href 속성에 BASE64로 인코딩된 속성값을 넣으면 된다. href="data:image/png;base64,(데이터 평문값)"을 넣으면 된다. 나무위키에서는 xlink:href 속성을 지원하지 않으므로 href 속성을 사용해야 되나, 2023년 11월을 기점으로 해당 속성을 사용하는 방법이 작동하지 않는 상황이 되었다.
웹 문서에 SVG를 삽입하는 방법은 텍스트 삽입 방식, 이미지 파일 삽입 방식 둘 다 가능하다. <svg> 태그를 이용해 HTML에 SVG의 XML 소스를 넣는 방식으로 직접 이미지를 넣을 수도 있고, <img> 태그를 이용해 기존의 이미지처럼 삽입하는 것 역시 가능하다.
GZIP으로 압축된 SVGZ라는 형식도 있다.
Free Technology Illustrations to customize | Storyset
storyset.com