線(Stroke)と塗り(Fill)を分けたSVGアニメーションを作りたいんだけど、速くできないかな?と思うことありませんか?

この方法ならば、すぐ、作れます。

このアニメーションを作ります

See the Pen
logo animation(with SVG Artista)
by delico (@delico)
on CodePen.0

手順はこちら

  1. Illustratorで素材を用意する
  2. SVG形式で書き出す
  3. SVGデータをツールで最適化する
  4. ツールでアニメーション化する
  5. html と css をコピペして使う

Illustratorで素材を作る

線と塗りに分けて、重ね、アニメーションしたいものを作ります。

線と塗りは別パーツで(同一レイヤー内に)作ります

このとき、あとに出てくるアニメーション化するツール上では、
以下のことを守らないと、うまく動きませんでした。

この手順で作るときのデータ作成の注意点

  • 線と塗りは同一レイヤーにする
  • 線の太さを1px以上にする
  • 線の位置を「中央」にする

SVG形式としてデータを書き出す

「ファイル」>「別名で保存」から、SVG形式を指定して保存します。

SVGデータを最適化する

Illustratorで書き出したSVGデータには、エディタで開くとわかりますが、要らないものが入っています。

要らないものは通常エディタで削除します。が!今回テーマは「速く」。そのためオンライン上で使える最適化Webツールを使います。

最適化には「SVGO」と呼ばれるNodeJSベースのツールが一般的ですが、SVGOをブラウザ上で使えるツールがあります。

SVGOMG

SVGOをブラウザ上で使えるwebツール

https://jakearchibald.github.io/svgomg/

ただし、ツールを使って最適化する際に、最適化すること自体が良くない結果を生む場合もあります。

理由は最適化によって構造が変化してしまうためです。

想像したような状態にならないことがあるため、仕上がりを見ながら調整してください。

ジェネレータに読み込んで書き出す

SVGアニメーションをブラウザ上で作れる「SVG ARTISTA」という便利なWebツールがあります。

SVG ARTISTA

ブラウザ上でSVGファイルをアニメーション化しコード生成できるツール

https://svgartista.net/

この「SVG ARTISTA」で、先ほどの「SVGOMG」で書き出したSVGファイルを読み込み、設定をしてコードを取得します。(デフォルト設定でも素敵に動きます)

右上の「GET CODE」よりコードを取得します

コードを取得すればあとは、使うだけ!

さいごに

あまり時間をかけられないんだけど、サクッとロゴをSVGアニメーション化できないかな〜〜と考えて検索していたら見つけたツールたちです。
この方法ならば、ありもののロゴ等グラフィックがある状態からなら、5分くらいでアニメーション化できるのではないかな?と思います。

ぜひやってみてくださいね!

参考にさせていただいたブログ

Tips for Creating and Exporting Better SVGs for the Web

https://www.sarasoueidan.com/blog/svg-tips-for-designers/