SVGとは何か、主要概念、ウェブ開発での使用方法

SVGとは？

SVGは、2001年にW3C勧告として導入されたXMLベースのベクターグラフィックス形式です。ラスター形式とは異なり、SVGは点、線、曲線、多角形などの幾何学的プリミティブを通じて画像を記述します。SVGファイルはプレーンテキストのXML文書であり、標準的なツールで読み取り、編集、圧縮できます。

SVGのアーキテクチャにはいくつかの主要な概念が含まれています。viewBoxは、実際の要素の寸法から独立した仮想座標系を定義します。たとえば、viewBox="0 0 100 100"は100×100の正方形グリッドを作成し、その内部ですべての座標が固定されます。コンテナの幅や高さが変わると、コンテンツは比例して拡大縮小されます。

W3C SVG 2 Specificationによると、SVGの最新バージョンはグラデーション、マスク、フィルター、任意の位置へのテキスト配置、JavaScriptによるインタラクティビティ、CSSおよびSMILによるアニメーションをサポートしています。SVGは完全なHTML要素としてDOMに統合されており、すべてのグラフィックプリミティブをプログラムで制御できます。

モバイル開発では、SVGはiOSでUIGraphicsImageRendererを介して、AndroidでVectorDrawableを介して使用されています。どちらの形式もSVGのような記述をGPU上のハードウェアアクセラレーションラスターに変換します。

SVG形式の歴史と発展

SVG 1.0は2001年に、SVG 1.1は2003年にW3C勧告となり、SVG 2.0は2012年から開発が進められています。SVG 2の主な革新点は、CSSとのより深い統合、コンポジットとブレンドモードのサポート、および名前空間プレフィックスなしでHTML内でSVGを使用できることです。

SVG 2はまだ勧告の地位に達していませんが、最新ブラウザはすでにその機能の大部分をサポートしています。Chrome、Safari、Firefox、EdgeはSVG 1.1をほぼ完全にサポートし、SVG 2のかなりの部分もサポートしています。

SVGの基本要素

SVGは、2次元グラフィックスを記述するための一連の要素を提供します。各要素には、位置、サイズ、視覚的な外観を定義する属性があります。属性はxml属性として設定することも、CSSプロパティを介して設定することもできます。

• <rect>—属性x、y、width、height、rx、ry（角の丸み）を持つ長方形。
• <circle>—属性cx、cy（中心）とr（半径）を持つ円。
• <ellipse>—属性cx、cy、rx、ryを持つ楕円。
• <line>—属性x1、y1、x2、y2を持つ線分。
• <polyline>—属性points（座標リスト）を持つ折れ線。
• <polygon>—属性pointsを持つ閉じた多角形。
• <path>—属性d（コマンド：M、L、C、Q、A、Z）を持つ任意のパス。
• <text>—属性x、y、font-size、font-familyを持つテキスト要素。

path要素は、最も強力で柔軟なSVG要素です。属性dには、M（moveTo）、L（lineTo）、C（3次ベジエ曲線）、Q（2次ベジエ曲線）、A（円弧）、Z（パスを閉じる）の一連のコマンドが含まれます。各コマンドには絶対形式と相対形式（大文字または小文字）があります。

SVGは<g>による要素のグループ化もサポートしています。グループは視覚属性（fill、stroke、transform）をすべての子要素に継承します。これにより、図形のセット全体に単一のスタイルを適用し、単一のtransformでそれらの位置を制御できます。

SVG vs ラスターグラフィックス：形式比較

SVGとラスター形式（JPEG、PNG、WebP）の主な違いは、情報の保存方法です。ラスターは固定サイズのグリッドに各ピクセルの色を保存します。SVGは図形をレンダリングするための数学的コマンドを保存します。この違いが、両形式のすべての長所と短所を決定します。

HTTP Archive、2025によると、68%のウェブサイトがアイコンに、34%がイラストに、22%がロゴにSVGを使用しています。平均的なSVGアイコンのサイズは0.5–2KBですが、同等の品質のラスターアイコンはPNG形式で5–20KBです。

