SVG CONVERTER
履歴SVG→コード
← Back to Blog

SVG形式とは？特徴と使い方を徹底解説 - ベクター画像の基本から実践サンプルまで

SVG形式とは何かをわかりやすく解説。XMLベースのベクター画像形式の特徴、HTML/CSS/JavaScriptでの使い方、PNGとの違い、実践的なサンプルコードを紹介します。レスポンシブ対応のコツも学べます。

2 min read

SVG形式とは、Scalable Vector Graphicsの略称で、XMLベースの2次元ベクター画像形式を指します。ベクターグラフィックスの特性上、拡大縮小しても画質が劣化しないという大きな利点があり、現代のWebデザインにおいて不可欠な技術となっています。

SVG形式の基本概念と特徴

ベクター画像としてのSVG形式

SVG形式とはラスター画像（PNG、JPEGなど）とは根本的に異なるアプローチを採用しています。ピクセルの集合ではなく、数学的な座標とパスによって図形を定義するため、どんなに拡大しても滑らかな表示が保たれます。

主な特徴：

  • 解像度に依存しない高品質な表示
  • ファイルサイズが比較的小さい
  • CSSとJavaScriptでの制御が可能
  • テキストベースのため編集が容易
  • アクセシビリティに優れる

SVG形式の実践的な使い方

HTMLでのSVG形式の埋め込み

SVG形式をWebページに組み込む方法は複数ありますが、最も一般的な3つの方法を紹介します。

方法1：インラインSVG

<!DOCTYPE html>
<html>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>
</html>

方法2：imgタグでの参照

<img src="image.svg" alt="SVG画像の例" width="100" height="100">

方法3：objectタグでの埋め込み

<object data="image.svg" type="image/svg+xml" width="100" height="100">
  代替コンテンツ
</object>

CSSでのSVG形式のスタイリング

SVG形式の要素はCSSで詳細にスタイリングできます。

/* SVG要素のスタイリング */
svg {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

circle {
  fill: #ff6b6b;
  stroke: #4ecdc4;
  stroke-width: 2px;
  transition: fill 0.3s ease;
}

circle:hover {
  fill: #ff8e8e;
}

JavaScriptでのSVG形式の操作

SVG形式は動的な操作にも適しています。

// SVG要素の動的作成
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");

const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "blue");

svg.appendChild(rect);
document.body.appendChild(svg);

// インタラクティブな操作
rect.addEventListener("click", function() {
  this.setAttribute("fill", "red");
});

実践的なSVG形式のサンプル

アイコン作成の例

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

複雑な図形の作成

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <rect x="50" y="50" width="100" height="100" fill="url(#grad1)" />
  <polygon points="100,20 140,100 60,100" fill="blue" opacity="0.7"/>
</svg>

SVG形式 vs 他の画像形式

PNGとの比較

特徴SVG形式PNG形式
拡大縮小画質維持画質劣化
ファイルサイズ一般に小さい複雑な画像で大きい
アニメーション可能不可能
写真表現不向き適している

共通的な間違いと解決策

間違い例：

<!-- サイズ指定がないSVG -->
<svg>
  <circle cx="50" cy="50" r="40"/>
</svg>

正しい実装：

<!-- 明確なサイズ指定 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

よくある質問（FAQ）

SVG形式はどのような場面で使用すべきですか？

レスポンシブデザインが必要なWebサイト、アイコン、ロゴ、図表、データビジュアライゼーションなどに最適です。特に複数の画面サイズに対応する必要がある場合、SVG形式の採用を検討すべきです。

すべてのブラウザでSVG形式はサポートされていますか？

現代の主要ブラウザ（Chrome、Firefox、Safari、Edge）では完全にサポートされています。Internet Explorer 9以降でも基本的なサポートがありますが、より詳細な情報はMDN Web Docsで確認できます。

SVG形式のファイルを最適化する方法は？

SVGファイルはテキストエディタで編集可能ですが、専用の最適化ツールを使用することをお勧めします。SVGOのようなツールを使用すると、ファイルサイズを大幅に削減できます。

まとめ

SVG形式とは、現代のWeb開発において重要な役割を果たすベクター画像技術です。その拡張性の高さ、ファイルサイズの小ささ、プログラマブルな特性から、レスポンシブWebデザインの必須要素となっています。実際のプロジェクトでSVG形式を効果的に活用するためには、基本的な構文から高度なスタイリング技術まで、段階的に習得していくことが重要です。

より深く学びたい方はW3C SVG仕様書を参照することをお勧めします。