Scalable Vector Graphics (.svg)

W3C 표준

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity, CSS styling, and animation.

발명자: World Wide Web Consortium (W3C)연도: 2001MIME: image/svg+xml

SVG을(를) PNG(으)로 변환

무료 브라우저 내 SVG-PNG 변환기. 기기에서 파일을 즉시 변환하세요.

SVG에서 PNG로 변환기 →

SVG 온라인 압축

브라우저 내 100% 안전한 압축 — 파일이 기기 외부로 전송되지 않습니다

SVG 압축 →

검사 및 메타데이터

운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 SVG 파일을 식별합니다:

바이트 단위 헤더 시그니처 (매직 바이트)

운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 SVG 파일을 식별합니다:

16진수 시그니처 (오프셋 0):

3C 73 76 67

ASCII 표현: <svg

표준화: W3C Recommendation (SVG 1.1 / SVG 2)

기술 사양

컨테이너 아키텍처	XML-based text markup document defining 2D vector geometry
압축	Gzip / Brotli text compression (SVGZ uses gzip compression)
바이트 엔디안	Not applicable (Text-based UTF-8 / UTF-16 character stream)
색 공간	sRGB, CSS Color Module 4 (Display P3, lab, lch)
채널 및 구조	Unlimited resolution vector shapes, bezier curves, typography, and opacity masks
최대 크기	Resolution-independent (scales infinitely to any viewport without pixelation)
투명도	Full variable alpha transparency and CSS blend modes
스트리밍 및 프로그레시브	Progressive text stream parsing supported by browser XML parser

기술 비교 매트릭스: SVG 대 경쟁사

기술적 속성	SVG (현재)	HTML5 Canvas	PDF	PNG
Rendering Model	Retained mode vector DOM	Immediate mode bitmap canvas	Retained mode fixed page container	Raster pixel grid
Styling & CSS	Fully styleable via CSS classes and variables	Requires JavaScript canvas API redraws	No dynamic CSS styling	Fixed raster pixels
Infinite Scalability	Yes (mathematical vector curves)	Requires manual resolution scaling	Yes (vector elements)	No (pixelates when enlarged)
Interactivity	Native DOM events (hover, click, animations)	Requires manual hit detection math	Static document	Requires image map or canvas

일반적인 손상 모드 및 헥스 복구 가이드

⚠️ Browser displays XML Parsing Error: unclosed token or mismatched tag.

근본 원인: Malformed XML syntax, missing closing tags, or unescaped ampersands ('&' instead of '&').

복구: Validate with an XML linter (xmllint file.svg) and correct unbalanced tags.

보안 분석 및 파서 공격 벡터

Because SVG is executable XML that supports '<script>' tags and external entities, it presents significant XSS and SSRF risks if untrusted SVGs are displayed.

알려진 공격 벡터

Stored Cross-Site Scripting (XSS) via embedded '<script>' tags or 'onload=' event handlers.
XML External Entity (XXE) attacks reading local server files when parsed on backend servers.
Billion Laughs XML entity expansion causing denial of service.

방어적 모범 사례: Always sanitize SVGs using DOMPurify before embedding, or serve SVGs with 'Content-Security-Policy: default-src 'none'' or as '<img>' tags which automatically disable scripts.

역사적 배경 및 주요 이력

2018W3C SVG 2 Candidate Recommendation integrates modern CSS styling.

2011SVG 1.1 (Second Edition) standardizes universal mobile and desktop browser support.

2001W3C publishes SVG 1.0 specification developed from VML and PGML proposals.

주요 장점

Infinite resolution independence: crisp lines and typography on any display or print scale.
Extremely small file size for logos, icons, and UI interface elements.
Fully scriptable and styleable via CSS and JavaScript inside the browser DOM.

기술적 제한 사항 및 단점

Unsuitable for photographs or complex continuous-tone imagery.
Complex vector paths with thousands of nodes can cause CPU rendering lag and high battery drain.
XML nature allows embedded scripting, requiring strict sanitization before rendering untrusted uploads.

흥미로운 기술적 상식

Because SVG is plain XML text, compressing it with Gzip (producing an .svgz file) often reduces size by 70%–80%.
The viewBox attribute defines an abstract coordinate canvas that maps dynamically to physical screen pixels.

자주 묻는 기술 질문

Can SVG files contain malicious code?

Yes. Because SVG is valid XML, it can contain embedded JavaScript ('<script>') that executes if the SVG is loaded directly in a browser or opened in an inline '<svg>' element. Serving SVGs via an '<img>' tag automatically neutralizes script execution.

When should I use SVG instead of PNG?

Use SVG for icons, logos, charts, illustrations, and typography where crisp scaling across all screen sizes and small file sizes are required. Use PNG or WebP for photographs.