ロゴをリッチに！？SVGアニメーションの簡単作成

サツキ: トリック or トリート！とりあえずお菓子ください。

皆さん、こんにちは。サツキです。

今回は、SVGアニメーションの話をしようと思います。

「SVGアニメーション」と聞いて難しいのでは？と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。

この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。

そもそもSVGとは？

SVG（Scalable Vector Graphics）とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。
WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット（点）の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。
一方、ベクターデータは点や線などの情報を数値化し演算によって画像を再現するため拡大・縮小によって画質が落ちることがないことが大きな特徴です。

SVGファイルの作成方法は？

今回は、「Adobe Illustrator」を使って作成してみようと思います。

1. 新規ドキュメントを作成

Illustratorを開いたら、一番上にあるメニューの中の「ファイル」→「新規」を選択して下さい。
新規ドキュメントの作成画面が立ち上がるので、作成したいサイズを幅・高さに設定したうえで「作成」ボタンを押してください。

2. イラストを作成

先ほど作成したアートボード上に、実際に図形やテキストを作成してください。

3. アウトラインを作成

イラストが完成したら、最後にすべてのオブジェクトをアウトライン化しておいてください。
・テキスト：一番上にあるメニューの中の「書式」→「アウトラインを作成」を選択
・テキスト以外：一番上にあるメニューの中の「オブジェクト」→「パス」→「パスのアウトライン」を選択

4. SVG形式で保存

一番上にあるメニューの中の「ファイル」→「保存」を選択して下さい。
ファイルの保存の画面が立ち上がるので、「ファイルの種類」を「SVG」を選んで「保存」ボタンを押してください。

SVGファイルの調整

Illustrator等のツールを使い作成されたSVGデータには不要な情報が含まれている場合があります。
必ず調整をしなければいけないということはありませんが、調整しておくとソースの可読性が上がるうえにファイルサイズも縮小できるかと思いますので調整することをお勧めします。

SVG00

参考までに上で表示しているSVG画像のソースを下に記載しておきます。
作成したSVGを下のコード参考に調整してみてください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1740 577">
  <g id="wrap_all" data-name="SVG全体をグループ">
    <path data-name="ロゴパーツ 下" d="M299,223H251v36h48V391H155V259h36V223H155c-28.4,0-36,7.6-36,36V391c0,28.4,7.6,36,36,36H299c28.4,0,36-7.6,36-36V259C335,230.6,327.4,223,299,223Z"/>
    <path data-name="ロゴパーツ 上" d="M383.5,140.5h-144c-28.4,0-36,7.6-36,36v132c0,28.4,7.6,36,36,36h48v-36h-48v-132h144v132h-36v36h36c28.4,0,36-7.6,36-36v-132C419.5,148.1,411.9,140.5,383.5,140.5Z"/>
    <path data-name="ロゴテキスト D 01" d="M562.5,239.5c41.22,0,51,18,51,51,0,35.08-11.07,52-53,52h-26v63h26c37.21,0,55.37-1.85,79-25s38-53.38,38-90c0-38.27-10.36-66.67-38-89-23.27-18.66-35.89-25-77-25h-89v229h51v-166Z"/>
    <path data-name="ロゴテキスト E 01" d="M775.5,263.5c-17.72,0-17.44-26,0-26h38v-63h-51c-24.1,0-38.1-.36-51.39,12.39S686.5,214.35,686.5,237.5v90c0,24,10.55,51.69,24.61,64.39s37.81,11.61,64.39,11.61h38v-63h-38c-18,0-17.42-26,0-26h38v-51Z"/>
    <path data-name="ロゴテキスト Z 01" d="M824,175v63h77L824,404h192V341H939l77-166Z"/>
    <path data-name="ロゴテキスト D 02" d="M1114.5,237.5c41.22,0,51,18,51,51,0,35.08-9.07,52-51,52h-28v63h28c37.21,0,53.37-1.85,77-25s38-53.38,38-90c0-38.27-10.36-66.67-38-89-23.27-18.66-35.89-25-77-25h-89v229h51v-166Z"/>
    <path data-name="ロゴテキスト E 02" d="M1327.5,263.5c-17.72,0-17.44-26,0-26h38v-63h-51c-24.1,0-38.1-.36-51.39,12.39s-24.61,27.46-24.61,50.61v90c0,24,10.55,51.69,24.61,64.39s37.81,11.61,64.39,11.61h38v-63h-38c-18,0-17.42-26,0-26h38v-51Z"/>
    <path data-name="ロゴテキスト Z 03" d="M1377,174v63h77l-77,166h192V340h-77l77-166Z"/>
  </g>
