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

SVGをHTMLに埋め込む方法｜基礎から実践まで完全ガイド

SVGをHTMLに埋め込む5つの方法をコード例とともに詳しく解説。imgタグ、object、inline SVGなどの使い分け、レスポンシブ対応、アクセシビリティ対策まで、SVG html実装のベストプラクティスを紹介します。

2 min read

はじめに

SVG（Scalable Vector Graphics）は現代のウェブ開発において不可欠な技術です。ベクターグラフィックスのため拡大縮小しても画質が劣化せず、Retinaディスプレイにも最適なSVGをHTMLで効果的に活用する方法を徹底解説します。SVG htmlの組み合わせは、レスポンシブで美しいウェブサイト構築の鍵となります。

SVGの基礎知識

SVGはXMLベースのベクター画像形式で、1999年にW3Cによって開発されました。従来のラスター画像（JPEG、PNGなど）とは異なり、数値データで図形を定義するため、どんなサイズでも鮮明に表示できます。

SVGの主な特徴：

  • 解像度に依存しない高品質な表示
  • CSSとJavaScriptでの制御が可能
  • ファイルサイズが小さい場合が多い
  • アクセシビリティに優れる

HTMLでのSVG埋め込み5つの方法

1. imgタグを使用する方法

最もシンプルなSVG htmlの埋め込み方法です。

<img src="image.svg" alt="会社のロゴ" width="200" height="100">

メリット：

  • 実装が簡単
  • キャッシュ可能
  • CSSフィルター適用可能

デメリット：

  • SVG内部のスタイルやスクリプトが無効
  • アニメーション制限

2. objectタグを使用する方法

より高度な制御が可能なSVG html埋め込み手法です。

<object type="image/svg+xml" data="image.svg" width="200" height="100">
  <img src="fallback.png" alt="フォールバック画像">
</object>

3. inline SVG（直接埋め込み）

最大の柔軟性を提供するSVG html実装方法です。

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <text x="50" y="60" text-anchor="middle" fill="black">SVG</text>
</svg>

4. CSS background-imageとして使用

.logo {
  background-image: url('logo.svg');
  width: 200px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
}

5. iframeタグを使用する方法

<iframe src="image.svg" width="200" height="100" title="SVG画像"></iframe>

実践的なSVG htmlコード例

レスポンシブSVGの実装

<div class="svg-container">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <rect x="10" y="10" width="80" height="80" fill="#4CAF50" />
    <circle cx="50" cy="50" r="30" fill="#FFC107" />
  </svg>
</div>

<style>
.svg-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.svg-container svg {
  width: 100%;
  height: auto;
}
</style>

インタラクティブなSVG例

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect id="interactiveRect" x="50" y="50" width="100" height="100" 
        fill="#2196F3" stroke="#0D47A1" stroke-width="2" />
</svg>

<script>
document.getElementById('interactiveRect').addEventListener('click', function() {
  this.style.fill = this.style.fill === '#2196F3' ? '#FF5722' : '#2196F3';
});
</script>

方法別比較とベストプラクティス

各手法の特徴比較

方法スタイル制御スクリプト制御キャッシュアクセシビリティ
imgタグ△×○○
objectタグ○○○○
inline SVG◎◎×◎
CSS背景△×○△

よくある間違いと解決策

問題1：SVGが表示されない

<!-- 間違い -->
<img src="image.SVG" alt="画像">

<!-- 正しい -->
<img src="image.svg" alt="画像">

問題2：サイズ制御の失敗

<!-- 間違い -->
<svg width="100px" height="100px">

<!-- 正しい -->
<svg width="100" height="100" viewBox="0 0 100 100">

アクセシビリティ対策

適切なSVG html実装はアクセシビリティ向上に貢献します。

<svg role="img" aria-labelledby="title desc">
  <title id="title">会社のロゴマーク</title>
  <desc id="desc">青い円の中に白い鳥が描かれたロゴ</desc>
  <circle cx="50" cy="50" r="40" fill="blue"/>
  <!-- 図形の定義 -->
</svg>

パフォーマンス最適化

SVGファイルの最適化にはSVGOなどのツールが効果的です。不要なメタデータの削除、パスの最適化によりファイルサイズを大幅に削減できます。

よくある質問（FAQ）

Q: SVGとPNG、どちらを使うべきですか？

A: ロゴ、アイコン、図形などのシンプルなグラフィックにはSVGが、写真や複雑な画像にはPNGが適しています。SVGは拡大縮小しても画質が維持される点が大きな利点です。

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

A: 現代の主要ブラウザ（Chrome、Firefox、Safari、Edge）はすべてSVGを完全サポートしています。Can I useで詳細な互換性情報を確認できます。

Q: SVGファイルを最適化する方法は？

A: SVGOMGやSVGOなどのオンラインツールを使用して、不要なメタデータを削除し、ファイルサイズを削減できます。コマンドラインツールを使用すれば、ビルドプロセスに組み込むことも可能です。

まとめ

SVG htmlの組み合わせは、現代のウェブ開発において強力なツールです。各埋め込み方法には特徴があり、プロジェクトの要件に応じて最適な手法を選択することが重要です。inline SVGは最大の柔軟性を提供しますが、キャッシュの観点ではimgタグやobjectタグが優れています。アクセシビリティとパフォーマンスを考慮した適切なSVG html実装により、ユーザー体験の向上とメンテナンス性の高いコードベースを実現できます。