SVG란? 벡터 형식 완벽 가이드

SVG는 픽셀이 아니라 그리기 명령으로 이루어진 이미지 형식입니다. 로고, 아이콘, 차트를 SVG로 저장하면 파일에는 "이 점에서 저 점까지 곡선을 그리고 이 색으로 채워라" 같은 명령이 들어갑니다. 그래서 SVG는 어떤 크기에서도 선명하고, 파일이 아주 작은 경우가 많으며, 텍스트 편집기로 열어 수정할 수도 있습니다. 이 글에서는 W3C 표준 속 SVG의 위치, 파일 구조, 브라우저와 소프트웨어 지원, 보안 위험, SVG와 PNG 또는 JPG 사이의 변환 방법을 다룹니다.

SVG란 무엇인가요?

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 기술하는 XML 기반 W3C 표준입니다. 확장자는 .svg, MIME 유형은 image/svg+xml입니다. gzip으로 압축한 변형은 .svgz 확장자를 씁니다.

래스터 형식(JPG, PNG, WebP)은 그림을 고정된 픽셀 격자로 저장하므로, 확대하면 픽셀이 보입니다. SVG는 도형을 수학적으로 기술하며, 브라우저나 프로그램이 화면 해상도에 맞춰 다시 그립니다. MDN의 이미지 형식 가이드는 SVG를 그리기 명령으로 표현할 수 있는 이미지, 특히 표시 크기를 알 수 없거나 크기가 바뀌는 경우에 이상적인 선택이라고 설명하며, 사진에는 대체로 쓸모가 없다고 덧붙입니다.

역사: SVG 1.0, 1.1, SVG 2

• 2001년 9월 4일: SVG 1.0이 W3C 권고안으로 발표되었습니다.
• 2003년 1월 14일: SVG 1.1이 권고안이 되었습니다. 1.1은 언어를 모듈로 나눠 모바일 프로필 같은 하위 집합을 정의하기 쉽게 했습니다.
• 2011년 8월 16일: SVG 1.1 제2판이 발표되었습니다. 오늘날 브라우저가 기반으로 삼는 안정 버전입니다.
• SVG 2: W3C 발행 이력에 따르면 2012년부터 작업 초안이 나왔고, 2016년 9월 15일 첫 후보 권고안 스냅숏(Candidate Recommendation Snapshot)이 발표되었습니다. 최신 스냅숏은 2026년 10월 6일 자이며, 문서는 아직 후보 권고안 단계에 있습니다.

SVG 2는 1.1 제2판을 바탕으로 HTML, CSS와의 통합을 강화하는 것을 목표로 합니다. 필터, 마스킹, 글꼴 같은 일부 주제는 별도의 CSS와 FX 모듈로 옮겨졌습니다. 실제로 브라우저는 SVG 2의 일부만 구현하므로, 모든 기능이 어디서나 작동한다고 가정하지 마세요.

SVG 파일의 구조

간단한 SVG 파일은 다음과 같습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

좌표계: viewBox, width, height

viewBox는 그림의 내부 좌표계(여기서는 0부터 100)를 정의합니다. width와 height는 그림이 페이지에서 차지하는 공간을 정합니다. viewBox가 있는 SVG는 CSS로 어떤 크기를 주든 비율에 맞게 확대, 축소됩니다. viewBox가 없는 파일은 크기를 바꿀 때 잘릴 수 있는데, 로고에서 가장 흔한 실수 중 하나입니다.

핵심 요소

• 도형: rect, circle, ellipse, line, polyline, polygon, 그리고 무엇이든 그릴 수 있는 path.
• 텍스트: text와 tspan. 텍스트는 선택하고 검색할 수 있지만, 보는 기기에 해당 글꼴이 없으면 대체 글꼴이 쓰입니다.
• 그룹과 재사용: g, defs, symbol, use. 아이콘 세트는 하나의 파일에 symbol 요소로 묶이는 경우가 많습니다.
• 칠하기: 단색, 선형 및 방사형 그라데이션, 패턴, 클리핑 경로, 마스크, 필터(흐림, 그림자).
• 스타일과 애니메이션: CSS로 SVG의 스타일을 지정할 수 있고, CSS 애니메이션과 SMIL 애니메이션 요소로 움직임을 더합니다.
• 내장 콘텐츠: 래스터 그림용 image, HTML용 foreignObject, JavaScript용 script.

