SVGを使うときの注意点

イラストレーターで吐き出すときに、レスポンシブにしない。

<h1>や<h2>等のヘッダのアイコンとしてSVG画像を入れたときに、SVGを<div>等で括らないと、IE,EdgeではSVG画像の見え方がSafariやChromeとは違う見え方になりがちである。

<div class=”svg-icon”><img src=”sample.svg” /></div>というようにして

.svg{
   width:100px;
   height:100px;
   margin: 0 auto;
}
.svg img{
   width:100;
   height:auto;
}

上記のような指定を加えると良い。