72
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SVGをimgで表示した場合にIEだけサイズが変になる現象を直す

Last updated at Posted at 2015-05-04

IEだけSVGの表示がおかしい?

imgタグでsvgファイルを表示するとIEだけサイズが変になりました。具体的には他ブラウザより小さく表示されてしまいました。

例えばsvgをimgで表示するときは以下のように指定しますよね。

index.html
<div class="image-box">
    <img src="img/logo.svg"/>
</div>

そんでもって親要素にサイズ指定し、昨今では当たり前のフルードイメージ用CSSを追加していれば大丈夫なはず。

style.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のインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法 | asamuzaK.jp : ♪Vector Vector, please. Oh, the mess I'm in (c) UFO

一部を引用します。

IEの固有サイズ表示で高さが150pxに固定されるのは、「バグ」というわけではなく、単にSVG1.1の仕様をIEがまだ実装していないだけであり、実は、IEはCSS2.1の仕様に沿ってフォールバックを適切に(?)働かせている、ということになります。
IEもIEで、こちらの手抜き(指定の不備)を補って、よしなに表示してくれているわけですw

小さく表示されてしまうのは、CSS2.1の仕様に則って高さが150pxに固定されてしまうのが原因だったようです。
また、こちらのリンクにはJavascriptでの解決コードが載っていますので、一括で楽に解決するならこちらの方が良いかもしれません。

72
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
72
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?