{ freetool24 }
Image Tools

開発者向けSVGガイド：あらゆる環境で機能するスケーラブルグラフィックス

SVGの仕組み、Webに向けたSVGファイルの最適化方法、インライン利用と外部ファイル利用のパターン、CSSとJavaScriptを使ったSVGのアニメーションと操作方法を解説します。

7分で読めます

カラフルなベクターイラストが表示された画面

SVG（Scalable Vector Graphics）は、ブラウザがネイティブに構造化・スタイル適用・スクリプト操作可能なXMLとして理解できる唯一の画像フォーマットです。SVGで作成したロゴは、1×モニター、4Kディスプレイ、印刷用ビルボードのどれでも、同じファイルからくっきりと描画されます。SVGを理解することで、フロントエンド開発者としての能力が大きく向上します。

SVGが他と異なる点

ラスター形式（JPEG、PNG、WebP）は画像をピクセルのグリッドとして保存します。拡大するとぼやけてしまいます。一方SVGは、図形を数学的な記述として保存します：

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

これは「Hello」というテキストが入った青い円を描画します。どんなサイズでも完璧にシャープです。

SVGを使うべき場面：

  • ロゴやアイコン（あらゆるサイズでシャープさを保つ必要がある場合）
  • イラストや図解
  • チャートやデータビジュアライゼーション（D3.jsはSVGを出力する）
  • アニメーションやインタラクティブなグラフィックス
  • UIアイコン（アイコンフォントより遥かに優れている）

SVGを使うべきでない場面：

  • 写真や複雑なフォトリアリスティック画像（JPEG/WebPを使用）
  • スクリーンショット（PNGを使用）
  • SVGのノード数が数千に及ぶ場合（Canvasより遅くなる）

SVGの主要な要素

図形

<!-- 長方形 -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- 円 -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- 楕円 -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- 直線 -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- 多角形 -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- ポリライン（開いた図形） -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

パス — 汎用的な図形

<path> 要素は、移動・直線・曲線・弧のコマンドからなるミニ言語を使って、あらゆる図形を表現できます：

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

パスコマンド：

  • M x,y — 移動（ペンを上げる）
  • L x,y — 直線
  • H x — 水平線
  • V y — 垂直線
  • Q cx,cy x,y — 二次ベジェ曲線
  • C cx1,cy1 cx2,cy2 x,y — 三次ベジェ曲線
  • A rx,ry rot large-arc sweep x,y — 弧
  • Z — パスを閉じる

パスを手書きすることはほとんどありません。デザインツールがエクスポートしてくれます。ただし、読み方を知っておくとデバッグや最適化に役立ちます。

viewBox：レスポンシブSVG

viewBox 属性はレスポンシブSVGの鍵です：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 200×100 の座標空間内に描画されるコンテンツ -->
</svg>

要素に width/height を指定しなければ、SVGはレスポンシブ画像のようにコンテナを満たします。CSSで width: 100% を設定するだけで、完璧にスケールします。

.logo svg {
  width: 100%;
  height: auto;
}

Web上でSVGを使う3つの方法

1. 外部ファイル（<img>）

<img src="logo.svg" alt="Company logo" width="200" height="80">

✅ シンプル、キャッシュされる、あらゆる環境で動作
❌ CSSでスタイルを適用できない、スクリプト操作不可

2. CSSバックグラウンド

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ 装飾的なアイコンに適している
❌ SVG内部のCSSスタイリング不可、アクセシビリティなし

3. インラインSVG（最も強力）

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  次へ
</button>

✅ CSSを完全に制御可能、スクリプト操作可能、currentColor でテキストカラーを継承
❌ キャッシュされない、HTMLのサイズが増加

UIコンポーネントのアイコンには、インラインSVG が最善の選択です。スプライトシート（<symbol> 要素と <use> 参照を持つ単一の <svg>）を使えば、スタイル適用可能な状態でキャッシュも利用できます。

CSSによるSVGのスタイリング

インラインSVGは、通常のHTML要素と同様にCSSに応答します：

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* currentColor を制御 */
}

.icon:hover {
  color: #1d4ed8;
}

SVG内では、ハードコードされた色の代わりに currentColor を使用します：

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

これにより、アイコンの色はCSSで完全にコントロールされます。ダークモード、ホバー状態、テーマ変更もそのまま機能します。

SVGへのCSSアニメーション

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray と stroke-dashoffset はSVGの最も強力なアニメーションプロパティです。パスが自分自身を描いていくように見える「描画アニメーション」を実現できます。

SVGファイルの最適化

デザインツールは不要なメタデータ、コメント、エディタIDを含んだSVGをエクスポートします。典型的なエクスポートSVGは15 KBほどですが、最適化すると3 KBになる場合もあります。

削除すべき内容：

  • <?xml version="1.0"?> 宣言（インラインでは不要）
  • xmlns:xlink、xmlns:dc、Adobe/Inkscapeのメタデータ名前空間
  • エディタのみが使用する id 属性
  • コメントと余分な空白
  • 冗長なグループ要素 <g>
  • デフォルトの属性値（fill="black"、opacity="1"）

SVGOなどのツールがこれを自動化してくれます。SVGをサポートしないプラットフォーム向けにラスター版が必要な場合は、SVG to PNG コンバーターでPNGに変換できます。

アクセシビリティ

意味のあるコンテンツとして使用するSVGには、アクセシブルな説明が必要です：

<svg role="img" aria-labelledby="title desc">
  <title id="title">売上チャート</title>
  <desc id="desc">2026年1月の$10kから6月の$45kへと月次売上が成長していることを示す棒グラフ</desc>
  <!-- チャートのコンテンツ -->
</svg>

装飾的なSVG（ラベル付きボタンの横にあるアイコンなど）はスクリーンリーダーから隠すべきです：

<svg aria-hidden="true" focusable="false">...</svg>

クイックリファレンス：よく使うSVG属性

属性 内容
viewBox="x y w h" 座標系を定義する
fill 図形の塗りつぶし色（none、hex、currentColor）
stroke 輪郭の色
stroke-width 輪郭の太さ
stroke-linecap 線端のスタイル：butt、round、square
stroke-linejoin 角のスタイル：miter、round、bevel
opacity 要素の透明度（0〜1）
transform translate()、rotate()、scale()、skew()
clip-path コンテンツを図形でマスクする
filter SVGフィルターを適用する（ぼかし、ドロップシャドウなど）

SVGはWebで最も活用されていないツールの一つです。座標系とスタイリングモデルを理解すれば、あらゆるサイズで完璧に表示され、ユーザーの操作に動的に反応するアイコン、イラスト、チャート、アニメーションを構築できます。

すべての記事に戻るツールを閲覧