SVG artistaで簡単にSVGアニメーションを作る

イラストレーターでSVG画像を作成する

Illustratorで線画と塗りありの２つのSVGデータを作成し、書き出し（アウトライン化する）
この時、線画の方はパスのつなぎ目のどこか１つをカットする

SVGを合成する

先程書き出したSVGデータ２つをエディタで開き、塗りの方の＜g＞~＜/g＞までを、
線画の方の＜/svg＞の手前に入れて保存

（例）

index.html

<!--    線-->
<svg xmlns="">
    <defs>
        <style>.d{}</style>
    </defs>
    <g id="a"></g>

   <!--    塗り-->     
    <defs>
        <style></style>
    </defs>
    <g id="e"></g>
</svg>

SVGartistaを開く

https://svgartista.net に入り、左上のopen SVGより先程合成したSVGを選択する。

好みの秒数を設定して完成

＊STROKEANIMATIONのstaggerstepを０にして、animationdurationを3sなどにすれば、同時に線画の描画が始まる

左のバーの設定を「animation」にすると自然に発火し、「transition」にすると、.activeが振られた際に発火する仕様のため、
ローディングアニメでは「animation」にする。