[SVG] IE8 などの SVG 非対応ブラウザで代替画像を表示する方法いろいろまとめ
SVG 画像を Web 制作で使用する場合に、IE8 などの SVG 非対応ブラウザへは代替画像を表示することで対応することが多いのではないかと思います。調べてみると代替画像を表示する方法も色々あるようなのでまとめてみました。
object タグを使用して表示する
object タグを使って SVG ファイルを読み込み、SVG ファイルが読み込まれなかった場合は、代替の img タグで指定された画像を表示します。
<object data="svg_image.svg" type="image/svg+xml" width="500" height="300"> <img src="svg_image.png" alt="svg_image" width="500" height="300" /> </object>
代替画像の表示をする代表的な方法のようですが、何故か私の環境では IE8 以下で代替画像の表示ができませんでした。それはまた別で原因を検証してみようと思います…。
foreignObject 要素を使用して表示する
インラインで SVG を埋め込んだ時にも使用できる方法です。svg タグ内に置かれた foreignObject 要素内に代替の img タグを記入します。SVG に非対応のブラウザでは SVG に関するタグは無視されるため、img タグが表示されます。
<svg width="500" height="300">
〜svg描写〜
<foreignObject display="none">
<img src="svg_image.png" alt="svg_image" />
</foreignObject>
</svg>
svg タグ内に image 要素で表示する
svg タグ内で SVG を image 要素で読み込み、src 属性で代替の画像を読み込むという方法です。対応ブラウザでは xlink:href の画像を読みますが、非対応ブラウザでは SVG 関係のタグは無視され src 属性の画像を読み込みます。ただし、IE9/10/11 では SVG と 代替画像の両方の画像を読み込んでしまうようです…。
<svg width="680" height="220"> <image xlink:href="svg_image.svg" src="svg_image.png" width="680" height="220" /> </svg>
IE8 ではどのようになってるのか見てみたところ、svg タグは無視され、image 要素 が img として読まれているようでした。
Modernizr のクラス表示を使って代替画像を表示する
ブラウザの機能サポート状況を判定するライブラリ Modernizr を使うと、SVG に対応していないブラウザの場合は、以下のように html タグへ “no-svg” というクラスが追加されます。
これを利用し、no-svg クラスが付いていた場合の表示を CSS で指定しておきます。背景画像として代替画像を表示する場合や、背景画像に SVG を使っていた場合に簡単に表示を変えることができます。
div {
background: url(images/svg_image.svg) no-repeat ;
}
/*svg非対応だった場合の指定*/
.no-svg div {
background: url(images/svg_image.png) no-repeat;
}
Modernizr の Modernizrオブジェクトで SVG 対応状況を判断し代替画像を表示する
前項と同じライブラリ Modernizr では、機能がサポートされているかどうかがプロパティにより判定できるようになっています。SVG の場合は Modernizr.svg というプロパティで判定できるので、それを利用し img タグで読み込んだ SVG 画像を JavaScript で差し替えることができます。
if (Modernizr.svg){
〜SVG 対応ブラウザ時の処理〜
} else {
〜SVG 非対応ブラウザ時の処理〜
}
jQuery を使って一括で代替画像へ入れ替える
Modernizr と jQuery を合わせて使えば簡単に img タグで読み込んだ SVG 画像を代替画像へ入れ替えることが可能です。
以下の jQuery コードで、SVG 非対応ブラウザで表示された場合に src 属性の .svg の拡張子を一括で .png へ変更してくれます。SVG ファイルと同じ名前の png 画像を用意すれば代替画像表示ができます。
if (!Modernizr.svg) {
$("img[src$='.svg']").each(function(){
$(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
});
}
Modernizr は自分で判定する項目（svgのみやその他のCSS3の機能など）を選ぶことができるので、機能を絞れば容量も少なくてすみますし、スクリプトを使ってよい状況なら Modernizr を利用するのが一番簡単な方法かなと思いました。
No Comments & Tracbacks