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=#555>비트맵	<colbgcolor=#555>손실 압축	JPEG	AVIF^▶Lα · BPG^▶α · FLIF^▶α · HEIF^▶ · WebP^▶α ·	RAW · DDS^▶Lα · PSD^▶Lα
무손실 압축		APNG^▶α · DNG · EXR^α · GIF^▶ · PCX · PNG^α · RGBE^α · TGA^α · TIFF^Lα
무손실 무압축		BMP^α
벡터		AI · CDR · SVG
▶: 애니메이션 기능 지원 / L: 다중 레이어 지원 / α: 알파값 지원
관련 틀: 그래픽 · 오디오 · 비디오

}}}}}}}}}

<colbgcolor=#000000> SVG

1. 개요2. 특징

2.1. 벡터 그래픽스 지원2.2. XML 구조2.3. 낮은 인지도

3. 지원 프로그램4. 나무위키 규정5. 유용한 정보6. 외부 링크7. 관련 문서

[clearfix]

1. 개요

_S_calable _V_ector _G_raphics

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

2. 특징

2.1. 벡터 그래픽스 지원

벡터 이미지의 공통적 특성으로 확대를 해도 픽셀이 깨지지 않는다. 그렇기 때문에 높은 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월을 기점으로 해당 속성을 사용하는 방법이 작동하지 않는 상황이 되었다.

2.2. XML 구조

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

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

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

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

2.3. 낮은 인지도

개인이 저장할 만한 대부분의 이미지(사진, 짤방)들이 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를 지원하기 시작했고, 이후 컴퓨터에도 HiDPI가 본 궤도에 오르게 되면서 SVG에 우호적인 환경이 조성된다.

과거에는 나무위키에 업로드가 불가능했지만, 2020년 11월경 the seed 업데이트로 업로드가 가능해졌다. 그래서 진행되고 있는 것이 바로 이미지 벡터화 프로젝트이다.

3. 지원 프로그램

웹브라우저

IE 9 이상 - IE 10부터 본격적으로 지원.
WebKit 기반 브라우저들 - Chrome 및 크로뮴 계열 브라우저들, Safari 등.
Firefox 1.5 이상
Opera 9 이상

문서, 이미지 에디터

어도비 일러스트레이터
어도비 포토샵
Adobe Capture: 모바일 환경에서 이미지를 간편하게 SVG 파일로 만들 수 있다.
Inkscape(잉크스케이프)
Microsoft PowerPoint 2019 이후 버전: 그룹 해제를 해서 조각내어 써먹을 수도 있다.
GIMP - 파일 내보내기로 하면 안되고 경로 내보내기를 해야 한다.
피그마

파일탐색기

파일 탐색기+Microsoft PowerToys(add-on)

통합 개발 환경

4. 나무위키 규정

나무위키의 편집지침에서는 16.2. 파일의 우선순위 규정에 따라서 SVG 파일이 다른 레스터 이미지보다 우선한다. 일반 문서에서 이미지 삽입시에 이미지 포멧으로 인해 다른 사용자와 편집 충돌이 일어날 경우 동일한 내용을 표현하는 이미지 중에서 SVG 파일이 우선적으로 삽입되어야 한다. #

최신 디자인 및 로고 반영이라는 목적 외에 기존에 삽입된 SVG 파일을 다른 이미지 포멧의 파일로 대체할 경우 편집권 남용으로 제재될 수 있다. 단순히 이미지 소장 용도라고 할지라도 문서에 삽입되는 이미지의 경우 SVG 파일이 다른 파일보다 우선한다. 무엇보다도 나무위키의 파일 업로드 기능은 문서에 쓰이는 파일을 저장하는 데에 그 의의가 있지 개인의 백업 용도로 쓰라고 존재하는 것이 아니다.

단, 벡터 이미지가 아닌 실사 이미지를 단순히 확장자만 변환하여 업로드하는 것은 관련 규정에 따라 금지되어 있으니 주의.

5. 유용한 정보

svg 파일은 물론이고, 텍스트로 된 svg 역시 추출해서 이미지 파일로 만들어 다운받을 수 있게 해주는 크롬 확장 프로그램이 있다. 크롬 웹스토어
svg 파일을 편집하는 것은 상당히 어려운 작업이지만, 일부분, 혹은 전체의 색상만을 변경하는 것은 Deeditor, svg color라는 사이트에 들어가면 간편하게 할 수 있다.

6. 외부 링크

7. 관련 문서

나무위키:기능 도움말/벡터 이미지 업로드: 이미지 벡터화 방법을 제공하고 있다.
나무위키:프로젝트/이미지 벡터화

[1] 이쯤되면 사실 TXT나 PDF파일로 저장하는게 효율적이다. 하지만 이미지파일로 저장하면 파일을 읽고 넘겨보는 속도가 빨라진다는 장점이 있다. 용도와 환경(뷰어)에 따라 일장일단이 있는 셈.[2] 애초에 최신 이미지 포맷들은 나오는 족족 JPG에 인지도가 밀리는 실정이다. 그나마 WebP가 구글의 지원으로 인지도가 조금 있는 상황이다.[3] 어느 한 사기업이 제작한 기술에 의존하면 그 경쟁사는 해당 기술을 특허로 인해 쓰기 힘들고, 이는 인터넷 전체가 추구하는 정보의 자유라는 가치에 정면으로 반한다.[4] 2015년 데스크톱(모바일 제외) 기준, 구글 크롬이 큰 인기를 끌면서 점유율에 큰 변화를 이끌어 사실상 표준을 깨기 시작했는데, 그 결과가 약 7/8이 인터넷 익스플로러(IE8+9+10+11), 약 1/8이 크롬, 기타 소수의 사파리와 파이어폭스가 차지하는 점유율.

SVG