SVGアニメーションで失敗したことを踏まえて丁寧に！動くロゴの作り方

こんにちは。ざらあしです。
最近、訳もなくSVGにハマってます。
昨日はこのSVGを動かすのによいちょよいちょ言いながらふにゅふにゅしてました。（幼女）
https://twitter.com/azarashic4649/status/825247175059726337
結局javascriptは今回は使わず、cssでアニメーションさせようとしたら、
https://twitter.com/azarashic4649/status/825289545176403968
てな感じで、どツボにハマってしまっていました。

昨日は丸一日をSVGのアニメーション技術習得に費やしました…
SVG初心者のくせに無理しすぎました…

折角なので備忘録的に記事にしておこうと思います。（すぐ忘れるから…）

SVGって何？という方にも分かりやすく書いてみたので、とりあえず読んでみてください～～
（あ、でも無駄に長いです・・・）

目次♡流し読みOK

1 SVGとは？
2 今回は回転と変形のアニメーションを作ってみた
- 2.1 制作フロー
3 SVG画像を作る
- 3.1 絵を描く
- 3.2 SVG画像として保存する
4 SVGの中身のコードをテキストエディタで開く
5 CSSやアニメーションを付加する
6 動作確認！ちゃんと動くかな？
- 6.1 出来たアニメーションのSVGコード
7 作ってみて。
8 参考にさせていただいた記事

SVGとは？

難しいことは書きません。どんなものかという簡単な説明をします。
詳しくはこちらの本か、SVGで検索してみてください。

SVGは、いわゆる画像です。
↓これ、SVG画像です。

劣化しない画像

でもただの画像じゃないんですよ。
ベクター画像と言って、PNGやJPEG等と違い拡大してもぼやけない、スッキリ綺麗な画像として表示されるものです。
試しにこちらの2種類の画像を拡大してみてください。

■PNG画像
■SVG画像

PNG画像はぼやけてますが、SVG画像は線がハッキリしてますよね。
この違いです。これがSVGのスゴイところ。
わたしはまずこの劣化しない究極感に惚れました。カッコイイですよね。

アイコンフォントと違い、何色でも色を使える

画像がぼやけない？と聞くと、ブログやってる方はもしかしたらピンと来たかもしれないですね。
「FontAwesome」のアイコンフォントをブログ等に導入している方は、「サイズを変えてもアイコン画像が劣化しない＝アイコンフォント」とイメージ出来るかも。
まさにそうですし、アイコンフォントは既に一般的に認知されてよく使われていると思いますが、アイコンフォントにはある欠点があります。

そう、フォントは単色でしか使えないんです。

「FontAwesome」等のアイコンフォントを利用して劣化しない画像のようにアイコンを表示させてみたは良いけれど、文字同様フォントなので、単色でしか使えませんよね。

簡単なアイコンなら単色でも十分ですが、寂しいと感じる方もいるかも？
SVGなら2色以上の色を使えます。
こんな風に。

仮にアイコンフォントだったら単色です。

（※↑これはpng画像です）
すごくデカい髭みたいになってる・・・

アニメーションが自由に作れる

SVGはアニメーションのイメージ、という方も多いかも？
最近はjavascriptを使わずともCSS3で十分なアニメーションを実装できるようになっているので、SNSアイコン等にアニメーションを導入しているサイトも多く見られますね。
やりすぎるとウザいアニメーションですが、ポイント使いにアクセントとして動きを入れるとリッチな表現として受けが良いのかもしれません。
SVGを使うと、より凝ったアニメーションを実装することができます。

例えば…

See the Pen SVG Twitter Broken Heart by Chris Gannon (@chrisgannon) on CodePen.0

こういう「いいね💓」の実装が出来たり。
めちゃくちゃいいねしたくなりません～～～～～？？これ絶対使いたい！！💓💓💓

今回は回転と変形のアニメーションを作ってみた

SVGの詳しい説明は他サイト等にて見ていただくとして、この記事の本題は「がんばってSVGアニメ作ってみたよ～～～うぇ～～～い」です。
早速、出来上がったものを先に置いておきます。

アニメにした所

あざらしの周りの円をくるくる回す　⇒回転
眠そうに瞬きさせる　⇒変形

こんな感じで、回転と変形のアニメーションを使ってみました！
どこに使うの？？という話は置いておいて、こういうのを作る方法を説明します。

制作フロー