색상, 투명도, 레이어, 페이지

SVG에서 투명도는 기본입니다. 그려지지 않은 부분은 비어 있으며, opacity와 fill-opacity로 반투명을 정의합니다. 레이어는 g 그룹으로 표현되며, Inkscape와 Illustrator도 레이어를 이렇게 저장합니다. 색상은 기본적으로 sRGB이고, 색을 숫자로 적기 때문에 일반적인 의미의 비트 깊이 제한이 없습니다. SVG는 여러 페이지 문서 형식이 아니므로, 여러 페이지 도면에는 PDF가 더 적합합니다.

브라우저, 운영 체제, 소프트웨어 지원

MDN에 따르면 Chrome, Edge, Firefox, Opera, Safari 모두 SVG를 지원합니다. <img>, CSS background-image, HTML 안 인라인, <object>와 <iframe>으로 쓸 수 있습니다. Inkscape, Adobe Illustrator, Affinity Designer, Figma 같은 벡터 도구는 SVG를 읽고 쓰며, 현재 버전의 Microsoft Office에서도 SVG 그래픽을 삽입할 수 있습니다.

그 밖의 곳에서는 지원이 약합니다. 많은 소셜 네트워크, 이메일 프로그램, 메신저 앱, 업로드 양식이 SVG를 거부하거나 미리보기를 보여 주지 않습니다. 그 이유 중 하나가 아래에서 설명할 보안 위험입니다.

보안: SVG는 문서처럼 다루세요

SVG는 XML 문서이므로 script 요소, 이벤트 속성(onload 등), 외부 참조를 담을 수 있습니다. MDN의 "SVG as an image" 페이지는 SVG를 <img>나 CSS 배경으로 쓸 때 브라우저가 JavaScript를 비활성화하고 이미지나 스타일시트 같은 외부 리소스를 불러오지 않는다고 설명합니다. 하지만 파일을 직접 열거나 <iframe>, <object>, <embed>로 넣으면 이런 제한이 적용되지 않습니다.

실무적인 결론은 이렇습니다. 사이트가 사용자에게 SVG 파일 업로드를 허용하고 자체 도메인에서 그대로 제공하면, 파일에 심어진 스크립트가 그 사이트의 맥락에서 실행될 수 있습니다(저장형 XSS). 대표적인 대응책은 다음과 같습니다.

• 업로드된 SVG를 script, 이벤트 속성, foreignObject, 외부 링크를 제거하는 새니타이저에 통과시킵니다.
• 사용자 파일을 별도 도메인에서, 엄격한 Content-Security-Policy와 함께, 또는 다운로드(Content-Disposition: attachment)로 제공합니다.
• 벡터가 필요 없다면 업로드된 SVG를 서버에서 PNG로 변환하고 래스터 버전만 게시합니다.

대표적인 용도

• 로고와 브랜드 자산: 파일 하나로 명함부터 대형 옥외 광고까지 선명하게 유지됩니다.
• 인터페이스 아이콘: CSS로 색을 바꿀 수 있고 고밀도 화면에서도 흐려지지 않습니다.
• 차트, 지도, 다이어그램: D3.js 같은 라이브러리는 데이터를 바로 SVG 요소로 그립니다.
• 파비콘: 현재 브라우저는 <link rel="icon" type="image/svg+xml">로 SVG 파비콘을 받아들입니다.
• 커팅과 인쇄: 레이저 커터, 비닐 커터, 자수 기계는 벡터 경로로 작업합니다.

장점과 단점

자주 겪는 문제와 해결 방법

사이트나 앱이 SVG를 받지 않습니다

가장 쉬운 해결책은 PNG 사본입니다. 저희 SVG를 PNG로 변환하는 도구는 브라우저에서 그림을 원하는 픽셀 너비의 투명 PNG로 렌더링합니다. 파일은 업로드되지 않으며 기기를 떠나지 않습니다.

텍스트가 다른 글꼴로 보입니다

