SVG 벡터 (.svg)
W3C 표준Scalable Vector Graphics(SVG)는 상호 작용성, CSS 스타일링, 애니메이션을 지원하는 2차원 그래픽용 XML 기반 벡터 이미지 형식입니다.
SVG을(를) PNG(으)로 변환
무료 브라우저 내 SVG에서 PNG로 변환하는 도구입니다. 기기에서 파일을 즉시 변환할 수 있습니다.
SVG 온라인 압축
비공개 - 파일은 기기를 벗어나지 않습니다
검사 및 메타데이터
운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 SVG 파일을 식별합니다:
바이트 단위 헤더 시그니처 (매직 바이트)
운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 SVG 파일을 식별합니다:
16진수 시그니처 (오프셋 0):
3C 73 76 67ASCII 표현: <svg
표준화: W3C Recommendation (SVG 1.1 / SVG 2)
기술 사양
| 컨테이너 아키텍처 | 2D 벡터 기하학을 정의하는 XML 기반 텍스트 마크업 문서 |
| 압축 | Gzip / Brotli 텍스트 압축 (SVGZ는 gzip 압축 사용) |
| 바이트 엔디안 | 해당 없음 (텍스트 기반 UTF-8 / UTF-16 문자 스트림) |
| 색 공간 | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| 채널 및 구조 | 무제한 해상도 벡터 도형, 베지에 곡선, 타이포그래피, 투명도 마스크 |
| 최대 크기 | 해상도 독립적 (픽셀화 없이 모든 뷰포트에 무한히 확대/축소 가능) |
| 투명도 | 완전 가변 알파 투명도 및 CSS 혼합 모드 |
| 스트리밍 및 프로그레시브 | 브라우저 XML 구문 분석기를 통한 프로그레시브 텍스트 스트림 구문 분석 지원 |
기술 비교 매트릭스: SVG 대 경쟁사
| 기술적 속성 | SVG (현재) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| 렌더링 모델 | 유지 모드(Retained mode) 벡터 DOM | 즉시 모드(Immediate mode) 비트맵 캔버스 | 유지 모드 고정 페이지 컨테이너 | 래스터 픽셀 격자 |
| 스타일링 및 CSS | CSS 클래스 및 변수를 통한 완전한 스타일 지정 가능 | JavaScript 캔버스 API 재조회 필요 | 동적 CSS 스타일링 없음 | 고정 래스터 픽셀 |
| 무한 확장성 | 예 (수학적 벡터 곡선) | 수동 해상도 조절 필요 | 예 (벡터 요소) | 아니오 (확대 시 픽셀화 발생) |
| 상호 작용성 | 네이티브 DOM 이벤트 (호버, 클릭, 애니메이션) | 수동 히트 감지 연산 필요 | 정적 문서 | 이미지 맵 또는 캔버스 필요 |
일반적인 손상 모드 및 헥스 복구 가이드
브라우저에 XML 구문 분석 오류(XML Parsing Error: 닫히지 않은 토큰 또는 일치하지 않는 태그)가 표시됩니다.
근본 원인: 잘못된 XML 구문, 누락된 닫는 태그, 또는 이스케이프되지 않은 앰퍼샌드('&' 대신 '&' 사용).
복구: XML 린터(xmllint file.svg)로 유효성을 검사하고 균형이 맞지 않는 태그를 수정하십시오.
보안 분석 및 파서 공격 벡터
SVG는 '<script>' 태그와 외부 엔티티를 지원하는 실행 가능한 XML이므로, 신뢰할 수 없는 SVG가 표시될 경우 심각한 XSS 및 SSRF 위험을 초래합니다.
알려진 공격 벡터
- 포함된 '<script>' 태그 또는 'onload=' 이벤트 핸들러를 통한 저장형 교차 사이트 스크립팅(XSS).
- 백엔드 서버에서 구문 분석될 때 로컬 서버 파일을 읽는 XML 외부 엔티티(XXE) 공격.
- 서비스 거부(DoS)를 유발하는 Billion Laughs XML 엔티티 확장 공격.
방어적 모범 사례: 포함하기 전에 항상 DOMPurify를 사용하여 SVG를 무해화하거나, “Content-Security-Policy: default-src 'none'”을 설정하여 제공하거나, 스크립트를 자동으로 비활성화하는 “<img>” 태그로 제공하십시오.
역사적 배경 및 주요 이력
주요 장점
- 무한한 해상도 독립성: 모든 디스플레이 또는 인쇄 배율에서 선명한 선과 타이포그래피를 제공합니다.
- 로고, 아이콘, UI 인터페이스 요소에 매우 작은 파일 크기를 제공합니다.
- 브라우저 DOM 내에서 CSS와 JavaScript를 통해 완전한 스크립팅과 스타일 지정을 지원합니다.
기술적 제한 사항 및 단점
- 사진이나 복잡한 연속 계조 이미지에는 적합하지 않습니다.
- 수천 개의 노드가 포함된 복잡한 벡터 경로는 CPU 렌더링 지연 및 높은 배터리 소모를 유발할 수 있습니다.
- XML 특성상 임베디드 스크립트가 허용되므로, 신뢰할 수 없는 업로드를 렌더링하기 전에 엄격한 무해화(sanitization) 작업이 필요합니다.
흥미로운 기술적 상식
- SVG는 일반 XML 텍스트이므로 Gzip으로 압축하면(.svgz 파일 생성) 크기가 보통 70%~80% 줄어듭니다.
- viewBox 속성은 물리적 화면 픽셀에 동적으로 매핑되는 추상 좌표 캔버스를 정의합니다.
- 초기 웹 브라우저는 네이티브 SVG 엔진이 부족하여, 2011년경 네이티브 브라우저 지원이 정착되기 전에 Adobe가 Adobe SVG Viewer 브라우저 플러그인을 배포하게 했습니다.
자주 묻는 기술 질문
SVG 파일에 악성 코드가 포함될 수 있습니까?
네. SVG는 유효한 XML이므로 SVG가 브라우저에 직접 로드되거나 인라인 '<svg>' 요소로 열릴 때 실행되는 포함된 JavaScript('<script>')를 포함할 수 있습니다. '<img>' 태그를 통해 SVG를 제공하면 스크립트 실행이 자동으로 무력화됩니다.
PNG 대신 SVG를 사용해야 하는 경우는 언제입니까?
모든 화면 크기에서 선명하게 확대·축소되고 파일 크기가 작아야 하는 아이콘, 로고, 차트, 일러스트레이션, 타이포그래피에는 SVG를 사용하십시오. 사진에는 PNG나 WebP를 사용하십시오.
크거나 복잡한 SVG 파일은 어떻게 최적화할 수 있습니까?
SVGO와 같은 도구를 사용하거나 SVG 압축을 실행하여 중복된 메타데이터, 편집기 주석(Inkscape 또는 Illustrator에서 생성된), 보이지 않는 그룹, 사용되지 않는 네임스페이스 선언을 제거함으로써 벡터 경로를 정리할 수 있습니다.
관련 SVG 변환 쌍
SVG 벡터 파일을 PNG 래스터 이미지로 변환하면 코드 기반의 확장 가능한 그래픽이 범용 애플리케이션 호환성을 갖춘 고정 픽셀 그리드로 바뀝니다.
반응형 웹 확장성과 벡터 호환 레이아웃 통합을 위해 래스터 PNG 이미지를 SVG XML 벡터 컨테이너로 감쌉니다.
해상도 손실 없이 구형 16비트 Windows GDI 벡터 드로잉 레코드를 최신 SVG 경로로 변환합니다.
32비트 Windows Enhanced Metafile 그래픽을 웹 및 디자인 소프트웨어에서 사용할 수 있는 깔끔하고 반응형인 SVG 벡터로 변환합니다.
DXF 도면을 CAD SVG 내보내기로 변환하면 복잡한 엔지니어링 벡터 데이터가 웹 브라우저 및 벡터 편집기용 경량 XML 그래픽으로 바뀝니다.
확장 가능한 벡터 그래픽을 도면 교환 형식으로 변환하면 웹용 시각적 벡터가 컴퓨터 지원 설계 소프트웨어에 필요한 정확한 수학적 좌표로 변환됩니다.
SVG 로고나 일러스트를 한 페이지짜리 PDF로 공유하십시오. 확대·축소 가능한 벡터 경로가 고정 해상도 이미지로 바뀌므로 확대해도 벡터 세부 정보를 복원할 수 없습니다.