SVGのフォールバック画像を用意したときのブラウザのHTTPアクセス状況
サイトでSVG画像を使う場合、IE 8以下やAndroid 2.3以下の標準ブラウザが対応していないため、フォールバックでPNG画像などを用意するケースがあるかと思います。
次のようにobject要素のフォールバック機構を使うと、SVG対応ブラウザはSVG画像が、そうでない場合はPNG画像が、さらに画像が表示されない環境ではテキストが表示されるはずです。
<object data="figure1.svg" type="image/svg+xml">
<img src="figure1.png" alt="代替テキスト" />
</object>また、object要素を入れ子にすることもできます。
<object data="figure2.svg" type="image/svg+xml">
<object data="figure2.png" type="image/png">
<p>代替テキスト</p>
</object>
</object>これらのマークアップをした時、各ブラウザはそれぞれの画像にどうアクセスするのか調べてみました。計測は先のようなHTMLページにブラウザでアクセスし、サーバーのアクセスログを監視する方法で行いました。
| ブラウザ | フォールバック画像がimg要素 |
フォールバック画像がobject要素 |
|---|---|---|
| Firefox 20 | PNG→SVGの順にGETリクエスト | img要素と同じ |
| Chrome 26 | PNG→SVGの順にGETリクエスト | SVGのみGETリクエスト |
| Opera 12.15 | PNG→SVGの順にGETリクエスト | SVGのみGETリクエスト |
| IE 9, 10 | PNGをGETリクエスト→SVGをHEADリクエスト→SVGをGETリクエスト | SVGをHEADリクエスト→SVGをGETリクエスト |
| IE 8 | PNGをGETリクエスト | img要素と同じ |
| Android 2.3 | PNGをGETリクエスト | img要素と同じ |
SVG対応ブラウザのうちFirefox以外では、img要素とobject要素で動作に差が出たのは意外でした。
とくにモバイル環境のことを考えると、それらのブラウザで余計なリクエストが発生しないよう、フォールバック画像はobject要素にした方が良いのかもしれませんが、その場合 IE 7以下ではPNG画像も表示されなくなってしまう現象があります。悩ましいですね。
object要素の入れ子でマークアップしたうえで、JavaScriptでもってIE7以下の場合のみフォールバック画像をimg要素に変換するのが現時点では最良かな、と思ったり思わなかったりしつつ、IE7以下でスクリプト無効にしているユーザーはどうすると考えつつ、そこまで面倒見る必要あるのかと感じつつ。