IE11でのSVG画像のサイズ

SVGはベクターデータで作成されているので拡大縮小をしたときに、解像度に関係なく綺麗に見えるという利点があります。

ですが、IE11やEdgeで、SVG画像をバックグラウンド指定すると、
background-sizeで指定したサイズよりも小さくなってしまう不具合が存在します。

IE11もEdgeもSVG形式の画像をサポートしているので表示は問題ないのですが、SVGのタグにwidth,heightの記述がないと
サイズが変になってしまいます。

タイトル

h2{
　　background: url(../img/icon.svg) no-repeat left center;
　　background-size: 20px;
}

SVG画像自体にwidth heightを指定してあげることで、解決します。

■変更前

又、書き出し方によって、viewBoxとwidth,heightの値がずれていることもあるので、
値をそろえるようにしましょう。