WEBデザインでSVGでアニメーションを作る！

今回はWEBデザインでより表現を増やすことに繋がるSVGアニメーションのやり方をご紹介します。

SVGとは

画像の拡張子です。.svgという感じ。
Adobeのillustratorなどを使えば、保存形式で選ぶことができます。

このSVGはHTMLやCSSとも相性が良く、動きのあるデザインを作る時にも使えます。

SVGアニメーション

詳しくはこちらの動画を見ていただけますと使い方はわかりやすいかと存じます。

文面でも簡単にお伝えします。

まずillustratorで図形を作ります。
※必ずパスだけ（塗りつぶし無し）にしてくださいね！

そして、その図形をコピーしてテキストエディタに貼り付けるだけでOK
↑これは感動しました。こんな簡単にいくなんて！

あとは、id名を変更してCSSで指示をしていくだけ。
CSSのanimationを使うと、線が１から引かれていく動きも簡単に作れます！

このSVGを利用すれば、手書き風のイラストや文字をおしゃれに登場させれたりもするので良いですよ！

では今回はこの辺で！