【Xd】XdからSVGデータの書き出し〜SVGアニメーションまでを紹介【CSS】
こんにちは。NNCの中里です。
今回はグラフィックソフト（Xd）で作成・書き出しをしたSVGデータを、CSSでアニメーションをするまでの流れを紹介します。
ロゴやイラストをCSSでアニメーションさせる際に「SVGアニメーションを使って表現する」なんて話を聞いたことがあるのではないでしょうか。
中には「SVGアニメーションって難しそう・・・」と考える方も少なくないので、本日はそんな皆さんのために分かりやすく解説したいと思います！
目次
SVGとは
まずは「SVGって何？どんな特徴？」という方に説明をします。
SVG（Scalable Vector Graphics）は、Webブラウザに対応したベクターファイル形式になります。
ベクターファイルって何？という方はIllustratorやXdで作成したパスをイメージしてください。
JPEGやPNGはビットマップデータのため拡大などすると画像が荒くなってピクセルが見えてしまいますが、SVGはベクターデータであるため拡大や変形をしても画像が荒くならないという点が大きな特徴です。（PhotoshopでJPEGやPNGの画像を拡大すると荒くなりますが、IllustratorやXdで作った図形を拡大しても荒くならないのと同様の原理です）
SVGを使用することで、Web上で画質を保ったまま拡大や変形の表現が行えます！
Xdで作成したデータをSVGに書き出す
SVGについて説明ができたので、続いてXdで作ったイメージをSVGに書き出す流れを紹介します。
まずはアートボードに好きなイメージを作成しましょう。
続いて「ファイルメニュー」「書き出し」と進み「全てのアートボード」を選択します。
アートボードサイズごと書き出すことになるため、アートボードのサイズをオブジェクトのサイズに合わせることをお勧めします。（合わせなかった場合、オブジェクト周辺に余白が表示されます）
※アートボード上にある特定のオブジェクトのみ書き出す場合は、該当オブジェクトを選択してから「選択したオブジェクト」を選んでください。
次の画面でファイル名を指定し、フォーマットを「SVG」に設定します。
XdからSVGに書き出す手順は以上です。
思ったよりも簡単ですよね！
エディタソフトでSVGを開く
続いてエディタソフトを立ち上げてください。
弊社ではVS Codeを使用していますが、エディタソフトの種類は問いません。
立ち上がったら「ファイルを開く」コマンドを実行し、先ほどのSVG画像を開いてみましょう。
知らない方も多いのですが、SVGデータはそのままエディタソフトで開くことができます。
内容を見てみるとSVGタグを始めとする様々なタグや属性が記述されていると思います。
この記述によって先ほど作ったイメージを描画してくれるわけですね。
ここに表示されているSVGの開始タグから終了タグまでが必要な記述になるので、コピーをしておきましょう。
次に新規でHTMLドキュメントを作成します。（既に作成中のページがある場合、該当ページのHTMLファイルを開いてください）
先ほどコピーをしておいたSVGの開始タグから終了タグまでをbody要素内に貼り付けましょう。
この段階で保存をしてブラウザでプレビューしていただくと、ページ上にSVGのイメージが表示されるはずです！
ここまでのコードは以下のようになります。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
さて、ここからいよいよアニメーションさせたいと思います！
まずは貼り付けたコード内に fill=”#f00” (#f00部分はオブジェクトの色によって異なります) という属性を持つ要素が複数あると思います。
文字検索などかけてもらうと該当の要素をまとめて検索できると思います。
この要素がオブジェクトを作っているコードになりますので、cssから操作ができるよう該当要素全てに任意のclass名を付けましょう。（ここではlogoと付けます）
HTMLの編集はこれで以上になります。
続いてCSSを作成しましょう。
ここでまず先ほど指定したクラスでスタイルの操作ができる確認をします。
該当クラスに対してfillプロパティで任意の色指定をしてみてください。（ここでは#000とします）
.logo{
fill:#000;
}この段階でブラウザでプレビューを行い、色が変わっていることが確認できればOKです！
これで該当クラスに対してCSSからスタイルの指定が行えることが確認できました。
最後にCSSでアニメーションの指定を行ってみたいと思います。
コピペでOK！CSSによるSVGアニメーション
CSSのanimationプロパティを使用して様々なアニメーション表現が行えます。
animationプロパティについてはこちらの記事で解説を行っています。
色が変化するアニメーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
fillプロパティで色を調整してアニメーションをさせています。
色数を増やしたい場合は、0%と100%の間に50%などを追加して指定しましょう！
不透明度が変化（点滅）するアニメーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
opacityプロパティで不透明度を調整して点滅をさせています。
拡大・縮小のアニメーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
大きさはSVG要素に対して指定を行います。
ここではtransformプロパティのscaleで大きさを指定しています！
まとめ
今回はグラフィックソフトで作成したロゴをSVGに書き出し〜HTMLに貼り付け〜CSSでアニメーションまでの流れを紹介しました。
思っていたよりも簡単な操作や記述でアニメーションさせることができたのではないでしょうか。
animationプロパティを深く理解すれば、さらに色々なアニメーション表現も行うことができます！
皆さんのサイトに魅力的なアニメーション表現を取り入れてみてください。
animationプロパティをしっかり学びたい方はこちら！
