SVG (Scalable Vector Graphics)
SVG는 XML 기반의 벡터 이미지 형식으로, 품질 저하 없이 모든 해상도로 확대·축소할 수 있습니다. 웹에서 로고, 아이콘, 일러스트레이션, 인터랙티브 그래픽에 이상적입니다. SVG 파일은 CSS로 스타일링하고 JavaScript로 애니메이션을 적용할 수 있으며, 검색과 접근성도 완벽히 지원합니다.
MIME 타입
image/svg+xml
유형
텍스트
압축
무손실
장점
- + Infinite scalability without quality loss
- + Tiny file sizes for simple graphics
- + Styleable with CSS and scriptable with JS
- + Accessible and SEO-friendly (text is selectable)
단점
- − Not suitable for photographs or complex raster images
- − Complex SVGs can be large and slow to render
- − Security concerns when accepting user-uploaded SVGs
.SVG 사용 시점
로고, 아이콘, 일러스트레이션, 차트, 그리고 모든 해상도에서 완벽하게 확대·축소되거나 CSS로 스타일링해야 하는 그래픽에 SVG를 사용하세요.
기술 세부사항
SVG는 기하학적 도형, 경로, 텍스트를 설명하는 XML 텍스트로 이미지를 저장합니다. 필터, 그라데이션, 클리핑 패스, 마스크, 임베디드 래스터 이미지를 지원합니다.
역사
SVG는 W3C에서 개발하여 2001년 처음 권고안으로 발표되었습니다. 2003년 SVG 1.1이 널리 채택된 표준이 되었으며, 현재 SVG 2가 개발 중입니다.
.SVG에서 변환
.SVG로 변환
관련 포맷
관련 용어
Learn More
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility …
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …
Image Format Guide: JPEG vs PNG vs WebP vs AVIF
Choosing the right image format affects file size, quality, and browser compatibility. This comparison covers the strengths of JPEG, PNG, …
QR Code Generation: Best Practices for Print and Digital
QR codes bridge physical and digital experiences, but poorly generated codes fail to scan. This guide covers sizing, error correction, …
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …
How to Convert Images Between Formats
A practical guide to converting between image formats like JPEG, PNG, WebP, SVG, and HEIC. Learn which conversions are lossless, …