IE9、IE10でsvgのサイズが変になる

imgタグにsvgを指定して表示したとき、IE9とIE10で確認したのですが、縦横比がおかしく表示されてしまうことがありました。
IE9だけならそろそろサポートも切れていることだしいいんじゃない？という選択肢もありそうですが、IE10はまだ切れないなぁ。

どうやら原因は、IEがCSS2.1の仕様に従って高さを150pxに固定して表示してしまう、ということなんだそうです。
へー。

いや、でも困ります。
明確にサイズ指定が出来たりするなら良いんですけど、レスポンシブだといろいろムリが。
そもそもサイズがいろいろ変わってもきれいに表示されて欲しいというのもあってsvgを選択しているという面もありますので。
安全を取るならpngにしちゃうという手もありますけど、svgのがきれいですからね。

JavaScriptで解決する方法とかあるみたいですが、今回は違う方法を見つけました。
それは、position:absoluteにすること。
どうやらposition:absoluteにすることで正しいアスペクト比で表示してくれるようです。
なんでやねん。

もちろんレイアウトの都合上、absoluteに設定できない事も多いでしょうね。
まぁ、そういう方法もあるんだな、くらいな感じで。