HTML, CSS でウェブページに SVG を表示させる 4 つの方法

PNG や JPEG などのビットマップ画像と異なり、拡大しても画質が劣化しないため、近年使用されることが多い SVG 画像。色の変更やアニメーションも可能なため、上手く活用することでサイトの表現の幅を広げることもできます。ただし、埋め込み方法によって出来ることと出来ないことがあるため、用途に応じた適切な方法を選ぶことが重要です。

この記事では、ウェブサイトに SVG 画像を表示させる方法をご紹介します。

LINE着せかえ「回るお寿司」販売中！

<img> タグを使用して SVG を表示

<img src="loupe.svg" width="128" height="128">

PNG や JPEG などの画像ファイルと同じように、<img>タグを使用する方法です。最も手軽に表示させることができますが、CSS や JavaScript から SVG 内の要素にアクセスできないため、任意のタイミングで色を変えたりアニメーションを行いたい場合には適していません（SVG 内にスタイルを直接記述することで、自動再生で色を変えたりアニメーションさせることは可能です）。

こんなケースで使うのがオススメ

  • 任意のタイミングで色を変えたり、アニメーションをさせる必要がない。
  • PNG や JPEG と同じように、ただ単に画像として貼り付けたい。

CSS の background を使用して SVG を表示

<i class="svg-loupe"></i>
.svg-loupe {
  display: inline-block;
  width: 128px;
  height: 128px;
  background: url('loupe.svg') center / 100% no-repeat;
}

こちらも、PNG や JPEG でよく使用する方法です。<img>タグを使用する方法と同じく、CSS や JavaScript から SVG 内の要素にアクセスすることはできません。

こんなケースで使うのがオススメ

  • 任意のタイミングで色を変えたり、アニメーションをさせる必要がない。
  • ただ単に背景画像として表示させたい。

<svg> タグをインラインで直接 HTMLに記述して表示

<svg width="128" height="128" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="m25.212 4.3256a14.769 14.769 0 0 0-20.886 0 14.769 14.769 0 0 0-2.69e-4 20.886 14.769 14.769 0 0 0 19.196 1.4428l5.3454 5.3454 3.133-3.133-5.3405-5.3405a14.769 14.769 0 0 0-1.4476-19.201zm-3.133 3.133a10.338 10.338 0 0 1 2.75e-4 14.62 10.338 10.338 0 0 1-14.621 0 10.338 10.338 0 0 1 2.7e-4 -14.62 10.338 10.338 0 0 1 14.62 0z" fill="#5ea9e3" />
</svg>

HTML 内にインラインで<svg>タグを直接記述する方法で、最も柔軟に SVG を扱うことができる埋め込み方法です。

CSS や JavaScript から SVG の要素にアクセスすることができるので、ホバー時やクリック時など、任意のタイミングで色の変更やアニメーションを行う場合に適しています。また、それぞれのパスに<a>タグでリンクを設定することもできるので、簡単にクリッカブルマップを作成することもできます。

ただし、巨大な SVG を埋め込むとソースの可読性が下がったり、ページの転送量が増える（外部ファイルとしてキャッシュされないため）点に注意が必要です。そのため、埋め込む SVG はなるべく最適化することをおすすめします。

また、表示するサイズによっては SVG の端っこが切れて表示されてしまう現象が発生することがあります（対処法についてはこちらの記事で書いています）。

それでも、最も柔軟に SVG を扱える方法であるため、使用する場面は多いです。

こんなケースで使うのがオススメ

  • 任意のタイミングで色を変えたり、アニメーションをさせたい。
  • クリッカブルマップを作りたい。
  • とにかく柔軟に SVG を扱いたい。

<object> タグを使用して SVG を表示

<object type="image/svg+xml" data="https://yutsuzo.com/wp-content/uploads/2025/02/loupe.svg" width="128" height="128"></object>

<object>タグを使用して SVG を読み込む方法です。SVG ファイル内に JavaScript を直接記述して実行することも可能なので、色の変更やアニメーションを行う場合に適しています。<a>タグでリンクを設定することもできるので、クリッカブルマップなどの作成も可能です。

ただし、<object>タグを使用した場合、<iframe>タグでコンテンツを埋めた時と同じように別ドキュメントの扱いになるので、いくつかの注意が必要です。

  • リンクを貼る場合、SVG ファイル内の<a>タグにはtarget="_parent"の指定が必要。
  • ページ内の JavaScript から操作する場合は、<object>のcontentDocumentを取得する必要がある。
  • ページ内の JavaScript から操作するためには、同じドメインの SVG ファイルである必要がある。

こんなケースで使うのがオススメ

  • 任意のタイミングで色を変えたり、アニメーションをさせたい。
  • クリッカブルマップを作りたい。
  • HTML と SVG の処理は切り分けたい。

終わりに

SVGの表示方法には、<img>タグ、CSS のbackground-image、<svg>タグ、<object> タグなど様々な方法があり、それぞれ特徴があります。用途に応じて適切な方法を選ぶことで、デザインの自由度も向上し、効率的に画像を扱うことができます。その他にも、SVG についてはここには書ききれなかったことが山ほどあるので、そのうち記事にできたらと思います。

タグ: