IE9-10でSVGのBackground-sizeがつぶれてしまう。

質問

背景画像を設定したdivがあります。

<div>Play Video</div>

を以下のCSSで記述してください。

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

Firefox、Safari、Chromeでは背景の大きさが尊重されます。IE8では、SVGはPNGファイルに置き換わります。しかし、IE9とIE10では、SVGファイルのサイズが極端に小さくなってしまいます。この問題は、divの幅と高さに関連しているようです。高さを150pxにすると、SVGは正しくレンダリングされます。もし私がそれを小さくすると（例えば100px）、グラフィックは縮小し始めます。

エクスプローラでこの問題を解決する方法を見つけた方はいらっしゃいますか？div の幅と高さに関係なく background-size 値を使用するよう IE に指示する方法はありますか?

どのように解決するのですか？

SVGに必ず width と height を指定します。Illustratorから生成する場合は、このオプションによって幅と高さが削除されるため、"Responsive"のチェックボックスがオフになっていることを確認してください。