</svg>

上記のSVGコードを簡単に説明します。

xmlns=”http://www.w3.org/2000/svg”
SVG名前空間宣言と呼ばれるものです。

viewBox=”x（左上のx座標）, y（左上のy座標）, width（画像の幅）, height（画像の高さ）”
こちらを正しく指定しておくことでレスポンシブに対応できるようになります。

<g>
オブジェクトをグループ化するためのタグになります。

<path>
d属性の中のパスデータを基に図形を描画するタグです。

<defs>
後で再利用できるよう描画オブジェクトを定義するためのタグとなりますが、今回はこの中で<style>を記載して使用します。<svg>ファイル内に直接CSSを記載する場合にはこの中で記載します。
もし、HTML内に直接<svg>を埋め込む場合には<defs>内にCSSを書くのではなく、外部のCSSファイルにスタイルを記載する方がいいかと思いますが、今回はSVGファイルにCSS（アニメーション）を含めることでそれ単体で完了できる形で作成したいと思います。
上のコードでは使用されてはいませんが、この後SVGにアニメーションをつける際に使用します。

SVGにアニメーションをつける

それでは実際にSVGにアニメーションを設定してみます。
最初に説明したようにアニメーションはCSSのみで設定します。

SVG01

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1740 577">
  <defs>
    <style>
      #wrap_all path {
        fill: #111;
        stroke: #111;
        stroke-width: 2px;
        animation: svg 5s ease-in both infinite;
      }
      @keyframes svg {
        0% {
          fill: transparent;
          stroke-dasharray: 2000px;
          stroke-dashoffset: 2000px;
        }
        20%{
          stroke-dashoffset: 0;
        }
        30%{
          fill: transparent;
        }
        50%{
          fill: #111;
        }
      }
    </style>
  </defs>
  <g id="wrap_all" data-name="SVG全体をグループ">
    <!--  PATH 情報 省略 -->
  </g>
</svg>

上記のSVGコードを簡単に説明します。

fill
オブジェクトの塗りつぶしの色を指定します。

stroke
オブジェクトのアウトライン（線）の色を指定します。

stroke-width
オブジェクトのアウトライン（線）の太さを指定します。

troke-dasharray
オブジェクトのアウトライン（線）の間隔を指定します。
10pxと指定すると10pxの線のあとに10pxの隙間が生まれ、「ー　ー　ー　」といった形になります。

stroke-dashoffset
オブジェクトのアウトライン（線）の開始位置を指定します。

animation
要素に@keyframesアニメーションに関するプロパティをまとめて指定できます。

@keyframes
キーフレーム（0%, 30%, 100%といった）にスタイルを定義することでアニメーションを指定します。

パスの数だけ@keyframesアニメーションを作成し、それぞれstroke-dashoffsetを変化させるタイミングをずらせは下のようなアニメーションも簡単に作成できます。

SVG01

まとめ

CSSによるSVGアニメーションについて簡単に解説してみましたが、いかがでしたか？
それほど難しくはないと思いますので是非一度挑戦していただければと思います。
ちなみにですが、今回作成したSVGのロゴは以下のサイトのものになります。
→ DEZDEZ（採用サイトリンク集）

コラム