최근 수정 시각 : 2022-05-26 12:27:50

SVG


그래픽 포맷
{{{#!wiki style="margin:0 -10px -5px; min-width:300px; min-height:calc(1.5em + 5px); word-break:keep-all"
{{{#!folding [ 펼치기 · 접기 ]
{{{#!wiki style="margin:-6px -1px -11px"
<colbgcolor=#f4eaa2,#7c732e>▶: 애니메이션 기능 지원 / L: 다중 레이어 지원 / α: 알파값 지원
비트
<colbgcolor=#f5f0cb,#555131> 손실 압축 JPEG AVIF▶Lα · BPG▶α · FLIF▶α · HEIF · WebP▶α · RAW · DDS▶Lα · PSD▶Lα^^
무손실
압축
APNG▶α · DNG · EXRα · GIF · PCX · PNGα · RGBEα · TGAα · TIFF
무손실 무압축 BMPα
벡터 AI · CDR · SVG
}}}}}}}}}
관련 틀: 그래픽 · 오디오 · 비디오

파일:SVG 로고.svg

1. 개요2. 특징
2.1. 벡터 그래픽2.2. XML 구조2.3. 낮은 인지도
3. 지원 프로그램4. 외부 링크

1. 개요

scalable vector graphics

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

2. 특징

2.1. 벡터 그래픽

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

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

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

SVG 일러스트를 기반으로 애니메이션을 만들 수도 있다. LottieFiles가 지원한다.

2.2. XML 구조

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

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

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

2.3. 낮은 인지도

SVG파일을 아는 사람보다 모르는 사람이 훨씬 많다. 개인이 저장할 만한 대부분의 이미지( 사진, 짤방)들이 JPG, GIF, PNG로 되어 있기 때문이다.[3] 특히 svg파일은 아이콘, 로고, 상표 이미지로 주로 사용되기 때문에 딱히 개인 소장용 파일이 아니란 점, 벡터 이미지를 생산하고 공유하는 사람은 소수의 전문가들이라는 점[4]도 낮은 인지도에 기여한다.

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

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

과거에는 나무위키에서 업로드가 불가능했지만, 2020년 11월 경 the seed 업데이트로 업로드가 가능해졌다. 그러나 아직 svg가 기술적으로 불완전해 간혹 svg파일이 정상적으로 불러와지지 않는 문제가 생긴다. 그래서 진행되고 있는 것이 이미지 벡터화 프로젝트.

3. 지원 프로그램

4. 외부 링크


[1] 이쯤되면 사실 TXT나 PDF파일로 저장하는게 효율적이다. 하지만 이미지파일로 저장하면 파일을 읽고 넘겨보는 속도가 빨라진다는 장점이 있다. 용도와 환경(뷰어)에 따라 일장일단이 있는 셈. [2] 웹폰트를 그냥 사용하면 무단 사용시 저작권, 사용권, 배포권 문제가 발생할 여지가 있는데, 이걸 이미지 파일로 만들어서 회피하는 것이다. 상용 글꼴이라 하더라도 이미지 파일로 만들어 올리는 것은 문제가 없는데, 한국의 판례로는 글꼴 모양은 저작물 인정이 되지 않고, 글꼴 파일의 저작권만 인정이 되기 때문이다. 또한 웹폰트 파일이 크다면 사이트 로딩 속도를 저하시킬 수도 있다. 막상 본문 글자수가 적다면 배보다 배꼽이 큰 상황이 되기도 한다. [3] 애초에 최신 이미지 포맷들은 나오는 족족 JPG에 인지도가 밀려버려왔다. 그나마 WebP가 구글의 지원으로 인지도가 조금 있는 상황이다(...) [4] 게다가 현실은 디자이너는 AI파일로, 회사원은 PPT파일로 벡터그래픽을 생산하고 공유하며, 이를 수정할 일이 없는 일반인들은 jpg로 저장하고 있어도 충분하기 때문에 SVG가 일반인들에게 널리 사용될 이유는 빈약한 편이다. [5] 어느 한 사기업이 제작한 기술에 의존하면 그 경쟁사는 그 기술을 특허로 인해 쓰지 못하고, 이는 인터넷이 추구하는 가치에 정면으로 반한다. [6] 2015년 데스크탑(모바일 제외) 기준, 구글 크롬이 큰 인기를 끌면서 점유율에 큰 변화를 이끌어 사실상 표준을 깨기 시작했는데, 그 결과가 약 7/8이 인터넷 익스플로러(IE8+9+10+11), 약 1/8이 크롬, 기타 소수의 사파리와 파이어폭스가 차지하는 점유율(...) [7] IE 10부터 본격적으로 지원. [8] Chrome 크로뮴 계열 브라우저들, Safari 등.