SVGはベクターデータで作成されているので拡大縮小をしたときに、解像度に関係なく綺麗に見えるという利点があります。
ですが、IE11やEdgeで、SVG画像をバックグラウンド指定すると、
background-sizeで指定したサイズよりも小さくなってしまう不具合が存在します。
IE11もEdgeもSVG形式の画像をサポートしているので表示は問題ないのですが、SVGのタグにwidth,heightの記述がないと
サイズが変になってしまいます。
1 2 3 4 5 6 |
<h2>タイトル</h2> h2{ background: url(../img/icon.svg) no-repeat left center; background-size: 20px; } |
SVG画像自体にwidth heightを指定してあげることで、解決します。
1 2 3 4 |
■変更前 <svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> ■変更後 <svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" > |
又、書き出し方によって、viewBoxとwidth,heightの値がずれていることもあるので、
値をそろえるようにしましょう。
コメント