SVGフォーマットとは？2026年版完全テクニカルガイド

SVGとは本当は何なのか？

SVG（Scalable Vector Graphics）は単なる画像フォーマットではありません。数学的座標、幾何学的プリミティブ、スタイル宣言を使用して2次元グラフィックスを記述する完全なXMLボキャブラリーです。HTMLと同じ次元に存在します：テキストベース、人間が読める、DOM統合、CSSでスタイル設定可能。

W3CはSVGを「XMLで2次元グラフィックスを記述するための言語」と定義しています。XMLであるため、すべてのSVGはテキストエディタで開き、JavaScriptで操作し、スキーマに対して検証できる構造化ドキュメントです。他の一般的な画像フォーマットはこれを提供しません。

「SVGはウェブのネイティブ画像フォーマットです。ウェブ上に存在するだけでなく、ウェブそのものです。」— Chris Coyier

SVGの構造：XMLとviewBox

すべてのSVGはルート<svg>要素から始まります。その属性を理解することがフォーマットをマスターする鍵です。

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 100"
     width="400" height="200">
  <rect x="10" y="10" width="180" height="80" rx="8"
        fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
  <text x="100" y="58" text-anchor="middle"
        fill="#f8fafc" font-size="18">こんにちは、SVG！</text>
</svg>

• xmlns はSVG名前空間を宣言 — スタンドアロンの.svgファイルでは必須、HTML5にインラインで埋め込む場合はオプション
• viewBox="0 0 200 100" は内部座標系を定義：原点(0,0)、幅200単位、高さ100
• width/height はレンダリングサイズを設定；ブラウザはviewBoxをこのビューポートにマッピング

viewBoxは座標空間をピクセル寸法から切り離します。viewBox="0 0 24 24"のアイコンは16pxでも512pxでも同一にレンダリングされます — ブラウザが座標系をスケーリングするためです。これがSVGが無限にスケールする理由です。

SVGはY軸が下向き（CSSやCanvasと同じ）の座標系を使用し、原点は左上にあります。

歴史：W3C、ブラウザ戦争、そして現代の普及

• 1998年：W3CがSVGワーキンググループを設立、AdobeのPGMLとMicrosoftのVML提案を統合
• 2001年：SVG 1.0がW3C勧告に
• 2003年：SVG 1.1が仕様を洗練・モジュール化
• 2011年：SVG 1.1 第2版 — ほとんどのブラウザが完全に実装しているバージョン
• 2018年：SVG 2.0が勧告候補に到達、CSSとHTMLに整合

IEの物語

IE 8以下はSVGサポートがゼロでした。IE 9（2011年）は基本的なレンダリングを提供しましたが、ギャップがありました：SMILアニメーションなし、限定的なフィルタ、viewBoxの問題。真の転換点は、2022年にMicrosoftがIEをEdge（Chromium）に移行したときに訪れました。今日SVGは98.5%のグローバルブラウザサポートを持っています。

SVG要素リファレンス

インラインSVG vs img vs CSSバックグラウンド vs object

ホバー状態、アニメーション、JSインタラクションが必要な場合はインラインを選択。キャッシュしたい静的アセットには<img>を選択。CSSバックグラウンドは装飾のみに使用。<object>アプローチは2026年では最良の選択肢になることはほとんどありません。

アクセシビリティ：role、aria-label、title、desc

SVGは仕様にファーストクラスのアクセシビリティが組み込まれています：

<svg role="img" aria-labelledby="logoTitle logoDesc"
     viewBox="0 0 120 40">
  <title id="logoTitle">VectoSolveロゴ</title>
  <desc id="logoDesc">ブルーグラデーションの幾何学的VとSのモノグラム</desc>
  <path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>

• role="img" — 支援技術にこれが画像であることを伝える
• <title> — アクセシブルな名前（<img>のaltに相当）
• <desc> — 複雑なグラフィックスの詳細な説明
• aria-labelledby — <title>と<desc>要素にリンク
• aria-hidden="true" — 純粋に装飾的なSVGにスクリーンリーダーから隠すために使用

アニメーション：SMIL、CSS、JavaScript、Web Animations API

SMIL（SVGのネイティブアニメーション）

<circle cx="50" cy="50" r="20" fill="#ef4444">
  <animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>

CSSアニメーション

SVG要素に@keyframes、transition、transformを適用 — あなたがすでに知っているCSSと同じです。

JavaScriptライブラリ

GSAP、Anime.js、Snap.svgが複雑なパスモーフィングとシーケンスアニメーションのタイムラインベース制御を提供。

Web Animations API

JSのパワーとCSSのパフォーマンスを組み合わせた、モダンな標準ベースのアプローチ：

element.animate(
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 2000, iterations: Infinity }
);

パフォーマンス最適化

デザインツールからのSVGは肥大化しています — エディタメタデータ、冗長なグループ、過剰な小数精度。

主要テクニック：エディタメタデータの削除、座標精度を小数1〜2桁に削減、ネストされた<g>要素のフラット化、固定寸法の代わりにviewBoxを使用、GZIP/Brotliの有効化（SVGは例外的によく圧縮される）、VectoSolveのオプティマイザーでの自動化。

SVGを始めよう

VectoSolveは完全なSVGワークフローのためのAIツールを提供：

• ラスターをベクターに変換 — PNG/JPGをアップロード、クリーンで最適化されたSVGを取得
• ビジュアルで編集 — SVGエディタでパスと色を調整
• 最適化 — オプティマイザーでファイルを通して肥大化を除去

SVGはウェブのネイティブグラフィックス言語 — オープン、標準化、アクセシブル、アニメーション可能、パフォーマント。2026年、SVGの習熟はオプションではありません。基礎です。

参考資料

• MDN Web Docs: SVG — すべてのSVG要素、属性、APIの包括的なリファレンス
• W3C SVG 2仕様 — SVG構文、レンダリング、インタラクティビティを定義するW3C公式標準
• CSS-Tricks: Using SVG — ウェブでのSVGの埋め込み、スタイリング、最適化の実践ガイド
• web.dev Performance — 画像最適化とCore Web Vitalsに関するGoogleのリソース
• Smashing Magazine — SVGアクセシビリティ、アニメーション、ベストプラクティスに関する詳細記事