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 20PNG→SVGの順にGETリクエストimg要素と同じ
Chrome 26PNG→SVGの順にGETリクエストSVGのみGETリクエスト
Opera 12.15PNG→SVGの順にGETリクエストSVGのみGETリクエスト
IE 9, 10PNGをGETリクエスト→SVGをHEADリクエスト→SVGをGETリクエストSVGをHEADリクエスト→SVGをGETリクエスト
IE 8PNGをGETリクエストimg要素と同じ
Android 2.3PNGをGETリクエストimg要素と同じ

SVG対応ブラウザのうちFirefox以外では、img要素とobject要素で動作に差が出たのは意外でした。

とくにモバイル環境のことを考えると、それらのブラウザで余計なリクエストが発生しないよう、フォールバック画像はobject要素にした方が良いのかもしれませんが、その場合 IE 7以下ではPNG画像も表示されなくなってしまう現象があります。悩ましいですね。

object要素の入れ子でマークアップしたうえで、JavaScriptでもってIE7以下の場合のみフォールバック画像をimg要素に変換するのが現時点では最良かな、と思ったり思わなかったりしつつ、IE7以下でスクリプト無効にしているユーザーはどうすると考えつつ、そこまで面倒見る必要あるのかと感じつつ。