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自体をパーセントエンコードする必要があります。 ポイントは以下の2点です:
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