IE11でsvgをimageタグで読み込んだ場合にサイズが適用されない

概要

IE11でsvgをimageタグで読み込んだ場合に、下記のような記述で、CSSのサイズが画像に適用されなかった。

index.html

<div class="img"><img src="dummy.svg" alt=""></div>

style.css

    .img img {
        width: 300px;
        height: auto;
    }

解決策

    .img {
        width: 300px;
    }
    .img img[src$=".svg"] {
        width: 100%;
        height: auto;
    }

属性セレクタで横幅の指定する。親要素にサイズを指定するとimg要素が親要素にフィットして表示される。

svg自体にviewBoxの指定がされていないと、上記のみの記述では効かない。
その為、viewBoxの記述を追加すると動作するようになる。

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480">

参考

https://stackoverflow.com/questions/27970520/svg-with-width-height-doesnt-scale-on-ie9-10-11
https://qiita.com/Shitsu/items/4edf6fae3329c4904f29