SVG画像を使ったアニメーションを作るにあたって、制作のフローを簡単に。

制作フロー

SVG画像を作る
SVGの中身のコードをテキストエディタで開く
SVGコードにCSSやアニメーションを付加する

こんな感じ。めちゃくちゃ大雑把ですが・・・

SVG画像を作る

いきなりですが、Adobe illustratorCCを使用します。(CSでも大丈夫だと思います多分)
ソフトをお持ちでない方は、無料ソフトのinkscapeでも作れます。

絵を描く

■周囲の円
１．円形ツールで円を描きます
２．線の太さ・破線等、スタイルを整えます

■あざらし
円形ツール、ペンツール等で自由に描いていきます
（画像、パスツールって何だ…ペンツールですよ）

レイヤー・パスのちょっとした注意

レイヤーはこんな感じ。

レイヤー数はてきと～でも大丈夫です。
ですが、SVGコード上でちょっと面倒な作業が増えるので、1枚にまとめておいても大丈夫かと思います。

それよりレイヤー名とオブジェクト・パス名は絵を作ってる時点で入れておいた方が良いかも、、
後々レイヤー名→id名、パス名→class名になるので、日本語ではなく英数字で。
（私はこれ忘れてて後で後悔しました笑）

SVG画像として保存する

SVG1.1で保存してください。

SVGの中身のコードをテキストエディタで開く

「画像の中身のコードって何…？」
と謎が生まれてると思いますが、SVGは画像なんですけどコードでもあるんです。

例えば、HTMLはコードを書いて読み込ませてサイトデザインを表示させますよね。
それと似たような話で、SVGもコードを書いて読み込ませて画像を表示させているのです。
HTMLで作られたWebサイトは拡大縮小しても劣化しない（画像は除く）ですよね、それと同じです。

PNGやJPG画像と違って拡大しても綺麗な線を維持できる理由は、ここにあったんですね。

SVGはコードであるからこそ、HTMLのようにコードを弄ってイロイロできちゃう♡っという話なのです。ふふふ。

適当なテキストエディタでSVGを開く

画像をテキストエディタで開く…？と、まだ腑に落ちないかもしれませんが、とりあえず開いてみてください。なんか数字がいっぱいのコードが出現すると思います。

注意！
Windowsの方は「メモ帳」を使わないでください。
いつもHTML等を編集されているエディタ（文字コードUTF-8に対応しているもの）をお使いください。

あと、もう一つ注意なのですが、編集前のSVGファイルは「○○-original.svg」等のように別名で保存しておいた方が良いかもです。
illustrator等で作成したデータをそのまま弄ることになるので、色々失敗しちゃったら画像としてのデータもぐちゃぐちゃになっちゃいます（＞＜）
バックアップを取っておくという意味で、一応元データは残しておきましょう。

実際のSVGコード

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><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 100 250" style="enable-background:new 0 0 79 78.8;" xml:space="preserve" width="300px"><style type="text/css">.mawarutenten{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.5,10.5;}.rinkaku{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}.kuchihige{fill:#BDCCD4;}</style><g id="circle"><circle class="mawarutenten" cx="40" cy="40" r="35"/></g><g id="azarashi"><path class="rinkaku" d="M63.8,39.2c0,21-23.8,21-23.8,21s-24.5,1-23.8-21c0-11.6,10.7-21,23.8-21S63.8,27.6,63.8,39.2z"/><path d="M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0" transform="matrix(0.8853 -0.465 0.465 0.8853 -12.9065 19.4801)" cx="33" cy="35.9" rx="2.3" ry="1.6"/><circle cx="35.5" cy="29.5" r="1"/><ellipse class="kuchihige" transform="matrix(0.9626 -0.2709 0.2709 0.9626 -10.8825 10.269)" cx="31.8" cy="44.5" rx="8.3" ry="5.8"/><ellipse class="kuchihige" transform="matrix(0.2709 -0.9626 0.9626 0.2709 -8.4603 77.9248)" cx="47.2" cy="44.5" rx="5.8" ry="8.3"/><path d="M41.8,41.3c0,0.8,0,1.5-2.7,1.5s-2.7-0.7-2.7-1.5c0-0.8,1.2-1.5,2.7-1.5S41.8,40.5,41.8,41.3z"/><path d="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0" transform="matrix(0.465 -0.8853 0.8853 0.465 -7.6913 59.0782)" cx="45" cy="35.9" rx="1.6" ry="2.3"/><circle cx="43.5" cy="29.5" r="1"/></g></svg>

