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

SVGを背景画像に使う

CSSの背景画像にdata URIスキームを使うときの書式の基本は です。先頭の”data:”がURIスキーム、”image/svg+xml;”がcontent typeです。データ形式がbase64形式ではなくSVGコードを使う場合は となります。 これをIE対応させるためにはdata URI自体をパーセントエンコードする必要があります。 ポイントは以下の２点です：
  • data:image/svg+xml;utf8からdata:image/svg+xml;charset=utf8 に変更する（IE対応のためにはcharsetが必須となります）
  • SVGコードをURLエンコードする。URLエンコードの手間を最小限にするために、SVG要素の属性を指定するときにダブルクォーテーションの代わりにシングルクォーテーションを使っておくほうがいいです。 エンコードするとこんな感じになります：
これで、IEにも対応した、SVGでの背景画像指定をすることができます。

参考ページ

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