SVGは写真や複雑なラスター画像には適していません。XML記述のサイズが同等のJPEGを超えてしまいます。SVGの推奨用途：アイコン、ロゴ、イラスト、図、グラフ、レスポンシブデザインのインターフェース要素。

SVGを選ぶべき場合とラスター形式を選ぶべき場合

SVGは、Retinaディスプレイやブラウザの任意のズームレベルで鮮明に表示する必要があるインターフェース要素に最適な選択肢です。ラスターは、写真、複雑なテクスチャ、数百万色の画像に適しており、ベクター記述が過度に複雑になる場合に使用します。

ハイブリッドアプローチ—インターフェース要素にSVG、写真コンテンツにWebP/AVIFを組み合わせる—ことで、品質とページ読み込みパフォーマンスの最適なバランスが得られます。

インラインSVGとCSSスタイリング

インラインSVGとは、<img>やbackground-imageによる別ファイルとしてではなく、SVGマークアップをHTML文書に直接埋め込むことです。インラインSVGの利点は、SVG要素がDOMの一部になり、CSSでスタイリング、JavaScriptで制御、追加のサーバーリクエストなしでアニメーション化できることです。

<img src="icon.svg">のようにSVGがシャドウDOMに隔離されるのとは異なり、インラインSVGは親ドキュメントから色とフォントを継承します。これにより、たとえば、各状態の別ファイルを読み込むことなく、CSS疑似クラス:hoverを介してホバー時にアイコンの色を変更することができます。

CSS-Tricksによると、インラインSVGは最新のウェブアプリケーションでアイコンを使用する推奨方法です。CSSプロパティのfill、stroke、stroke-widthはSVG要素に直接適用されます。CSSカスタマイズのためには、元のSVGでfillとstrokeがインライン属性として設定されていないことが重要です。設定されている場合、CSSはそれらを上書きできません。

• 利点：CSSによるスタイリング、JSによる制御、HTTPリクエスト不要、viewBoxによる適応性。
• 欠点：HTMLページサイズの増加、HTMLからの個別キャッシュ不可。
• 代替：SVGスプライト—複数のSVGを1つのファイルに結合し、<use href="#id">を使用。

SVGスプライトはキャッシュ問題を解決します。すべてのアイコンを1つのファイルに集め、ブラウザが一度読み込み、個々のアイコンはスプライト内の目的の要素のidを指定して<use>でアクセスします。

SVGアニメーション：CSSとSMIL

CSSによるSVGアニメーションは、ブラウザでベクターグラフィックスをアニメーション化する最も一般的で効率的な方法です。transform、opacity、fillなどのCSSプロパティは、HTML要素と同様にSVG要素にも適用されます。任意のパスに沿ったアニメーションには、CSSプロパティoffset-pathが使用されます。

SMIL（Synchronized Multimedia Integration Language）は、SVGに組み込まれたアニメーションメカニズムで、CSSから独立しています。<animate>、<animateTransform>、<animateMotion>要素を使用すると、JavaScriptやCSSなしで任意のSVG属性をアニメーション化できます。SMILアニメーションはブラウザのフレームレートと同期することが保証されています。

MDN Web Docsによると、SMILはすべての最新ブラウザでサポートされていますが、CSSアニメーションの方がより予測可能で効率的であると考えられています。SMILの主な使用例は、<path>要素のd（path）など、CSSではアクセスできない属性のアニメーション化です。

JavaScript + requestAnimationFrameは、SVGアニメーションを最大限に制御できます。ウェブ開発者は、複雑なアニメーションシーケンスにGSAPやAnime.jsなどのライブラリを使用し、純粋なCSSでは実装が難しいタイムラインとイージング関数を実現しています。

コード例：SVGグラフィックスの作成

最初の例は、基本的なSVG要素を使用したシンプルな家のアイコンです。すべての図形はrectとpolylineです。

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

2番目の例は、CSSによる回転ローダーのアニメーションを示しています。破線の輪郭を作成するために、stroke-dasharray属性を持つ<circle>を使用しています。

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

3番目の例は、GSAPライブラリを使用してパスをアニメーション化し、滑らかな輪郭描画を実現しています。GSAPはstroke-dashoffset属性を操作して、線が現れる効果を生み出します。

// GSAPでパスを描画
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});