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

マーツ

2019.10.23

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

SVG Artistaとは？

https://svgartista.net/ SVG Artistaは、オンライン上でSVGアニメーションが簡単に作成できるWebサービスです。単一のSVGファイルからフェードインのSVGアニメーションを簡単に作成したり、ストロークと面のSVGコードを組み合わせて手描き風のアニメーションも簡単に作成することができます。こんな手描き風のSVGアニメーションが作成できます。 <br /> See the Pen <a href="https://codepen.io/maz777/pen/Yzzpmyv">SVG Artista sample</a> by maz<br /> (<a href="https://codepen.io/maz777">@maz777</a>) on <a href="https://codepen.io">CodePen</a>.

SVG Artistaの使い方

線のSVGコードを作成

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

[sourcecode lang="html"]
<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>
[/sourcecode]

[sourcecode lang="html"]

viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve">

～中略　～

</svg>

[/sourcecode]

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

面のSVGコードを作成

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

[sourcecode lang="css"]
<style type="text/css">
	.st0{fill:#E5006B;}
	.st1{fill:#040000;}
</style>
<g id="logo">

～　中略　～

	<path class="st1" d="xxxxxxx"/>
</g>
[/sourcecode]

[sourcecode lang="css"]

.st0{fill:#E5006B;}

.st1{fill:#040000;}

</style>

～　中略　～

</g>

[/sourcecode]

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

[sourcecode lang="css"]
<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>
[/sourcecode]

[sourcecode lang="css"]

～　中略　～

</style>

～　中略　～

</g>

～　中略　～

</style>

～　中略　～

</g>

</svg>

[/sourcecode]

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