SVGコード上のオブジェクトの順番はイラレで描いたパス順

SVGコードの中身は、illustratorで描いたパスの順番に各オブジェクトごと出力されています。

先に英数字でレイヤー名・パス名を付けておくと良いかも～～と言いましたが、それがここで活きて来るんですね。

何も名前を付けなかったら、レイヤー名は「id=”レイヤー１”」みたいに日本語で指定されちゃってるし（これはマズイ）、パスやオブジェクトのclass名もst0,st1・・・などと分かりにくい名前に勝手にセットされてしまいます。

レイヤー名等を付け忘れた場合でも大丈夫な方法↓

一度、SVGだけFTPクライアント等でサーバにアップロードしてGoogleChrome等のブラウザ上で開くと、デベロッパーツールでid名（レイヤー名）とclass名（パス・オブジェクト名）がすぐ分かります。おすすめ。

不必要なg（グループ）タグは削除しておく

illustratorでレイヤーを数枚作って保存していた場合、SVGコード上では「gタグ」としてグループ化されています。
id名（元：レイヤー名）が付加されているgタグ以外は、不要なら削除しちゃって大丈夫です。

↓今回削除したgタグはこちら

<g id="circle"><g> <!-- 削除ｫｫｫｫ!!! --><g> <!-- 削除ｫｫｫｫ!!! --><circle class="mawarutenten" cx="39.5" cy="39.5" r="37"/></g> <!-- 削除ｫｫｫｫ!!! --></g> <!-- 削除ｫｫｫｫ!!! --></g>

こんな原始的な方法でgを削除しなくても、もっと楽にgを削除できるツールがありました！
フォロワーさんが教えてくれました。ありがとうございます！！

SVGOMG − SVG画像の軽量化

不要なgを手動で「削除ｫｫｫｫ!!!」している箇所ですが、 SVGOMG https://t.co/dKL3cGssca というツールを使うと、ブラウザ上で不要なgを削除ｫｫｫｫ!!!してくれる上、軽量化できるのでお勧めです。#削除ｫｫｫｫ pic.twitter.com/12a9viTbgq
— 鹿野壮@ICS (@tonkotsuboy_com) May 2, 2017

CSSでstyleを設定する必要のある要素に分かりやすいclass名を振っておく

CSSでスタイルを指定する必要がある要素は、今回はこの3つでした。
イラレでスタイルを設定したものがSVG書き出しの際にCSSとなって保存されたものです。

(1)点々の円　class=”mawarutenten”
破線のスタイルが付与されているからです。
(2)あざらしの輪郭　class=”rinkaku”
楕円形ツールを使いましたが中を透明に指定したからです。
(3)あざらしの口ひげ(?)　class=”kuchihige”
ここだけ水色にカラー指定してるからです。

また、他の要素でも後からエディタ上で色を付けたりする事が出来るのもSVGの良い所ですね。

CSSやアニメーションを付加する

ここからいよいよ、SVGの中身をいじる作業です。わくわく。

各パス・オブジェクトにアニメーションを付けていく

SVGをアニメーションさせる方法は何種類かあるんですが、今回はSVGコード内に直接書く「animate」タグと「animateTransform」タグを使って命令してみました。
CSS3のアニメーションやjavascriptを使わないので、比較的コードも少なくて済むのかな？と思います。

■SVGのアニメーションタグ

animateタグ（平行移動・色を変える等）
animateTransformタグ（図形の変形・回転等）
animateMotionタグ（パスに沿ったモーション等）

■参照―　SVGで図形やアニメを描画してみよう

１．回転のアニメーション（円を回転させる）

どこを回転させてるかというと、あざらしの周りをくるくる回っている点々とした円です。

別に円じゃなくても、あざらし自体を回転させることだってできます。
あざらしが回転したらウゼェなって思ったのでやらなかっただけです。（）

class名【maruitenten】のオブジェクトを回転させる（animateTransformタグ使用）

<!-- 丸い点々の円形オブジェクトを回します --><circle class="mawarutenten" cx="40" cy="40" r="35"> <!-- ←ここの最後の/を削除してます --><animateTransformattributeName="transform" attributeType="XML"type="rotate" from="0,40,40" to="360,40,40"dur="6s" repeatCount="indefinite" /></circle> <!-- ←閉じタグを追加してます -->

