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画像に置き換える方法が一番いいとは思います。
それはまた別の機会に解説しますね。