SVG研究② | illustratorでアニメーション用SVG作成の試行錯誤メモ


上記記事で使用したSVGアニメーションのjQueryプラグイン「DrawSVG」ですが、これを使って動かす場合、SVGはpathで記述されている必要がありました。
記事内の例ではアナログで置き換えましたが、そんなことやってられない&複雑な形状ではお手上げです。

やはりIllustratorで作成したい!
その試行錯誤記録です。

イラレでアニメーション用のSVGを作成する

レッツ・トレース!

SVGは座標座標で順に記述していくため、イラレで描く順番(方向)も重要になります。
ここでは円・四角などの図形ツールは使用せずパスツールで記述していきます。

今回はテストでこの絵をトレースしてみます(ShutterStockで購入した素材を組み合わせたものです)
アートボードはビューポートにしたいので図の大きさに合わせて調整し、下絵は邪魔にならないよう淡い色にしています。

トレース中。黒い線の方です。
順番と方向が大事なので、この時点ではパスツールで地点地点にざくざくパスを置いていけばOKです。

パスを置き終わったら、アンカーポイントツールやダイレクト選択ツールで形を整えます。
後からパスを分割してパーツを別にすると順番が狂ったりするので注意してください。
目の丸もパスを菱形に置いてからアンカーポイントツールで丸くしています。

アウトラインで表示するとこんな感じです。

上の手、赤ちゃん、女の子、下の手をそれぞれグループ化しておいて、「ファイル」>「書き出し」>「書き出し形式…」からファイル形式をSVGにし、「アートボードごとに形成」にチェックを入れて書き出します。

オブジェクトを選択して「選択範囲を書き出し」でSVG書き出しをすると、オブジェクトの大きさがビューポートとなるため、私は上記のやり方をしています。

SVGコードの修正

書き出されたSVGコード

