IE11でのSVG画像のサイズ


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

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

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

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

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