Internet Explorer 11以下でSVGをmax-width: 100% (max-height: 100%)を使って親要素の幅(高さ)に合わせてリサイズしようとすると、SVGのアスペクト比が考慮されないバグがあった。width: 100% (height: 100%)や、SVGではなくPNGやJPEGなら大丈夫。max-*とSVGの組み合わせの時のみなぜか起こるバグ。
Demo: SVG Resizing Bug on ~IE11
デモのSVG画像とPNG画像は共に256x256。IE11以下のみ縦にびよ～んと伸びて(64x256で)表示される。併記したPNG画像ではIE11以下でもちゃんとアスペクト比が維持され真ん丸(64x64)で表示される。ChromeやFirefoxではSVGであろうとPNGであろうとちゃんと維持される。
img[src$=".svg"],
img[src$=".svgz"] {
width: 100%;
}前述の通りmax-width: 100%の代わりにwidth: 100%を使うことによって誤魔化せる。SVGだけで起こるので、終端マッチの属性セレクタで拡張子を調べて上書きするのが無難そう。SVGなので問答無用に拡大されても大丈夫。max-width: 100%を有効にしたまま直す方法が必要なのだけど、まったく思いつかない。