.svg
要注意Scalable Vector Graphics
XML で記述されるベクター画像形式。ロゴやアイコン、チャートをどんなサイズでも劣化なく表示でき、CSS / JS で制御可能。
MIME タイプ
- image/svg+xml
カテゴリ
image
何で開けるか
- ブラウザ
- Illustrator
- Figma
- Inkscape
- Sketch
OS 別の開き方
Windows
- ブラウザで即時表示。編集は Inkscape や Figma
macOS
- Preview、または Sketch / Figma / Illustrator
Linux
- Inkscape、ブラウザ
iOS
- Safari、ファイルアプリ
Android
- Chrome、画像ビューア
危険性と注意点
- SVG は XML 内に
<script>を含められるため、ユーザーがアップロードした SVG をそのまま表示すると XSS の温床になります。サーバー側で sanitize してから配信してください
よくある間違い
- Illustrator で書き出した SVG に不要な編集情報や巨大な base64 画像が残り、肥大化しがち。SVGOMG で不要要素を削ってから配布
- CSS で色変更できるのはインライン化された SVG だけ。
<img>で読み込んだ SVG は外部から色変更できません
FAQ
- SVG のファイルサイズを減らすには？
- SVGOMG を使って不要なメタデータや装飾属性を削除できます。手元で最適化するなら
svgoの CLI を CI に組み込むのが定番です。