Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

少し変なSVGのフォールバック方法

imgタグ等でSVGを使用すると、ベクター画像のため拡大しても粗くならなくていいですね?ですがSVGは下記のようにIE8に対応していないので、IE8用のフォールバック対策が必要です。


今回は、そのフォールバック方法を3つほど取り上げて紹介したいと思います。

  • 1.image要素を使ったフォールバック
  • 2.CSSハックを使ったフォールバック
  • 3.Object要素を使ったフォールバック

1.imageタグを使ったフォールバック

IE8がsvgタグを認識しないことを利用したフォールバックです。

<svg width="445" height="319">
	<image xlink:href="/themes/callisto@blog2015/sample/images/header_logo.svg" src="/themes/callisto@blog2015/sample/images/header_logo.png" width="445" height="319"/>
</svg>

下が実行結果になります。

CSSハックを使ったフォールバック

下のように\9をCSSのプロパティの末尾につけることで、IE8のみにスタイルを適応させることができます。

.logo{
    background: url(/themes/callisto@blog2015/sample/images/header_logo.svg) no-repeat;
    background: url(/themes/callisto@blog2015/sample/images/header_logo.png) no-repeat\9;
    max-width: 445px;
    padding-bottom:45%;
}
<div class="logo"></div>

下が実行結果になります。

3.Object要素を使ったフォールバック

object要素のタイプをSVGに指定して、IE8に認識させないフォールバック方法もあります。

<object type="image/svg+xml" data="/themes/callisto@blog2015/sample/images/header_logo.svg">
  <img src="/themes/callisto@blog2015/sample/images/header_logo.png">
</object>

下が実行結果になります。

まとめ

個人的には、これらのフォールバック方法の中では、変な要素を利用しない分、2番のやり方がスマートだと思います。
ただ、SVGに対応していないブラウザではsvg画像をJavaScriptでpng画像に置き換える方法が一番いいとは思います。
それはまた別の機会に解説しますね。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド