SVG非対応ブラウザで代替画像を表示する3つの方法

イラストやロゴなどをSVGで実装する場合、古いIE等のSVG非対応ブラウザのために代替画像を用意することがあるかと思います。SVG非対応ブラウザ用に代替画像を設置する方法を3つご紹介いたします。

object要素を使って代替画像を設置する方法

まずは最もシンプルなobject要素を使った方法です。object要素でSVG画像と代替画像を設置します。

<object data="svg-sample.svg" type="image/svg+xml" width="400" height="250">
 <img src="sample.png" alt="" width="400" height="250">
</object>

image要素を使って代替画像を設置する方法

続いて、svgタグの中にimage要素を入れて、代替画像を設置する方法です。

<svg width="400" height="250">
 <image xlink:href="svg-sample.svg" src="sample.png" width="400" height="250">
</svg>

こちらもシンプルですね。

foreignObject要素を使って代替画像を設置する方法

最後に紹介するのは、foreignObject要素を使った方法です。

<svg width="400" height="250">
 <path style="fill:#EBBA16;stroke:#424A60;stroke-width:6;stroke-miterlimit:10;" d="M39.071,25.713L10.071,45.713L 10.071,26.077L10.071,5.713Z" class="keuHcTyH_0"></path>
 <foreignObject display="none">
 <img src="sample.png" alt="">
 </foreignObject>
</svg>

SVG描画コードの下にforeignObject要素を追加して、代替画像を設置します。

あとがき

ほとんどのモダンブラウザではSVGがサポートされていますので、今後はSVGの実装案件は増えてくると思われます。

古いIEはサポートも切れていますし完全に無視することも多くなっているため、代替画像の用意自体が必要ないケースもあるかもしれませんが、いざという時のために覚えておくと良いですね。