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