SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました

この記事はSVG Advent Calendar 2015への参加記事です。初日の今日は私（id:rikuo）が担当します。
第2日目は@masuPさんが「ラスタ画像を配置したSVGファイルを作成する際に気をつけること | トレンドウォッチ | デジパ株式会社」を投稿されています。


SVG Advent Calendarはまだまだ空きもあるので、気軽にご参加ください。


はじめに

SVGはJPEGやPNG, GIF画像と同じように様々な要素で利用でき、

<img src="foo.svg" alt="代替テキスト">

このようにimg要素や


CSSのbackground-imageなどで使えます。

div{
	background-image: url("foo.svg");
}



このときSVGに未対応な古い環境ではどうなるかというと例えばimg要素であれば、何らかの理由で表示に失敗した画像（JPEG, PNG, GIF画像など）と同様に代替テキストが表示されるだけで、SVGだからといって特別変わった挙動をするわけではありません。


しかしSVGは画像ファイルという側面もありますが、実態はXMLを基盤にした画像記述言語ですから、HTML5では直接HTML内に記述するインラインSVGが使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<svg width="200" height="200">
	<path d="m101 174c-8-1-29-7-51-24-25-19-42-54-42-77 0-26 14-50 48-50 21 0 32 14 38 23 3 4 4 7 6 10 1 1 1 1 2 0 2-3 3-6 6-10 7-10 18-23 38-23 34 0 48 24 48 50 0 23-17 58-42 77-22 17-43 23-51 24z" fill="#ff9fcb"/>
</svg>
</body>
</html>

こうした記述の仕方はJPEG, PNG, GIF画像などとは異なりSVG独特の利用方法です。
そんなインラインSVGをSVG未対応の古いブラウザではどのように扱うのか？といったところをこの記事ではまとめてみました。


……なぜなら、img要素のようにシンプルな挙動では無いんですよね。

続きを読む