SVG는 기본적으로 글꼴을 내장하지 않으므로, 보는 시스템에 글꼴이 없으면 대체 글꼴이 쓰입니다. 이미지 맥락에서는 외부 글꼴도 불러오지 않습니다. 디자인 도구에서 텍스트를 윤곽선으로 변환하거나 글꼴을 내장하세요.

페이지에서 SVG 크기가 이상하거나 잘립니다

viewBox가 없거나 width/height가 고정되어 있으면 크기 조절이 예상대로 되지 않습니다. 루트 svg 요소에 그림 전체를 덮는 viewBox를 넣고 크기는 CSS로 정하세요.

파일이 예상보다 큽니다

디자인 도구는 편집기 메타데이터, 지나치게 많은 소수점 자릿수, 숨겨진 레이어를 SVG에 기록합니다. SVGO 같은 최적화 도구로 이를 제거할 수 있습니다. 서버에서 Gzip이나 Brotli로 압축하면 텍스트 기반인 SVG가 더 작아집니다.

PNG 로고를 SVG로 바꾸고 싶습니다

래스터 이미지는 진정한 의미로 벡터로 "변환"할 수 없으며, 도구들이 하는 일은 트레이싱입니다. 도형을 감지해 윤곽선으로 다시 그리는 것이죠. 저희 PNG를 SVG로, JPG를 SVG로 도구는 2~8가지 색으로 트레이싱합니다. 단순한 로고와 그림에는 좋은 결과가, 사진에는 거친 결과가 나옵니다. 이 도구들에서는 파일이 보안 연결을 통해 저희 서버에 업로드되어 그곳에서 트레이싱되고, 늦어도 30분 이내에 삭제됩니다.

변환 팁

• 목표 크기를 정하세요: SVG를 PNG로 렌더링할 때는 이미지가 표시될 가장 큰 크기를 고르고, 고밀도 화면을 위해 두 배로 하세요. 저희 도구에서 긴 변은 최대 4096픽셀까지 가능하며, 너비를 비워 두면 작은 그림은 긴 변이 1024픽셀이 되도록 확대됩니다.
• 사진이 담긴 경우 JPG: SVG에 사진이 내장되어 있고 투명도가 필요 없다면 JPG나 WebP가 PNG보다 작습니다. PNG를 만든 뒤 이미지 변환기에서 변환할 수 있습니다.
• 파비콘: 로고가 SVG라면 파비콘 생성기가 이를 받아 패키지에 icon.svg를 추가합니다.
• 트레이싱용 깨끗한 원본: PNG로 SVG를 만들 때는 고해상도에 단색 위주이고 노이즈 없는 이미지로 시작하세요.

자주 묻는 질문

SVG와 PNG는 무엇이 다른가요?

PNG는 고정된 수의 픽셀로 이루어져 확대하면 흐려집니다. SVG는 도형을 기술하므로 어떤 크기에서도 선명하게 다시 그려집니다. 로고와 아이콘에는 SVG가, 사진과 스크린샷에는 PNG나 JPG가 맞습니다.

SVG 파일에 바이러스가 들어 있을 수 있나요?

SVG는 실행 프로그램이 아니지만 JavaScript를 내장할 수 있습니다. SVG를 이미지(<img>)로 표시하면 스크립트가 실행되지 않지만, 브라우저에서 파일을 직접 열면 실행될 수 있습니다. 출처를 알 수 없는 SVG는 직접 열지 말고 뷰어에서 확인하거나 PNG로 변환하세요.

Word나 PowerPoint에 SVG를 넣을 수 있나요?

현재 버전의 Microsoft Office는 SVG 삽입을 지원합니다. 오래된 버전이거나 다른 프로그램과 파일을 공유할 예정이라면 PNG 사본이 더 안전합니다.

SVG를 PNG로 변환하면 화질이 떨어지나요?

PNG는 무손실이지만 그림이 특정 픽셀 크기로 고정됩니다. 충분히 큰 너비를 고르면 손실을 느끼지 못하지만, 나중에 PNG를 확대하면 흐려집니다.

SVG는 애니메이션을 지원하나요?

네. CSS 애니메이션, SMIL 애니메이션 요소, JavaScript로 움직임을 줄 수 있습니다. PNG로 변환하면 한 프레임만 얻게 됩니다.

출처

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 발행 이력
• MDN: SVG as an image
• MDN: Image file type and format guide