上記コードにもコメントしている通り、先に回転のアニメーションをかけたいパス（今回はcircle）の閉じタグを作っておきます。

上記コードのpathタグ最後の[/]を削除
代わりに閉じタグ[</path>]を挿入

ここね、見落としがちだけど必ず/を消してね！

各パラメータの説明

cx=”40″ cy=”40″ r=”35
cxとcyは回転軸（原点）を操作する値。
rは回転する軌道の半径。

type=”rotate” from=”0,40,40″ to=”360,40,40″
type=で動きの指定（今回はrotate=回転）。
from=で始点位置の指定。　from=(回転角:スタート位置,回転軸cx,回転軸cy)
to=で終点位置の指定。　to=(回転角:ゴール位置,回転軸cx,回転軸cy)

■今回は円を自転させているので、回転軸(cx,cy)はすべて同じに設定します。
■スタートが0度　⇒　ゴールが360度　で1回転！いえい！

dur=”6s” repeatCount=”indefinite”
dur=で1回転にかける時間の指定。（6s=6秒）
repeatCount=で繰り返し回数の指定。（今回は”ずっと”なので”indefinite”）

私はこう命令しました
mawarutenten、君は自分を軸にし、6秒かけてゆっくり1回転しなさいよ～～～ずっとよ～～～！

と、こんな感じで円形が回転するアニメーションの実装は完了です👌

２．変形のアニメーション（あざらしの目を瞬きさせる）

次はあざらしちゃんの目を動かして瞬きさせるアニメーションを実装してみましょう。

寝むそうな顔が私にクリソツです。

変形に関しては回転の時よりも多少のひと手間を加えます。

illustratorで変形する形のパスを作る

面倒ですが、もう一度イラレに戻って「閉じた状態の目」のパスを作ります。

まず、目を開けた状態（元々の目）をそのまま変形させます。

注意！
この時、アンカーポイントの数は増やしたり減らしたりしないでください。
アンカーポイントの数が変わると、上手く変形モーションがかからなくなっちゃうそうなのです。

両目が終わったらとりあえず別名で保存。
エディタで開きます。

目を変形させる（animateタグ使用）

いよいよアニメーションさせる編集です。

っとその前に、回転と同じく先に変形のアニメーションをかけたいパスの閉じタグを作っておきます。
(1)一番最後の/を削除し、(2)代わりに閉じタグを追加です！
何度も言って悪いけど、大事だから必ず/を消してね！

<!--両目それぞれ動きを足します--><!--左目のパスここから--><path d="M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0" transform="matrix(0.8853 -0.465 0.465 0.8853 -12.9065 19.4801)" cx="33" cy="35.9" rx="2.3" ry="1.6"><!-- ←ここの最後の/を削除してます --><animateattributeType="XML" attributeName="d"dur="4s" repeatCount="indefinite"values="M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0;M30.7,35.9a2.3,0.6 0 1,0 4.6,0a2.3,0.6 0 1,0 -4.6,0;M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0"></animate></path><!-- ←閉じタグを追加してます --><!--左目のパス終わり--><!--右目のパスここから--><path d="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0" transform="matrix(0.465 -0.8853 0.8853 0.465 -7.6913 59.0782)" cx="45" cy="35.9" rx="1.6" ry="2.3"><!-- ←ここの最後の/を削除してます --><animateattributeType="XML" attributeName="d"dur="4s" repeatCount="indefinite"values="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0;M44.4,35.9a0.6,2.3 0 1,0 1.2,0a0.6,2.3 0 1,0 -1.2,0;M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0"></animate></path><!-- ←閉じタグを追加してます --><!--右目のパス終わり-->

タグ内のd=”M～～”部分が、そもそものオブジェクト自体の形を命令している部分なのですが・・・
このd=”M～～”内のMから始まる数字の羅列を、タグ内のvalues=””に入れていきます。

各パラメータの説明

values=””
バリューという響きの通り、このパラメータでは変形する形の種類を挙げていきます。

