インタラクティブなSVGも実現！HTMLとJavaScriptでSVGファイルを使いこなす

2024-04-02

HTMLでSVGファイルを表示するには、<img>, <object>, <embed> の3つのタグが使用できます。それぞれのタグには異なる特徴があり、目的に応じて使い分ける必要があります。

比較表

タグ	特長	利点	欠点	使用例
`<img>`	最もシンプルで軽量	簡単な画像表示に最適	インタラクティブ機能やスクリプトが使えない	静的なアイコン、ロゴなど
`<object>`	高度な機能	インタラクティブなSVGや、他の形式への代替手段を提供	複雑なコードが必要	アニメーション、グラフなど
`<embed>`	`<object>` より軽量	古いブラウザでSVGを表示	非推奨で、一部のブラウザでは動作しない	古いブラウザでのみ必要

詳細解説

<img> タグ

画像としてSVGファイルを簡単に表示
軽量でシンプルなコード
インタラクティブ機能やスクリプトが使えない
古いブラウザで一部機能しない

例

<img src="image.svg" alt="My SVG image">

<object> タグ

インタラクティブなSVGや、他の形式への代替手段を提供
幅広い機能
複雑なコードが必要

<object data="image.svg" type="image/svg+xml">
  <img src="image.png" alt="My SVG image">
</object>

<embed> タグ

古いブラウザでSVGを表示
非推奨で、一部のブラウザでは動作しない

<embed src="image.svg" type="image/svg+xml">

静的な画像: <img> タグ
インタラクティブなSVG: <object> タグ
古いブラウザでのみ必要: <embed> タグ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG画像</title>
</head>
<body>
  <img src="image.svg" alt="My SVG image">
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インタラクティブなSVG</title>
</head>
<body>
  <object data="image.svg" type="image/svg+xml">
    <img src="image.png" alt="My SVG image">
  </object>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>古いブラウザ用SVG</title>
</head>
<body>
  <embed src="image.svg" type="image/svg+xml">
</body>
</html>

補足

上記のコードはあくまでサンプルです。必要に応じて変更してください。
SVGファイルの名前とパスは適宜変更してください。
<object> タグと <embed> タグは、IE 8 以前のブラウザではサポートされていない可能性があります。

SVGファイルを表示するその他の方法

JavaScriptを使ってSVGファイルを動的にロードしたり、操作したりすることができます。

const svg = document.createElement('object');
svg.setAttribute('data', 'image.svg');
svg.setAttribute('type', 'image/svg+xml');
document.body.appendChild(svg);

サーバーサイドでレンダリングする

サーバーサイドでSVGファイルをレンダリングし、PNGなどの画像形式に変換してブラウザに送信することができます。

SVG専用のライブラリを使う

Snap.svgなどのSVG専用のライブラリを使うと、より高度な操作が可能になります。