SVGを使ったアニメーションを作成する方法はいくつかあると思いますが、SVG Artistaを使うと手軽に簡単な手描き風のアニメーションが描けます。
関連:LottieでWebやAndroid、iOSアプリに簡単アニメーション実装
目次
SVG Artistaとは?
SVG Artistaは、オンライン上でSVGアニメーションが簡単に作成できるWebサービスです。単一のSVGファイルからフェードインのSVGアニメーションを簡単に作成したり、ストロークと面のSVGコードを組み合わせて手描き風のアニメーションも簡単に作成することができます。
こんな手描き風のSVGアニメーションが作成できます。
SVG Artistaの使い方
線のSVGコードを作成
弊社のロゴを使って作成してみたいと思いますが、まずはイラストレーターでロゴを開いて面の塗りをなしにして線のみの塗りに設定します。言うまでもないですが、アウトライン化済みデータです。
そしたら、「ファイル」、「別名で保存」を選択します。
ファイルの種類を「SVG(*.SVG)」に変更したら、「保存」を選択します。
「SVGコード」を選択します。
するとテキストエディタでSVGのコードが表示されますので、SVGの開始タグから終了タグまでをコピーします。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve"> ~ 中略 ~ </svg>
そしたら、SVG Artistaのサイトにアクセスします。
https://svgartista.net/
次は、「animation type」を「animation」に変更し、「PASTE MARKUP」を選択します。
イラストレーターでコピーしたSVGのコードを貼り付けます。
面のSVGコードを作成
イラストレーターに戻って今度は、面部分を塗りつぶしたロゴを用意します。
同様の手順でテキストエディタでSVGコード画面を開きます。
「ファイル」
↓
「別名で保存」
↓
ファイル種類を「SVG(*.SVG)」
↓
「保存」
↓
「SVGコード」
面のSVGコードをテキストエディタで開いたら、スタイルの開始タグから最初のGタグの閉じタグまでコピーします。
<style type="text/css"> .st0{fill:#E5006B;} .st1{fill:#040000;} </style> <g id="logo"> ~ 中略 ~ <path class="st1" d="xxxxxxx"/> </g>
そしたら、SVG Artistaに戻ってコピーしたSVGコードをSVGの閉じタグの直前に挿入して、「Apply」で適用します。
全体的なSVGコードのソースは下記のようになるはずです。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve" width="640" height="360"> <!-- 線のSVGデータ --> <style type="text/css"> ~ 中略 ~ </style> <g id="logo"> <path class="" d=""> ~ 中略 ~ </g> <!-- 面のSVGデータ --> <style type="text/css"> ~ 中略 ~ </style> <g id="logo"> <path class="" d=""> ~ 中略 ~ </g> </svg>
前の画面に戻ったら再生ボタンをクリックして動作確認をします。
終わったらソースコードの書き出しをします。
スタイルシートは「Minify」にチェックを入れて圧縮しておくといいでしょう。あとは「COPY SVG」、「COPY ANIMATION CODE」でコピペすればOKです。