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に書き出す際はアウトラインをとる
をお忘れなく~。


Add a Comment

メールアドレスが公開されることはありません。

CAPTCHA


This blog is kept spam free by WP-SpamFree.