IE9-11で背景画像のSVGの表示が崩れる問題と対処法

#faq

不具合の状況

div{
  background: #fcf;
  height: 80vh;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 80px;
  background-image: url("star.svg");
}

こうした設定で、SVGファイルをbackground-imageに指定した場合、本来であればdiv要素の右下に80pxの大きさで表示されます。Chrome, Firefox, iOS SafariそしてMicrosoft Edgeなど主な環境では意図した通りになります。

しかし、IE9～IE11ではこのように大きさが変わってしまいます。

デモページ

直接の原因

直接の原因としては、background-imageに指定したSVGファイルのルート要素にwidth / height属性が無いため、このようになってしまいます

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 80 80">
<path fill="#ffa500" d="M43.3 4l9.5 19.3c.5 1 1.4 1.6 2.4 1.8l21 3.2c2.7.4 3.8 3.6 2 5.5L62.7 48.5c-.8.7-1 1.8-1 2.8l3.7 21C66 75 63.2 77 60.8 76l-19-10c-.8-.4-2-.4-3 0L20 76c-2.4 1.2-5-.8-4.7-3.4l3.6-21c0-1-.3-2.2-1-3L2.7 33.7c-2-2-1-5 1.8-5.5l21-3c1-.2 2-.8 2.5-1.8L37.5 4c1.2-2.3 4.6-2.3 5.8 0z"/>
</svg>

対処方法

対処するにはSVGファイルのルート要素にwidth / height属性を記述すると適切に表示されます。

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 80 80">
<path fill="#ffa500" d="M43.3 4l9.5 19.3c.5 1 1.4 1.6 2.4 1.8l21 3.2c2.7.4 3.8 3.6 2 5.5L62.7 48.5c-.8.7-1 1.8-1 2.8l3.7 21C66 75 63.2 77 60.8 76l-19-10c-.8-.4-2-.4-3 0L20 76c-2.4 1.2-5-.8-4.7-3.4l3.6-21c0-1-.3-2.2-1-3L2.7 33.7c-2-2-1-5 1.8-5.5l21-3c1-.2 2-.8 2.5-1.8L37.5 4c1.2-2.3 4.6-2.3 5.8 0z"/>
</svg>

比較用のデモページ

このように対応自体はそれほど難しくありません。

ただ問題はこの不具合に遭遇する人がとても多いことです。なぜならこれはAdobe Illustratorの仕様変更によるものが間接的な原因だからです。

間接的な原因

2014年1月のアップデートでAdobe IllustratorからのSVGファイル出力に「レスポンシブ」という項目が追加されました。

参考記事：レスポンシブなSVGの書き出し | Adobe Illustrator CC tutorials

現在ではこの「レスポンシブ」機能が初期設定でオンに指定されています。

この「レスポンシブ」機能は具体的に何をするか？というと width / height属性を省略するだけです。

width / height属性を省略したSVGファイルは、PNG, JPEG, GIF画像とは異なりCSSなどで表示サイズの制御がしやすくなりますが、裏を返せば適切に利用するには別途CSSの設定などが要ります。IEのこの不具合がありますから利用する際には注意が必要ですし、慣れないうちには「レスポンシブ」機能は使わない方が良いでしょう。

参考にした記事

この記事はSVG MANIAX Ver.2 - Mars vanillaの46ページの情報を参考に書きました。

週刊SVG

SVGの最新ニュースや制作のコツなどの情報を毎週お知らせします