手描き風SVGアニメーションが簡単に作成できるSVG Artista

SVGを使ったアニメーションを作成する方法はいくつかあると思いますが、SVG Artistaを使うと手軽に簡単な手描き風のアニメーションが描けます。 関連：LottieでWebやAndroid、iOSアプリに簡単アニメーション実装

SVG Artistaとは？

https://svgartista.net/ SVG Artistaは、オンライン上でSVGアニメーションが簡単に作成できるWebサービスです。単一のSVGファイルからフェードインのSVGアニメーションを簡単に作成したり、ストロークと面のSVGコードを組み合わせて手描き風のアニメーションも簡単に作成することができます。 こんな手描き風のSVGアニメーションが作成できます。

SVG Artistaの使い方

線のSVGコードを作成

弊社のロゴを使って作成してみたいと思いますが、まずはイラストレーターでロゴを開いて面の塗りをなしにして線のみの塗りに設定します。言うまでもないですが、アウトライン化済みデータです。 そしたら、「ファイル」、「別名で保存」を選択します。 ファイルの種類を「SVG(*.SVG)」に変更したら、「保存」を選択します。 「SVGコード」を選択します。 するとテキストエディタでSVGのコードが表示されますので、SVGの開始タグから終了タグまでをコピーします。

そしたら、SVG Artistaのサイトにアクセスします。 https://svgartista.net/ 次は、「animation type」を「animation」に変更し、「PASTE MARKUP」を選択します。 イラストレーターでコピーしたSVGのコードを貼り付けます。

面のSVGコードを作成

イラストレーターに戻って今度は、面部分を塗りつぶしたロゴを用意します。 同様の手順でテキストエディタでSVGコード画面を開きます。 「ファイル」 ↓ 「別名で保存」 ↓ ファイル種類を「SVG(*.SVG)」 ↓ 「保存」 ↓ 「SVGコード」 面のSVGコードをテキストエディタで開いたら、スタイルの開始タグから最初のGタグの閉じタグまでコピーします。

そしたら、SVG Artistaに戻ってコピーしたSVGコードをSVGの閉じタグの直前に挿入して、「Apply」で適用します。 全体的なSVGコードのソースは下記のようになるはずです。

前の画面に戻ったら再生ボタンをクリックして動作確認をします。 終わったらソースコードの書き出しをします。 スタイルシートは「Minify」にチェックを入れて圧縮しておくといいでしょう。あとは「COPY SVG」、「COPY ANIMATION CODE」でコピペすればOKです。