CSSの背景画像でSVG要素を使う場合にIEにも対応させる書き方

AMP HTMLを使っているとamp-carouselの左右のボタンなんかがそうなんですが、background-imageにSVGのコードをベタッと貼り付ける場面があったりします。そのときにIEの対応まで考えるとdata URI自体をパーセントエンコードする必要が出てきます。ということでIEにも対応した、背景画像にdata URIスキームを使う際の注意点を書きました。

SVGを背景画像に使う

CSSの背景画像にdata URIスキームを使うときの書式の基本は

.data-uri-scheme {
  background-image: url("data:image/svg+xml;utf8,base64,[データ]");
}

です。先頭の"data:"がURIスキーム、"image/svg+xml;"がcontent typeです。データ形式がbase64形式ではなくSVGコードを使う場合は

.svg-image {
  background-image: url("data:image/svg+xml;charset=utf8,<svg ...> ... </svg>");
}

となります。

これをIE対応させるためにはdata URI自体をパーセントエンコードする必要があります。 ポイントは以下の２点です：

• data:image/svg+xml;utf8からdata:image/svg+xml;charset=utf8 に変更する（IE対応のためにはcharsetが必須となります）
• SVGコードをURLエンコードする。URLエンコードの手間を最小限にするために、SVG要素の属性を指定するときにダブルクォーテーションの代わりにシングルクォーテーションを使っておくほうがいいです。
  エンコードするとこんな感じになります：

.ie-compatible-image {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");
}

これで、IEにも対応した、SVGでの背景画像指定をすることができます。

参考ページ

Optimizing SVGs in data URIs CSS: Using raw svg in the URL parameter of a background-image in IE