<path d="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0" transform="matrix(0.465 -0.8853 0.8853 0.465 -7.6913 59.0782)" cx="45" cy="35.9" rx="1.6" ry="2.3"> <!-- ← d="元の丸い目のパスの形" --><animateattributeType="XML" attributeName="d"dur="4s" repeatCount="indefinite"values="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0; <!-- d="元の丸い目のパスの形" -->M44.4,35.9a0.6,2.3 0 1,0 1.2,0a0.6,2.3 0 1,0 -1.2,0; <!-- d="変形後の目のパスの形" -->M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0 <!-- d="元の丸い目のパスの形" -->/></path> <!-- 追加でpathの閉じタグを作りanimateタグを囲む -->

入れ方はこのとおりです。

values=”元の図形のd;
変形後のd;
（元に戻る場合のみ）元の図形のd;”

変形後のdは、先程別名で保存しておいた変形後データの目の部分のdを取り出してきましょう。

また、回転と同様に一連の変形にかける時間はこのように指定します。
dur=”時間s”

私はこう命令しました
左目～！右目～！早く寝なさ～～い！あっ、ほらもう寝ないからすぐ朝になっちゃったでしょ～～1日は4秒なんだからね！毎日寝るのそして起きるの！ずっとよ～～～！

これで目を瞬きさせるアニメーションの付与は完了です。
お疲れ様でした！！😭

動作確認！ちゃんと動くかな？

HTML埋め込み版のDEMO

やった～～～～～！動いた～～～～！！！😭😭😭😭😭

出来たアニメーションのSVGコード

最終的にこうなりました～～

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><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 100 250" style="enable-background:new 0 0 79 78.8;" xml:space="preserve" width="300px"><style type="text/css">.mawarutenten{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.5,10.5;}.rinkaku{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}.kuchihige{fill:#BDCCD4;}</style><g id="circle"><circle class="mawarutenten" cx="40" cy="40" r="35"><animateTransformattributeName="transform" attributeType="XML"type="rotate" from="0,40,40" to="360,40,40"dur="6s" repeatCount="indefinite" /></circle></g><g id="azarashi"><path class="rinkaku" d="M63.8,39.2c0,21-23.8,21-23.8,21s-24.5,1-23.8-21c0-11.6,10.7-21,23.8-21S63.8,27.6,63.8,39.2z"/><path d="M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0" transform="matrix(0.8853 -0.465 0.465 0.8853 -12.9065 19.4801)" cx="33" cy="35.9" rx="2.3" ry="1.6"><animateattributeType="XML" attributeName="d"dur="4s" repeatCount="indefinite"values="M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0;M30.7,35.9a2.3,0.6 0 1,0 4.6,0a2.3,0.6 0 1,0 -4.6,0;M30.7,35.9a2.3,1.6 0 1,0 4.6,0a2.3,1.6 0 1,0 -4.6,0"></animate></path><circle cx="35.5" cy="29.5" r="1"/><ellipse class="kuchihige" transform="matrix(0.9626 -0.2709 0.2709 0.9626 -10.8825 10.269)" cx="31.8" cy="44.5" rx="8.3" ry="5.8"/><ellipse class="kuchihige" transform="matrix(0.2709 -0.9626 0.9626 0.2709 -8.4603 77.9248)" cx="47.2" cy="44.5" rx="5.8" ry="8.3"/><path d="M41.8,41.3c0,0.8,0,1.5-2.7,1.5s-2.7-0.7-2.7-1.5c0-0.8,1.2-1.5,2.7-1.5S41.8,40.5,41.8,41.3z"/><path d="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0" transform="matrix(0.465 -0.8853 0.8853 0.465 -7.6913 59.0782)" cx="45" cy="35.9" rx="1.6" ry="2.3"><animateattributeType="XML" attributeName="d"dur="4s" repeatCount="indefinite"values="M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0;M44.4,35.9a0.6,2.3 0 1,0 1.2,0a0.6,2.3 0 1,0 -1.2,0;M43.4,35.9a1.6,2.3 0 1,0 3.2,0a1.6,2.3 0 1,0 -3.2,0"></animate></path><circle cx="43.5" cy="29.5" r="1"/></g></svg>

作ったアニメーションSVGはこういうコードで簡単に表示できます。

<img src="azarashi2.svg" width="200" height="200">

（※配布はしてませんよ！）

作ってみて。

はぁ～～～～やってやりました、ここまできました！！やったやった！！
記事ではサラッと書いてますが、これを動かすまでめっちゃしんどかったんです、、、私の理解不足のせいですけど。。。
回転アニメーションなんか、回転軸を定めるのが分からなさ過ぎて、アザラシを太陽として地球の公転みたいに円ごと回ってましたからね笑。