こちらが書き出されたSVGコードです。要素が多いのでちょっと長いですね。

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
 <defs><style>.a{ffill:none;stroke:#000000;stroke-miterlimit:10;}</style></defs>
 <line class="a" x1="211.22" y1="58.66" x2="208.12" y2="57.78"/>
 <path class="a" d="M201.8,56.06,141.28,41.6s-14.22-1.69-18.65,6.94c0,0-6.33,9.29,2.44,14.89l90,49.58s31.26,19.37,60.29-2.8L353,74.85,330.1,24.6l-57,26-49.36-30s-16.57-11.42-36.69-9l-67.61,9L55.07,50.31c-9.57,6.46-9.83,14.24-4.71,22.78,5.88,9.43,12,10.68,20.27,7.2L111.87,61.8"/>
 <path class="a" d="M65.1,82.52c5.15,10.09,14.21,15,27.51,10.47l24.65-10.47"/>
 <line class="a" x1="125.2" y1="78.59" x2="127.3" y2="77.62"/>
 <line class="a" x1="188.83" y1="342.98" x2="191.93" y2="343.86"/>
 <path class="a" d="M198.25,345.58,258.77,360s14.22,1.69,18.65-6.94c0,0,6.33-9.28-2.44-14.89l-90-49.57s-31.26-19.37-60.29,2.79l-77.6,35.36L70,377l57-26,49.36,30s16.57,11.42,36.69,9l67.61-9L345,351.33c9.58-6.46,9.83-14.24,4.72-22.78-5.88-9.43-12-10.68-20.27-7.2l-41.24,18.5"/>
 <path class="a" d="M335,317.12c-5.15-10.09-14.21-15-27.51-10.47l-24.65,10.47"/>
 <line class="a" x1="274.85" y1="323.05" x2="272.75" y2="324.02"/>
 <path class="a" d="M54.52,200.33c5.81-31.63,29.25-51.81,60.77-52.43,32.3,0,54.72,22.39,59.37,48.34"/>
 <line class="a" x1="175.72" y1="202.63" x2="176.53" y2="207.2"/>
 <path class="a" d="M56.1,189.71c-8.33.39-18.3,5.23-18.3,18.3.58,13,8.36,16.56,18.3,18.29,8.79,29.1,33.26,44.43,61.26,44.43,22.41-2.12,44.16-10.13,57.29-44.43,8.85-.48,17.59-5.32,18.28-19-.41-12.51-9.89-17.93-17.9-17.06"/>
 <path class="a" d="M110.53,148.08c11.48-2.91,17.34-10.82,16-21-2-9.93-11.19-13-18.88-8.46-5,3.16-4.89,11.44-1.55,14"/>
 <line class="a" x1="111.36" y1="135.96" x2="112.61" y2="136.46"/>
 <path class="a" d="M93.86,202a2.71,2.71,0,0,1,2.69,2.7c-.28,1.59-1,2.64-2.69,2.69a2.77,2.77,0,0,1-2.7-2.69A3,3,0,0,1,93.86,202Z"/>
 <path class="a" d="M133.66,202a2.71,2.71,0,0,1,2.7,2.7c-.29,1.59-1.05,2.64-2.7,2.69a2.77,2.77,0,0,1-2.69-2.69A3,3,0,0,1,133.66,202Z"/>
 <path class="a" d="M100.33,235.09c3,11.2,26.3,12,30.64,0"/>
 <path class="a" d="M221.92,200.33c6.69-29.86,26.41-51.81,61.46-52.43,45.6,2.2,58.66,38.76,60.56,56.77"/>
 <path class="a" d="M222.81,195.6c-7.5-1.41-14.57,6.21-14.21,14.36.57,9.91,7.78,12.87,14.22,13.37,9.34,34.3,35.19,46.77,61.14,47.4,25.12-.92,48.37-14.58,59.45-46.7,9.2-1.56,14.74-5.56,14.74-15.82-.79-9.46-7.62-14.26-14.69-12.76"/>
 <path class="a" d="M236.76,190c-.74-.08-1.48-.16-2.22-.27"/>
 <path class="a" d="M331.61,188.89c-15.09.79-27-10.77-33.24-26.94-20.36,19.5-36.36,28-55,28.66"/>
 <path class="a" d="M247.09,151.12c-1.55-3.81-4.62-7.16-10.29-9-9.76-2.93-15.72,1.77-19.15,9.17-3.57,8.63-9.82,12.84-18.26,13.44,7.83,12.46,21.41,15.9,31.38,11.57"/>
 <path class="a" d="M317.4,158.64c-.23-6.77,2.28-12.91,9.87-16.09,9.06-3.61,16,.29,20.18,8.46,5.81,10.94,11.05,14.56,19,13.32-3.35,7.35-8.56,10.87-16.13,13"/>
 <line class="a" x1="344.45" y1="178.27" x2="342.08" y2="177.97"/>
 <path class="a" d="M261.26,201.6a3.11,3.11,0,0,0-2.7,2.91,3,3,0,0,0,2.7,2.92,2.78,2.78,0,0,0,2.92-2.92A3.06,3.06,0,0,0,261.26,201.6Z"/>
 <path class="a" d="M301,201.6a3.09,3.09,0,0,0-2.69,2.91,3,3,0,0,0,2.69,2.92,2.78,2.78,0,0,0,2.92-2.92A3.06,3.06,0,0,0,301,201.6Z"/>
 <path class="a" d="M267.73,236.17c3.76,12.26,27.58,10.67,30.64,0"/>
</svg>

lineをpathに変換する(手動&ツール)

曲線が含まれている線はpathで記述されましたが、この図では点っぽく見える箇所はただの直線なのでlineで記述されてしまいます。
アニメーションに組み込みたい場合はもう手動でpathに置き換えます。

結構簡単ですね。ですがJSの勉強も兼ねて変換コードを吐き出すツールを作ってみました。
lineの始点のX座標、Y座標、終点のX座標、Y座標を入力すると、変換されたpathのコードが吐き出されます。classは後から付加してください。

SVGのlineをpathに変換するJSデモページ

修正後のSVGコード

全てpathになりました。

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
 <defs><style>.a{fill:none;stroke:#000000;stroke-miterlimit:10;}</style></defs>
 <path class="a" d="M175.41,49.44 172.32,48.55"/>
 <path class="a" d="M166,46.84,105.48,32.38s-14.22-1.69-18.66,6.94c0,0-6.32,9.28,2.45,14.89l90,49.57s31.26,19.37,60.29-2.79L317.2,65.63,294.3,15.38l-57,26-49.36-30s-16.57-11.42-36.69-9l-67.61,9L19.27,41.09C9.7,47.55,9.44,55.33,14.55,63.87c5.89,9.43,12,10.68,20.28,7.2l41.24-18.5"/>
 <path class="a" d="M29.3,73.3c5.14,10.09,14.21,15,27.51,10.47L81.46,73.3"/>
 <path class="a" d="M89.4,69.37 91.5,68.4"/>
 <path class="a" d="M153.03,333.76 156.12,334.64"/>
 <path class="a" d="M162.45,336.36,223,350.82s14.22,1.69,18.65-6.94c0,0,6.33-9.29-2.45-14.89l-90-49.58s-31.26-19.37-60.29,2.8l-77.6,35.36,22.89,50.25,57-26,49.37,30s16.57,11.42,36.68,9l67.61-9,64.34-29.78c9.57-6.46,9.83-14.24,4.72-22.78-5.88-9.43-12-10.68-20.28-7.2l-41.24,18.49"/>
 <path class="a" d="M299.14,307.9c-5.14-10.09-14.2-15-27.51-10.47L247,307.9"/>
 <path class="a" d="M239.05,313.83 236.94,314.8"/>
 <path class="a" d="M18.72,191.11C24.53,159.48,48,139.3,79.49,138.67c32.3,0,54.71,22.39,59.37,48.35"/>
 <path class="a" d="M139.91,193.4 140.73,197.98"/>
 <path class="a" d="M20.29,180.49C12,180.88,2,185.71,2,198.79c.58,13,8.35,16.55,18.29,18.29,8.8,29.1,33.26,44.43,61.26,44.43,22.42-2.12,44.17-10.13,57.29-44.43,8.85-.48,17.6-5.32,18.28-19-.4-12.51-9.89-17.93-17.89-17.07"/>
 <path class="a" d="M74.72,138.86c11.48-2.91,17.34-10.82,16-21-2-9.94-11.19-13-18.88-8.46-5,3.16-4.9,11.44-1.55,14"/>
 <path class="a" d="M75.55,126.74 76.81,127.24"/>
 <path class="a" d="M58.05,192.74a2.71,2.71,0,0,1,2.7,2.7c-.29,1.58-1,2.64-2.7,2.69a2.77,2.77,0,0,1-2.69-2.69A3,3,0,0,1,58.05,192.74Z"/>
 <path class="a" d="M97.86,192.74a2.71,2.71,0,0,1,2.7,2.7c-.29,1.58-1,2.64-2.7,2.69a2.77,2.77,0,0,1-2.69-2.69A3,3,0,0,1,97.86,192.74Z"/>
 <path class="a" d="M64.53,225.87c3,11.19,26.3,12,30.64,0"/>
 <path class="a" d="M186.12,191.11c6.69-29.86,26.41-51.81,61.46-52.44,45.6,2.21,58.66,38.77,60.55,56.78"/>
 <path class="a" d="M187,186.38c-7.5-1.41-14.57,6.21-14.21,14.35.57,9.91,7.77,12.88,14.22,13.38,9.34,34.3,35.18,46.77,61.14,47.4,25.11-.92,48.37-14.59,59.45-46.7,9.2-1.56,14.74-5.56,14.74-15.82-.8-9.46-7.62-14.27-14.69-12.76"/>
 <path class="a" d="M201,180.75c-.74-.07-1.48-.16-2.22-.26"/>
 <path class="a" d="M295.81,179.67c-15.09.79-27-10.77-33.24-26.94-20.37,19.5-36.37,28-55,28.66"/>
 <path class="a" d="M211.29,141.9c-1.55-3.81-4.62-7.16-10.3-9-9.75-2.93-15.72,1.76-19.14,9.16-3.58,8.63-9.82,12.85-18.26,13.45C171.41,168,185,171.39,195,167.06"/>
 <path class="a" d="M281.6,149.42c-.23-6.78,2.28-12.91,9.87-16.09,9.06-3.62,16,.29,20.18,8.46,5.81,10.94,11.05,14.55,19,13.32-3.35,7.35-8.56,10.87-16.13,13"/>
 <path class="a" d="M225.46,192.38a3.09,3.09,0,0,0-2.7,2.9,3,3,0,0,0,2.7,2.92,2.78,2.78,0,0,0,2.92-2.92A3.07,3.07,0,0,0,225.46,192.38Z"/>
 <path class="a" d="M308.65,169.05 306.28,168.74"/>
 <path class="a" d="M265.15,192.38a3.09,3.09,0,0,0-2.69,2.9,3,3,0,0,0,2.69,2.92,2.77,2.77,0,0,0,2.92-2.92A3.06,3.06,0,0,0,265.15,192.38Z"/>
 <path class="a" d="M231.93,226.94c3.76,12.26,27.58,10.68,30.64,0"/>
</svg>

「DrawSVG」を実装してみよう


それではいよいよこの記事のSVGアニメーションで動かしてみましょう。
パス数が多いので順番に動かすと終わるまで結構待たされてしまいます。さっと動かしたいのでstagger:0,にして一斉スタートします。

SVGアニメーションのデモページ

動きました!

比較用にlineを直していないSVGアニメーションも下に置いてあります。lineはアニメーションが効かないため、最初から表示されていますね。

SVGアニメーションのデモページ:失敗ver

おまけ:polygonをpathに変換する

polygonをpathに変換できるオンラインツール、きっとあるはず!と探したところ、ありました。
皆大好きCODE PENです。そんな使い方もできるんですね。なお、CODE PENはIEでは利用できません。

使い方

Chromeでアクセスする。
HTMLにSVGコードをペースト。
下部にSVG画像が表示される。これがpathに変換されたものなので、図の上で右クリックの検証モードにする。
SVGコードを頂戴する。

最後に

もうちょっとシンプル&スマートなやり方があるような気もするのでもうちょっと模索してみます。
みなさん、どうやってるんだろう……? 🤔