SVG（Scalable Vector Graphics）
SVGは、XMLベースのベクター画像フォーマットで、品質を損なうことなく任意の解像度に拡大縮小できます。ロゴ、アイコン、イラスト、Webのインタラクティブグラフィックに最適です。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年に最初の勧告としてリリースされました。SVG 1.1は2003年に広く採用された標準となり、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, …