SVG

Scalable Vector Graphics

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

벡터 이미지의 공통적 특성으로 확대를 해도 픽셀이 깨지지 않는다. 그렇기 때문에 높은 PPI의 스마트폰들이 대중화된 시점에서 많은 웹사이트들이 자주 이용한다. 게다가 용량도 기존의 PNG나 GIF보다 작다.

그렇다고 만능은 아니고, 단순한 도형으로 표현하기 쉬운 이미지 용도로 적합하다. 이미지의 형태가 복잡해질수록 CPU 연산량이 늘어나 이미지 로딩이 느려질 수도 있고, 패스 데이터가 복잡해져 xml 텍스트가 기하급수적으로 늘어나면 주어진 해상도의 픽셀만 채우는 비트맵 이미지보다 용량이 커질 수도 있다.

그렇기 때문에 SVG는 "아이콘·로고·상표"같은 마크, "만화·일러스트"같은 플랫한 그림, "도표·차트·다이어그램"같은 데이터, "지도·약도·(지하철)입체구조도"같은 인포그래픽, "보험약관" 같은 깨알같은 글씨가 가득 담긴 문서[1]를 저장하는 데 적합하다. 또한 웹 폰트를 사용하는 대신 폰트를 적용할 문구(타이틀) 자체를 SVG로 전환해서 웹에서의 글꼴이 예쁜 문서를 만드는 용도로도 적합하다.

SVG 일러스트를 기반으로 LottieFiles 등을 사용해 SVG 애니메이션을 만들 수도 있다.

SVG는 기본적으로 벡터 이미지를 구현하기 위한 포맷이지만 부분적으로 래스터 이미지가 쓰이는 경우도 있다. SVG 일러스트의 경우 대체적으로 벡터로 구현되지만 간혹가다 벡터로 구현이 어려운 디자인 요소가 생기기도 한다. 그래서 SVG가 래스터 이미지 삽입이 가능하도록 개발된 것. <image> 태그에 href나 xlink:href 속성에 BASE64로 인코딩된 속성값을 넣으면 된다. href="data:image/png;base64,(데이터 평문값)"을 넣으면 된다. 나무위키에서는 xlink:href 속성을 지원하지 않으므로 href 속성을 사용해야 되나, 2023년 11월을 기점으로 해당 속성을 사용하는 방법이 작동하지 않는 상황이 되었다.

XML 형식으로 이루어져 있다. 텍스트 에디터로 열면 XML 소스가 그대로 나온다. 이를 응용해서 키보드로 Ctrl CV로 높은 질의 그래프를 그리는 등의 활용이 가능하다.

텍스트 형식이기 때문에 웹 페이지의 이미지를 브라우저 새 창에서 띄워서 저장하면 .svg 파일로 저장된다. 만약 파일 확장자가 .svg가 아니라면 저장 시에 확장자를 .svg로 바꿔주자. 인라인 형태의 SVG는 그렇게 할 수 없고, <svg> 태그 안의 내용을 복사하여 직접 SVG 파일을 만들어서 안에 붙여넣기하면 된다. 간혹 이미지 데이터가 BASE64로 인코딩된 경우도 있는데 data:image/svg+xml;base64, 다음에 나오는 텍스트를 디코딩하면 된다.

웹 문서에 SVG를 삽입하는 방법은 텍스트 삽입 방식, 이미지 파일 삽입 방식 둘 다 가능하다. <svg> 태그를 이용해 HTML에 SVG의 XML 소스를 넣는 방식으로 직접 이미지를 넣을 수도 있고, <img> 태그를 이용해 기존의 이미지처럼 삽입하는 것 역시 가능하다.

GZIP으로 압축된 SVGZ라는 형식도 있다.

개인이 저장할 만한 대부분의 이미지(사진, 짤방)들이 JPG, GIF, PNG로 되어 있기 때문에 SVG를 아는 사람이 많지 않다.[2] 특히 SVG는 아이콘, 로고, 상표 이미지로 주로 사용되기 때문에 딱히 개인 소장용 파일이 아니란 점, 벡터 이미지를 생산하고 공유하는 사람은 소수의 전문가들이라는 점도 낮은 인지도에 기여한다. 그리고 귀찮게 변환을 해야 하고 저장 방법에 따라 출력이 실패하는 경우도 있어 그냥 AI 파일을 공유해도 열 사람은 열고 쓸 사람은 잘 쓰기 때문에 굳이 SVG로 저장해야 할 이유가 적은 것. 보통 일반인이 SVG 이미지를 접할 거의 유일한 일은 일부 사이트의 이미지를 복붙할 때. 그리고 복붙이 안 됨에 짜증낸다. 무엇보다 대부분의 갤러리, 포토 앱에서 지원이 안 된다.

SVG의 역사는 꽤나 길다. SVG는 2001년 1.0 권고안이 채택된 이래로 몇차례 업그레이드되어 왔다. 그러나 SVG가 기업에서 개발한 벡터 그래픽(PGML, VML)과는 별개의 독자적 노선을 걸어서 당시 주요 기업의 외면을 받는 경향이 있었다.[3] 당시 인터넷의 사실상 표준[4]이었던 인터넷 익스플로러는 2011년 IE9을 출시하고 나서야 SVG를 지원하기 시작되었다. 반 인터넷 익스플로러 진영에서는 이보다 앞서 2005년 게코 엔진(파이어폭스), 2006년 웹키트 엔진(크롬, 사파리)에서부터 SVG가 지원되기 시작했는데 낮은 점유율로 그리 눈에 띄지는 않았다. 그나마 2010년 구글이 SVG를 검색되게 하면서 이쯤부터 SVG가 겨우 이미지 취급을 받기 시작하였다.

벡터 그래픽이라는 장점을 통해 독보적인 지위에 오를 법도 하지만, 이 분야는 2010년대 이전까지는 어도비 플래시가 주도권을 잡고 있었다. 사실 작은 아이콘 정도는 GIF로 제작해도 용량이 적고 호환성은 더 좋아서, SVG가 아이콘 제작에 좋다고 해도 이를 따르는 디자이너는 거의 없었고, 정적인 이미지보다는 저용량 애니메이션에 특화되어서 벡터 그래픽은 이쪽으로 발전되긴 했다. 여튼 훗날 기업 종속적인 플러그인이라는 문제, 보안 문제, 아이폰 탑재 거부 등으로 플래시가 배척(2021년 종료)되기 전까지는 SVG가 설 자리는 없었다. 플래시의 대안으로 HTML5, 모바일 인터넷(웹 앱)분야의 성장, 그리고 레티나 디스플레이가 도입되면서 휴대폰 화면 해상도가 컴퓨터 모니터 해상도를 앞지르면서 SVG가 점점 필요해지기 시작했다. 2019년 즈음이면 각종 지도 서비스가 플래시 종료로 마지못해 서비스를 밑바닥부터 다 갈아엎으며 HTML5를 지원해야 해서 SVG에 우호적인 환경이 조성된다.

과거에는 알파위키에 업로드가 불가능했지만, 2020년 11월경 the seed 업데이트로 업로드가 가능해졌다.