SVG 포맷이란? 2026년 완전 기술 가이드
SVG(Scalable Vector Graphics) 포맷에 대해 모든 것을 배우세요: 작동 원리, 사용 시점, 그리고 왜 모던 웹 디자인에 필수적인지.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVG는 품질 손실 없이 무한히 확장되는 XML 기반, W3C 표준 벡터 포맷
-
인라인 SVG는 완전한 CSS/JS 제어를 제공;
<img>태그는 캐싱 가능 — 사용 사례에 따라 선택 -
접근성이 내장됨:
<title>,<desc>,role,aria-label이 SVG를 스크린 리더 친화적으로 만듦 - 애니메이션은 4가지 접근법을 포함: SMIL, CSS, JavaScript, Web Animations API
- 신뢰할 수 없는 소스의 SVG는 항상 sanitize — 포맷이 스크립트를 포함할 수 있음
- VectoSolve의 SVG 최적화 도구로 메타데이터 제거 및 경로 압축 최적화
SVG란 정말 무엇인가?
SVG(Scalable Vector Graphics)는 단순한 이미지 포맷이 아닙니다. 수학적 좌표, 기하학적 프리미티브, 스타일 선언을 사용하여 2차원 그래픽을 설명하는 완전한 XML 어휘입니다. HTML과 같은 수준에 존재합니다: 텍스트 기반, 사람이 읽을 수 있고, DOM 통합, CSS로 스타일링 가능.
W3C는 SVG를 "XML로 2차원 그래픽을 설명하기 위한 언어"로 정의합니다. XML이기 때문에 모든 SVG는 텍스트 편집기에서 열고, JavaScript로 조작하고, 스키마에 대해 검증할 수 있는 구조화된 문서입니다. 다른 주류 이미지 포맷은 이것을 제공하지 않습니다.
"SVG는 웹의 네이티브 이미지 포맷입니다. 웹에서 살기만 하는 것이 아니라 — 웹 그 자체입니다.
SVG 구조: XML 구조와 viewBox
모든 SVG는 루트 <svg> 요소로 시작합니다. 속성을 이해하는 것이 포맷을 마스터하는 열쇠입니다.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="400" height="200">
<rect x="10" y="10" width="180" height="80" rx="8"
fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
<text x="100" y="58" text-anchor="middle"
fill="#f8fafc" font-size="18">안녕, SVG!</text>
</svg>xmlns는 SVG 네임스페이스를 선언 — 독립적인.svg파일에서는 필수, HTML5에 인라인할 때는 선택적viewBox="0 0 200 100"은 내부 좌표계를 정의: 원점(0,0), 너비 200단위, 높이 100width/height는 렌더링 크기를 설정; 브라우저가 viewBox를 이 뷰포트에 매핑
viewBox는 좌표 공간을 픽셀 크기에서 분리합니다. viewBox="0 0 24 24"인 아이콘은 16px이든 512px이든 동일하게 렌더링됩니다 — 브라우저가 좌표계를 스케일링합니다. 이것이 SVG가 무한히 확장되는 이유입니다.
SVG는 Y축이 아래를 향하는 좌표계(CSS 및 Canvas와 동일)를 사용하며, 원점은 왼쪽 상단입니다.
SVG는 순수 XML입니다. SVG 파일을 아무 텍스트 편집기로 생성, 편집, 디버그할 수 있습니다 — VS Code, Vim, 메모장까지. 이것은 PNG나 JPG 같은 바이너리 포맷과 근본적으로 다릅니다. 비주얼 인터페이스가 필요하신가요? VectoSolve의 SVG 에디터로 실시간 코드 출력을 이용하세요.
역사: W3C, 브라우저 전쟁, 그리고 현대적 채택
- 1998년: W3C가 Adobe의 PGML과 Microsoft의 VML 제안을 통합하여 SVG 워킹 그룹 설립
- 2001년: SVG 1.0이 W3C 권고안이 됨
- 2003년: SVG 1.1이 사양을 개선하고 모듈화
- 2011년: SVG 1.1 Second Edition — 대부분의 브라우저가 완전히 구현하는 버전
- 2018년: SVG 2.0이 Candidate Recommendation에 도달, CSS 및 HTML과 정렬
IE 사가
IE 8 이하는 SVG 지원이 전무했습니다. IE 9(2011년)는 기본적인 렌더링을 제공했지만 격차가 있었습니다: SMIL 애니메이션 없음, 제한된 필터, viewBox 문제. 진정한 전환점은 2022년 Microsoft가 IE를 Edge(Chromium)로 대체했을 때 왔습니다. 오늘날 SVG는 98.5%의 글로벌 브라우저 지원을 보유하고 있습니다.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealSVG 요소 레퍼런스
| 요소 | 목적 | 일반적인 사용 |
|---|---|---|
<path> | 그리기 명령(M, L, C, Z)으로 임의의 도형 | 아이콘, 로고, 아웃라인 |
<rect> | 선택적 둥근 모서리(rx/ry) 사각형 | 버튼, 카드, 배경 |
<circle> | 중심점과 반지름으로 원 | 점, 아바타, 파이 차트 |
<polygon> | 좌표점에서 닫힌 도형 | 별, 육각형, 화살표 |
<text> | 렌더링, 선택, 검색 가능한 텍스트 | 레이블, 워터마크 |
<g> | 집합적 변환/스타일을 위한 그룹 요소 | 레이어 제어, 그룹화 |
<defs> | 재사용 가능한 정의(직접 렌더링되지 않음) | 그래디언트, 패턴, 클립 |
<use> | 다른 곳에서 정의된 요소를 복제 | 아이콘 재사용, 스프라이트 |
<symbol> | <defs> 안의 <g>와 비슷하지만 자체 viewBox를 가짐 | 아이콘 라이브러리, 스프라이트 시트 |
인라인 SVG vs img vs CSS 배경 vs object
| 방법 | CSS 스타일링 | JS 접근 | 캐싱 | 접근성 | 최적 용도 |
|---|---|---|---|---|---|
인라인 <svg> | 완전 | 전체 DOM | 불가 | 우수 | 아이콘, 인터랙티브 그래픽 |
<img> 태그 | 없음 | 없음 | 가능 | 좋음 (alt) | 정적 로고, 일러스트레이션 |
CSS background | 없음 | 없음 | 가능 | 불량 | 장식적 패턴만 |
<object> | 내부만 | contentDocument 통해 | 가능 | 보통 | 레거시 인터랙티브 SVG |
호버 상태, 애니메이션, JS 인터랙션이 필요할 때 인라인을 선택. 캐싱하려는 정적 자산에는 <img>를 선택. CSS 배경은 장식에만 사용. <object> 접근법은 2026년에 최선의 선택이 되는 경우가 드뭅니다.
접근성: role, aria-label, title, desc
SVG는 사양에 일급 접근성이 내장되어 있습니다:
<svg role="img" aria-labelledby="logoTitle logoDesc"
viewBox="0 0 120 40">
<title id="logoTitle">VectoSolve 로고</title>
<desc id="logoDesc">파란색 그래디언트의 기하학적 V와 S 모노그램</desc>
<path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>role="img"— 보조 기술에 이것이 이미지임을 알림<title>— 접근 가능한 이름(<img>의alt에 해당)<desc>— 복잡한 그래픽을 위한 더 긴 설명aria-labelledby—<title>과<desc>요소에 링크aria-hidden="true"— 순수 장식적 SVG에 스크린 리더로부터 숨기기 위해 사용
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Free애니메이션: SMIL, CSS, JavaScript, Web Animations API
SMIL (SVG의 네이티브 애니메이션)
<circle cx="50" cy="50" r="20" fill="#ef4444">
<animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>CSS 애니메이션
SVG 요소에 @keyframes, transition, transform을 적용 — 이미 알고 있는 CSS와 동일합니다.
JavaScript 라이브러리
GSAP, Anime.js, Snap.svg가 복잡한 경로 모핑과 순차적 애니메이션을 위한 타임라인 기반 제어를 제공합니다.
Web Animations API
JS 파워와 CSS 성능을 결합한 현대적 표준 기반 접근법:
element.animate(
[{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
{ duration: 2000, iterations: Infinity }
);Pro Tip: 아이콘 시스템에 SVG 스프라이트를 사용하세요. 단일 숨겨진 SVG에서 아이콘을 <symbol> 요소로 정의하고, 각각을 <use href="#icon-name"/>으로 참조합니다. 하나의 HTTP 요청, 완전한 CSS 제어, 브라우저 캐싱. 아이콘 폰트의 현대적 대체품 — 더 작고, 더 접근 가능하고, 모든 크기에서 더 선명합니다.
Warning: SVG는 JavaScript를 실행할 수 있습니다. SVG가 <script> 요소, 이벤트 핸들러(onload, onclick), 외부 참조를 지원하기 때문에 신뢰할 수 없는 SVG는 XSS 공격의 벡터가 될 수 있습니다.
자신을 보호하세요: 인라인 삽입 전 DOMPurify로 sanitize, 사용자 업로드 SVG에는 <img> 태그 선호(브라우저가 <img> 컨텍스트에서 스크립트 차단), 엄격한 CSP 설정, 업로드 처리 중 <script>, <foreignObject>, 이벤트 핸들러 제거.
성능 최적화
디자인 도구에서 나오는 SVG는 비대합니다 — 편집기 메타데이터, 중복 그룹, 과도한 소수 정밀도.
| 최적화 단계 | 일반적인 절감 |
|---|---|
| 메타데이터 제거 | 10-25% |
| 소수 정밀도 감소 | 15-30% |
| 그룹 병합, ID 정리 | 5-15% |
| GZIP/Brotli(서버 측) | 60-75% |
| 합산(압축 전) | 40-60% |
핵심 기법: 편집기 메타데이터 제거, 좌표 정밀도를 소수 1~2자리로 축소, 중첩된 <g> 요소 평탄화, 고정 치수 대신 viewBox 사용, GZIP/Brotli 활성화(SVG는 매우 잘 압축됨), VectoSolve 최적화 도구로 자동화.
SVG 시작하기
VectoSolve는 완전한 SVG 워크플로우를 위한 AI 도구를 제공합니다:
SVG는 웹의 네이티브 그래픽 언어입니다 — 개방적, 표준화, 접근 가능, 애니메이션 가능, 성능 우수. 2026년에 SVG 능숙도는 선택이 아닙니다. 기초입니다.
| SVG 기능 | 브라우저 지원 | 사용 사례 |
|---|---|---|
| CSS/JS 제어의 인라인 SVG | 모든 모던 브라우저 (98%+) | 인터랙티브 아이콘, 애니메이션, 테마 |
| <img> 태그로 임베딩 | 유니버설 | 정적 로고, 캐싱된 일러스트레이션 |
| SMIL 애니메이션 | IE 제외 전부 (95%+) | JavaScript 없는 선언적 SVG 애니메이션 |
| SVG 필터 (feGaussianBlur 등) | 모든 모던 브라우저 (97%+) | 블러, 그림자, 색상 조작 |
| 접근성 (title, desc, aria) | 스크린 리더 + 모든 브라우저 | 시각 장애인을 위한 인클루시브 디자인 |
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal참고 자료
- MDN Web Docs: SVG — 모든 SVG 요소, 속성, API에 대한 종합적인 레퍼런스
- W3C SVG 2 사양 — SVG 구문, 렌더링, 인터랙티비티를 정의하는 W3C 공식 표준
- CSS-Tricks: Using SVG — 웹에서 SVG 임베딩, 스타일링, 최적화를 위한 실용적 가이드
- web.dev Performance — 이미지 최적화와 Core Web Vitals에 대한 Google 리소스
- Smashing Magazine — SVG 접근성, 애니메이션, 모범 사례에 대한 심층 기사