SVG（Scalable Vector Graphics）

XML ベースのベクター画像規格。HTML に直接埋め込めて、CSS / JS で操作できる。 アイコン / ロゴ / グラフ / アニメーションまで、Web で最も柔軟な「画像」。

SVG の特徴

• 解像度に依存しない（拡大しても劣化なし）
• テキストとしてdiff 可、Git 管理向き
• DOM の一部として扱える（CSS / JS で制御）
• 拡大コストが低い（ピクセルではなく数式）
• アクセシビリティ（テキストが本物の text）
• ファイルサイズが小さい（複雑でなければ）

SVG vs 他のフォーマット

要素数が1000 以下なら SVG が最も扱いやすい。それ以上は Canvas 推奨。

用途

• アイコン（Heroicons / Lucide / Tabler）
• ロゴ・ブランドアセット
• グラフ・チャート（D3 / Recharts / Visx）
• イラスト / 図解
• アニメーション（Lottie / GSAP / motion）
• パターン・装飾
• UI 細部（チェックマーク、ローダー、進捗）

最小サンプル

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80" fill="orange" rx="8" />
  <circle cx="100" cy="50" r="30" fill="white" />
  <text x="100" y="55" text-anchor="middle">Hello</text>
</svg>

ファイルとして / インラインとして

• 外部ファイル <img src="logo.svg"> — キャッシュされ、複数ページで共通
• インライン <svg>...</svg> — CSS / JS で操作可能
• 背景画像 background-image: url(logo.svg)
• data URL — 小さい SVG を CSS に直接埋込

このセクションの読み方

1. 構造と座標系 — viewBox / preserveAspectRatio
2. 基本図形 — rect / circle / line / polygon
3. path 完全解説 — M L H V C S Q T A Z
4. 塗り・線・グラデ・フィルタ
5. 座標変換 — translate / rotate / scale
6. テキスト — text / tspan / textPath
7. アニメーション — SMIL / CSS / JS
8. 最適化と注意点

主要なツール

• Figma — エクスポートで SVG を出力
• Illustrator — 設計用に最適
• Inkscape — 無料の SVG ネイティブ
• SVGOMG — オンライン最適化
• SVG-Edit — ブラウザで編集
• Iconify / Lucide / Heroicons / Tabler — アイコン集

2026 年時点のスナップショット

• 主要ブラウザがほぼフル対応（古い IE 系は気にしなくてよい）
• SVG 2 の機能が部分的に実装
• SMIL は非推奨気味、CSS / JS アニメーションが主流
• OS / ブラウザ標準の絵文字や記号はSVG ベースのフォントになりつつある
• Lottie + dotLottie が複雑モーションの定番に