개요편집이의 제기
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 XML 기반의 2차원 벡터 그래픽스 파일 형식이자 개방형 표준이다. 월드 와이드 웹 컨소시엄(W3C)이 개발·유지하며, 벡터 도형·비트맵 이미지·텍스트를 단일 문서 안에 정의하고 상호작용·애니메이션·스크립팅까지 지원한다. XML 텍스트 파일이므로 검색·색인·압축·스크립트 처리가 가능하고, 해상도 의존 없이 확대·축소해도 품질 손실이 없다. 파일 확장자는 `.svg`이며, Gzip으로 압축한 경우 `.svgz`를 쓴다.[1][2][3]
역사·유래편집이의 제기
1998년: 경쟁 제안과 워킹 그룹 출범
1998년 W3C에 벡터 그래픽 언어 관련 6건의 경쟁 제안이 제출됐다. 주요 제안은 다음과 같다.[2][3]
웹 스케마틱스(Web Schematics) – CCLRC
PGML(Precision Graphics Markup Language) – 어도비 시스템즈, IBM, 넷스케이프, 썬 마이크로시스템즈
VML(Vector Markup Language) – 오토데스크, 휴렛 팩커드, 매크로미디어, 마이크로소프트, 비전 코퍼레이션
HGML(Hyper Graphics Markup Language) – 오렌지 UK, PRP
WebCGM – 보잉, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC, 제록스
DrawML – Excosoft AB
초기 SVG 워킹 그룹 의장은 W3C의 크리스 릴리(Chris Lilley)였다. 그룹은 기존 제안 중 어느 것도 채택하지 않고, 그것들로부터 정보를 얻되 독자적인 새로운 마크업 언어를 만들기로 결정했다.[2][3]
버전 1.x 계열
| 버전 | W3C 권고일 | 비고 |
|------|------------|------|
| SVG 1.0 | 2001-09-04 | 최초 표준 |
| SVG 1.1 | 2003-01-14 | 모듈화로 프로필 정의 가능, 1.0과 기능 차이 거의 없음 |
| SVG Tiny / SVG Basic (모바일 프로필) | 2003-01-14 | SVG 1.1의 부분 집합 |
| SVG Tiny 1.2 | 2008-12-22 | 당초 SVG Full 1.2 프로필로 기획됐으나 독립 사양으로 재구성, 지원 저조 |
| SVG 1.1 Second Edition | 2011-08-16 | 정오·명확화 반영, 새 기능 없음 |
| SVG Tiny 1.2 Portable/Secure (SVG Tiny P/S) | 2020-07-29 (IETF 초안) | 더 안전한 부분 집합, BIMI 초안 표준 요구 사항 |
버전 2
SVG 2는 SVG 1.1의 일부 기능을 제거·사용중단(deprecate)하고 HTML5·WOFF(Web Open Font Format) 신기능을 통합한다.[2][3]
`glyph`, `altGlyph` 등 글꼴 요소 제거 → WOFF로 대체
`xml:space` 속성 사용중단 → CSS 권장
`translate`, `data-*` 등 HTML5 속성 추가
SVG Tiny 1.2 텍스트 처리 기능 포함 예정(미완), 기타 1.2 기능 선별적 포함
2016-09-15 권고 후보(Candidate Recommendation) 도달, 2018-08-07·2018-10-04 개정판, 최신 초안 2023-03-08(ko) / 2025-09-14(en) 공개
작동 방식과 유형편집이의 제기
파일 구조와 렌더링
SVG 문서는 XML 트리 구조로, `<svg>` 루트 요소 아래에 그래픽 객체·스타일·스크립트·메타데이터를 계층적으로 배치한다. 브라우저·뷰어는 이 트리를 파싱해 DOM을 구성하고, CSS 캐스케이드·레이아웃·페인트 단계를 거쳐 화면에 래스터화한다. 인라인 SVG(`<svg>` 태그를 HTML 내 직접 삽입) 방식이면 HTML과 DOM·이벤트·CSS 컨텍스트를 공유하므로 정교한 UI 구현이 가능하다.[2][3]
세 가지 그래픽 객체
1. 벡터 도형 – 경로(`<path>`), 기본 도형(`<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polyline>`, `<polygon>`)
2. 래스터 이미지 – `<image>` 요소로 PNG·JPEG·또 다른 SVG 임베딩
3. 텍스트 – `<text>`, `<tspan>`, `<textPath>` 등, 유니코드·양방향·세로쓰기·경로 위 텍스트 자동 처리
스타일링·채색·그라디언트·패턴
CSS2 방식 색상 지정(이름·16진수·rgb·백분율)
`fill`/`stroke` 속성으로 단색·그라디언트(선형·방사형)·패턴(래스터/벡터 기반, x·y 반복) 적용
불투명도·마커(화살촉 등) 지원
SVG 2 초안에 그라디언트 메시 포함, 확산 곡선(diffusion curves) 논의 이력 있음[2][3]
변환·클리핑·마스킹·합성·필터
중첩 변환(`transform` 속성·`<g>` 그룹)
클리핑 패스(`<clipPath>`), 알파 마스크(`<mask>`), 알파 블렌딩 합성
필터 효과(`<filter>` + 프리미티브: 흐림·색상 매트릭스·조명·변위 등) → 비트맵 결과 생성
상호작용·링크·스크립팅·애니메이션
이벤트 핸들러(`onmouseover`, `onclick` 등) 모든 그래픽 객체에 할당 가능
XLink(`<a>`, `<use>`, `<view>`, 프래그먼트 식별자)로 내부·외부 요소 재사용·뷰 상태 제어·스프라이트 구현
기본 스크립트 언어: 자바스크립트, 전체 SVG DOM 접근·조작 가능
선언형 애니메이션: `<animate>`, `<animateMotion>`, `<animateColor>` 등 (SMIL 호환)
스크립트 기반 애니메이션: `requestAnimationFrame` 등 타이머로 DOM 조작
W3C는 SVG 애니메이션 표준으로 SMIL 명시적 권장[2][3]
글꼴·메타데이터
외부 시스템 글꼴 참조 가능, 미설치 시 표시 깨짐 우려 → SVG 글꼴(`<font>` 등)로 글리프 내장해 회피(단 SVG 2에서 `glyph`/`altGlyph` 제거, WOFF 권장)
`<metadata>`(더블린 코어 등), `<title>`, `<desc>`로 시맨틱 웹·검색·접근성 지원
압축: SVGZ
XML 특성상 반복 텍스트 다량 포함 → Gzip 무손실 압축에 매우 적합. 압축 파일은 `.svgz` 확장자, 통상 원본 20~50% 크기. W3C 적합성 테스트용 SVGZ 제공.[2][3]
모바일 프로필
| 프로필 | 대상 장치 | 특징 |
|--------|-----------|------|
| SVG Tiny (SVGT) | 피처폰 등 초저사양 | 스타일링·스크립팅 미지원, 3GPP 차세대 폰 필수 벡터 형식(MMS·IMS) |
| SVG Basic (SVGB) | 스마트폰 등 중급 | 스크립팅 선택 지원 |
| SVG Tiny 1.2 | - | μDOM·스타일링·스크립팅·비확대 스트로크 추가, 일부 데스크톱 브라우저도 지원 |
전체 DOM 미지원, 하지만 전체 표준과 완전 호환되는 부분 집합이므로 대부분 그래픽 렌더링 가능. 데스크톱·모바일 코드베이스 통합 추세로 SVG 1.1 사용 증가.[2][3]
인쇄 지원
페이지 기술 언어(PDF 등) 기초 기능 내장: 각 글리프·이미지의 인쇄 위치 지정 정보 보유, CSS 스타일링 호환, 풍부한 그래픽 표현 가능.[2][3]
관련 표준·파생
MPEG-4 Part 20 (LASeR/SAF) – SVG Tiny 기반, 동적 업데이트·이진 인코딩·최신 글꼴 표현 추가
XMT (Extensible MPEG-4 Textual) – MPEG-4 멀티미디어 콘텐츠를 XML로 표현하는 형식에 SVG 수용
규제·논란·평가편집이의 제기
보안 이슈
SVG는 스크립트·CSS를 내장할 수 있는 문서 형식이므로, 이미지 업로드 기능(프로필 사진·로고·갤러리 등)에서 SVG 파일을 허용할 때 위험하다.[2][3]
공격 벡터: CSS 배경 이미지·`<img>`·갤러리 썸네일 등으로 로드될 때 자바스크립트 실행 → 빌리언 래프스(billion laughs)류 DoS, HTML 인젝션, 사이트 간 스크립팅(XSS)
W3C 대응: "SVG 보안" 문서에서 이미지 전용 사용 시 요구 사항 규정(스크립트·외부 리소스·이벤트 핸들러 차단 등)
인라인 SVG는 문서 일부이므로 스크립팅·CSS가 예상 범위 내 → 상대적 저위험으로 평가
브라우저 지원 지연 논란
구형 IE(8 이하) 미지원으로 초기 웹 확산 저해, 팀 버너스리 경 비판
2011년 이후 주요 데스크톱 브라우저 네이티브 지원 완료, 플러그인 불필요·혼합 콘텐츠·렌더링 신뢰성 향상
모바일은 기기·엔진별 지원 편차 큼(SVGT 1.1+ 등 비표준 확장 혼재)
표준화 진행 상황
SVG 2가 2016년 권고 후보 도달 후 장기간 정체, 2018·2023/2025 초안 갱신에 그침 → 완전한 권고(Recommendation) 미달성 상태
SVG Tiny 1.2 지원 저조, SVG 1.1 Second Edition이 실질적 기준 역할 지속
이 문서는 GGWiki AI가 공개 자료(아래 출처)를 조사해 새로 쓴 초안입니다. 틀린 내용은 편집하거나 이의 제기로 알려 주세요.
