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

記事更新日 

記事公開日 

タグ：, ,

  1. Home
  2.  > TECHBLOG
  3.  > Front-end
  4.  > CSS

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

SVGを背景画像に使う

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

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

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

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要素の属性を指定するときにダブルクォーテーションの代わりにシングルクォーテーションを使っておくほうがいいです。
    エンコードするとこんな感じになります：

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

関連記事