image/svg+xml — Web上のスケーラブルベクターグラフィックス
SVGファイルのimage/svg+xml MIMEタイプ、インラインSVG、セキュリティ考慮事項、ラスター形式よりSVGを選ぶべきタイミングを学びます。
Image Types
詳細な説明
image/svg+xml
SVG（Scalable Vector Graphics）はXMLベースのベクター画像フォーマットです。ラスター形式（JPEG、PNG）とは異なり、SVG画像は数学的なパスと形状で定義されるため、あらゆる解像度で完璧にスケーリングします。
なぜSVGなのか？
- 無限のスケーラビリティ — どの画面密度でもシャープ
- アイコンやイラストに小さなファイルサイズ
- CSSとJS — SVG要素はスタイルやアニメーションが可能
- アクセシビリティ — SVG内のテキストは選択・検索可能
セキュリティ上の懸念
SVGファイルは<script>タグやイベントハンドラー経由でJavaScriptを埋め込めます。ユーザーアップロードSVGを受け入れる際はサニタイズが必要です。
SVG vs ラスターの使い分け
| コンテンツ | 最適なフォーマット |
|---|---|
| アイコン、ロゴ | SVG |
| UIイラスト | SVG |
| 写真 | JPEG / WebP / AVIF |
| スクリーンショット | PNG |
ユースケース
ロゴ、アイコン、チャート、あらゆる解像度でクリアに見える必要のあるイラストにimage/svg+xmlを使用します。単一ファイルですべての画面密度に対応できるため、デザインシステムやアイコンライブラリに最適です。