[include(틀:그래픽 포맷)] [[파일:SVG 로고.svg|width=210&align=right]] [목차] == 개요 == {{{+1 Scalable Vector Graphics}}} 스케일러블 벡터 그래픽스('''S'''calable '''V'''ector '''G'''raphics, '''SVG''')는 2차원 [[벡터 그래픽]]을 표현하기 위한 [[XML]] 기반의 파일 형식이다. == 특징 == === [[벡터 그래픽]] 지원 === 벡터 이미지의 공통적 특성으로 확대를 해도 픽셀이 깨지지 않는다. 그렇기 때문에 높은 PPI의 스마트폰들이 대중화된 시점에서 많은 웹사이트들이 자주 이용한다. 게다가 용량도 기존의 PNG나 GIF보다 작다. 그렇다고 만능은 아니고, 단순한 도형으로 표현하기 쉬운 이미지 용도로 적합하다. 이미지의 형태가 복잡해질수록 CPU 연산량이 늘어나 이미지 로딩이 느려질 수도 있고, 패스 데이터가 복잡해져 xml 텍스트가 기하급수적으로 늘어나면 주어진 해상도의 픽셀만 채우는 비트맵 이미지보다 용량이 커질 수도 있다. 물론 이쯤되면 [[쓸데없이 고퀄리티]]. 그렇기 때문에 SVG는 "아이콘·로고·상표"같은 마크, "만화·일러스트"같은 플랫한 그림, "도표·차트·다이어그램"같은 데이터, "지도·약도·(지하철)입체구조도"같은 인포그래픽, "보험약관" 같은 깨알같은 글씨가 가득 담긴 문서[* 이쯤되면 사실 TXT나 PDF파일로 저장하는게 효율적이다. 하지만 이미지파일로 저장하면 파일을 읽고 넘겨보는 속도가 빨라진다는 장점이 있다. 용도와 환경(뷰어)에 따라 일장일단이 있는 셈.]를 저장하는 데 적합하다. 또한 [[웹 폰트]]를 사용하는 대신 폰트를 적용할 문구(타이틀) 자체를 SVG로 전환해서 웹에서의 글꼴이 예쁜 문서를 만드는 용도로도 적합하다. SVG 일러스트를 기반으로 [[LottieFiles]] 등을 사용해 SVG 애니메이션을 만들 수도 있다. SVG는 기본적으로 벡터 이미지를 구현하기 위한 포맷이지만 부분적으로 래스터 이미지가 쓰이는 경우도 있다. SVG 일러스트의 경우 대체적으로 벡터로 구현되지만 간혹가다 벡터로 구현이 어려운 디자인 요소가 생기기도 한다. 그래서 SVG가 래스터 이미지 삽입이 가능하도록 개발된 것. 태그에 {{{href}}}나 {{{xlink:href}}} 속성에 [[BASE64]]로 인코딩된 속성값을 넣으면 된다. {{{href="data:image/png;base64,(데이터 평문값)"}}}을 넣으면 된다. [[나무위키]]에서는 {{{xlink:href}}} 속성을 지원하지 않으므로 {{{href}}} 속성을 사용해야 한다. === [[XML]] 구조 === XML 형식으로 이루어져 있다. [[텍스트 에디터]]로 열면 XML 소스가 그대로 나온다. 이를 응용해서 키보드로 [[Ctrl CV]]로 높은 질의 그래프를 그리는 등의 활용이 가능하다. 텍스트 형식이기 때문에 웹 페이지의 이미지를 브라우저 새 창에서 띄워서 저장하면 .svg 파일로 저장된다. 만약 파일 [[확장자]]가 .svg가 아니라면 저장 시에 확장자를 .svg로 바꿔주자. 인라인 형태의 SVG는 그렇게 할 수 없고, {{{}}} 태그를 이용해 기존의 이미지처럼 삽입하는 것 역시 가능하다. [[GZ#s-3|GZIP]]으로 압축된 SVGZ라는 형식도 있다. === 낮은 인지도 === 개인이 저장할 만한 대부분의 이미지([[사진]], [[짤방]])들이 [[JPG]], [[GIF]], [[PNG]]로 되어 있기 때문에 SVG를 아는 사람보다 모르는 사람이 많다.[* 애초에 최신 이미지 포맷들은 나오는 족족 [[JPG]]에 인지도가 밀리는 실정이다. 그나마 [[WebP]]가 구글의 지원으로 인지도가 조금 있는 상황이다. (...)] 특히 SVG는 아이콘, 로고, 상표 이미지로 주로 사용되기 때문에 딱히 개인 소장용 파일이 아니란 점, 벡터 이미지를 생산하고 공유하는 사람은 소수의 전문가들이라는 점도 낮은 인지도에 기여한다. 그리고 귀찮게 변환을 해야 하고 저장 방법에 따라 출력이 실패하는 경우도 있어 그냥 AI 파일을 공유해도 열 사람은 열고 쓸 사람은 잘 쓰기 때문에 굳이 SVG로 저장해야 할 이유가 적은 것. 보통 일반인이 SVG 이미지를 접할 유일한 일은 [[위키백과]]의 이미지를 복붙할 때. --그리고 복붙이 안 됨에 짜증낸다.-- SVG의 역사는 길다. SVG는 2001년 1.0 권고안이 채택된 이래로 몇차례 업그레이드되어 왔다. 그러나 SVG가 기업에서 개발한 벡터 그래픽(PGML, VML)과는 별개의 독자적 노선을 걸어서 당시 주요 기업의 외면을 받는 경향이 있었다.[* 어느 한 사기업이 제작한 기술에 의존하면 그 경쟁사는 그 기술을 특허로 인해 쓰지 못하고, 이는 인터넷이 추구하는 가치에 정면으로 반한다.] 당시 인터넷의 사실상 표준[* 2015년 데스크톱(모바일 제외) 기준, 구글 크롬이 큰 인기를 끌면서 점유율에 큰 변화를 이끌어 사실상 표준을 깨기 시작했는데, 그 결과가 약 7/8이 인터넷 익스플로러(IE8+9+10+11), 약 1/8이 크롬, 기타 소수의 사파리와 파이어폭스가 차지하는 점유율. (...)]이었던 [[인터넷 익스플로러]]는 2011년 --IE6가 단종되고 나서야-- IE9을 출시하고 나서야 SVG를 지원하기 시작되었다. 반 인터넷 익스플로러 진영에서는 이보다 앞서 2005년 게코 엔진([[파이어폭스]]), 2006년 웹키트 엔진([[크롬]], [[사파리]])에서부터 SVG가 지원되기 시작했는데 낮은 점유율로 그리 눈에 띄지는 않았다. 그나마 2010년 구글이 SVG를 검색되게 하면서 이쯤부터 SVG가 겨우 이미지 취급을 받기 시작하였다. 벡터 그래픽이라는 장점을 통해 독보적인 지위에 오를 법도 하지만, 이 분야는 2010년대 이전까지는 [[어도비 플래시]]가 주도권을 잡고 있었다. 사실 작은 아이콘 정도는 GIF로 제작해도 용량이 적고 호환성은 더 좋아서, SVG가 아이콘 제작에 좋다고 해도 이를 따르는 디자이너는 거의 없었고, 정적인 이미지보다는 저용량 애니메이션에 특화되어서 벡터 그래픽은 이쪽으로 발전되긴 했다. 여튼 훗날 기업 종속적인 플러그인이라는 문제, 보안 문제, 아이폰 탑재 거부 등으로 플래시가 배척(2021년 종료)되기 전까지는 SVG가 설 자리는 없었다. 플래시의 대안으로 [[HTML5]], 모바일 인터넷(웹 앱)분야의 성장, 그리고 [[레티나 디스플레이]]가 도입되면서 휴대폰 화면 해상도가 컴퓨터 모니터 해상도를 앞지르면서 SVG가 점점 필요해지기 시작했다. 2019년 즈음이면 각종 지도 서비스가 플래시 종료로 마지못해 서비스를 밑바닥부터 다 갈아엎으며 HTML5를 지원해야 해서 SVG에 우호적인 환경이 조성된다. 과거에는 [[나무위키]]에 업로드가 불가능했지만, [[the seed/업데이트#11월|2020년 11월경 the seed 업데이트]]로 업로드가 가능해졌다. 그래서 진행되고 있는 것이 바로 [[나무위키:프로젝트/이미지 벡터화|이미지 벡터화 프로젝트]]이다. == 지원 프로그램 == * 웹브라우저 * [[Internet Explorer/버전#s-9|IE 9]] 이상 - IE 10부터 본격적으로 지원. * [[WebKit]] 기반 브라우저들 - [[Chrome]] 및 [[The Chromium Projects|크로뮴]] 계열 브라우저들, [[Safari]] 등. * [[Firefox]] 1.5 이상 * [[Opera]] 9 이상 * 문서, 이미지 에디터 * [[어도비 일러스트레이터]] * [[어도비 포토샵]] * [[Adobe Capture]]: 모바일 환경에서 이미지를 간편하게 SVG 파일로 만들 수 있다. * [[Inkscape]] * [[Microsoft PowerPoint]] 2019 이후 버전: 그룹 해제를 해서 조각내어 써먹을 수도 있다. * [[GIMP]] - 파일 내보내기로 하면 안되고 경로 내보내기를 해야 한다. * [[피그마(프로그램)|피그마]] * 파일탐색기 * [[파일 탐색기]]+[[Microsoft PowerToys]](add-on) * [[통합 개발 환경]] * [[IntelliJ IDEA]] * [[어도비 드림위버]] == [[나무위키]] 규정 == [[나무위키]]의 [[나무위키:편집지침/일반 문서#파일의 우선순위|편집지침]]에서는 '''16.2. 파일의 우선순위''' 규정에 따라서 '''SVG 파일이 다른 레스터 이미지보다 우선한다'''. 일반 문서에서 이미지 삽입시에 이미지 포멧으로 인해 다른 사용자와 편집 충돌이 일어날 경우 동일한 내용을 표현하는 이미지 중에서 SVG 파일이 우선적으로 삽입되어야 한다. [[https://board.namu.wiki/b/qna/2825632|#]] 최신 디자인 및 로고 반영이라는 목적 외에 기존에 삽입된 SVG 파일을 다른 이미지 포멧의 파일로 대체할 경우 [[편집권 남용]]으로 제재될 수 있다. 단순히 이미지 소장 용도라고 할지라도 문서에 삽입되는 이미지의 경우 SVG 파일이 다른 파일보다 우선한다. 무엇보다도 나무위키의 파일 업로드 기능은 문서에 쓰이는 파일을 저장하는 데에 그 의의가 있지 개인의 백업 용도로 쓰라고 존재하는 것이 아니다. 단 벡터 이미지가 아닌 '''실사 이미지'''를 단순히 확장자만 변환하여 업로드하는 것은 [[https://namu.wiki/diff/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%ED%8E%B8%EC%A7%91%EC%A7%80%EC%B9%A8/%EC%9D%BC%EB%B0%98%20%EB%AC%B8%EC%84%9C?rev=606&oldrev=605|관련 규정]]에 따라 금지되어 있으니 주의. == 외부 링크 == * [[MDN]] [[https://developer.mozilla.org/ko/docs/Web/SVG|Web Docs의 SVG 문서]] * [[http://www.w3.org/2000/svg]] == 관련 문서 == * [[나무위키:기능 도움말/벡터 이미지 업로드]]: 이미지 벡터화 방법을 제공하고 있다. * [[나무위키:프로젝트/이미지 벡터화]] [[분류:그래픽 파일 형식]][[분류:두문자어]][[분류:2001년 출시]][[분류:나무위키 이미지 벡터화 프로젝트]]