SVGをインラインで使用する際のcssでの画像サイズ制御
|SVGをhtmlのインラインで使用する場合、
例えば、インラインSVGで書いたアイコンとかロゴとかをPCとスマホで別の大きさで表示したい場合とか、
メディアクエリcssで画像サイズを拡大縮小したい時は、
————————
svgタグにviewBox=””が必要。
————————
初歩的なことだけど、なぜか最初気づかなかったのでメモ~。
— NG —
<svg>
<path d="hogehogehoge"/>
<path d="hogehogehoge"/>
<path d="hogehogehoge"/>
</svg>
--- OK!!! ---
<svg viewBox="0 0 88 88">
<path d="hogehogehoge"/>
<path d="hogehogehoge"/>
<path d="hogehogehoge"/>
</svg>
で、これでcss側で
svg {
width:44px;
}
とか書いてあげれば自由にsvg画像を縮小させることが出来ます。
ちなみに拡大したい時は、
svg {
width:200px;
height:200px;
}
と高さの指定も必要になるようっす~。
svgはcssから色もサイズも制御できるので楽チン!でいいですね~。
あ、あと当たり前だけど拡大縮小したい際は、
・illustratorでSVGに書き出す際はアウトラインをとる
をお忘れなく~。