IEだけSVGの表示がおかしい?
imgタグでsvgファイルを表示するとIEだけサイズが変になりました。具体的には他ブラウザより小さく表示されてしまいました。
例えばsvgをimgで表示するときは以下のように指定しますよね。
<div class="image-box">
<img src="img/logo.svg"/>
</div>
そんでもって親要素にサイズ指定し、昨今では当たり前のフルードイメージ用CSSを追加していれば大丈夫なはず。
/* フルードイメージ用スタイル */
img {
max-width: 100%;
height: auto;
}
/* 親要素にサイズ指定 */
.image-box {
width: 200px;
}
ですが、IEのみサイズが親要素にフィットしない。(ヤバイ…、モウダメ…)
どうやらインラインSVGの場合はimgタグそのものにwidthを指定しなければいけないようです。
属性セレクタを使って解決
前置きが長くなってしまいましたが、上述の問題には属性セレクタの後方一致バージョンを使って解決させてみます。
img[src$=".svg"] {
width: 100%;
}
この指定をCSSに追加するだけで、imgタグのsrc属性で指定しているファイルの拡張子が「svg」の場合のみwidth: 100%;
が効くようになりました。
ただし、上記のCSSはサイズ指定されている親要素の中にSVGがあること前提なので、その点を注意しながら臨機応変に書き換える必要があります。(繰り返しになりますが、以下のように親要素にサイズ指定されている必要があります)
<div class="image-box" style="width: 200px;">
<img src="img/logo.svg"/>
</div>
SVGスプライトを使用した場合はどうなるか分かりませんが(まだ使ったことがない)、とりあえずこれで良いのではないでしょうか。
追記:
どうしてIEのみインラインSVGの表示がおかしくなるか、この原因について解説している記事をTwitterにて本人に教えて頂いたので張っておきます。
一部を引用します。
IEの固有サイズ表示で高さが150pxに固定されるのは、「バグ」というわけではなく、単にSVG1.1の仕様をIEがまだ実装していないだけであり、実は、IEはCSS2.1の仕様に沿ってフォールバックを適切に(?)働かせている、ということになります。
IEもIEで、こちらの手抜き(指定の不備)を補って、よしなに表示してくれているわけですw
小さく表示されてしまうのは、CSS2.1の仕様に則って高さが150pxに固定されてしまうのが原因だったようです。
また、こちらのリンクにはJavascriptでの解決コードが載っていますので、一括で楽に解決するならこちらの方が良いかもしれません。