アイコンなどの画像素材はビットマップ画像では拡大した時にぼやけたり、データサイズが大きくなったりしますが、SVG形式にすることでそれらの問題が解決するというメリットがあります。またそれだけではなく、パスを変形させることもできます。今回はXML形式になっているSVGデータを編集することでアニメーションをつけていきたいと思います。  

XML形式になっているSVGデータの構成

SVGはベクター形式のグラフィックデータで、XML形式のテキストデータで構成されています。SVGデータをテキストエディタで開くと中身を確認することができます。以下は基本的なパスオブジェクトのSVGデータです。 【sample.svg】

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300">
   <g fill="none">
     <path fill="#00C7BD" d="M133.800809,74.5781258…3502 L133.800809,74.5781258 Z">
     </path>
   </g>
</svg>

  見慣れない要素がいくつかありますが、まず、svgタグにあるxmlns属性で名前属性の定義をしています。またviewBox属性では、svgオブジェクトの描画領域を指定しています。   そして、gタグは各ベクター形式のオブジェクトを包括するグループを示します。pathタグはパスで描かれたベクターオブジェクト本体になります。fill属性はオブジェクトの塗りの色が指定され、d属性でパスの座標データが格納されています。その他詳しい要素についてはまた別記事でまとめていきたいと思いますので、今回は省略します。  

animateタグでパスを変形させたSVGにアニメーションをつける

pathタグ内にアニメーションを定義できるanimateタグを使うことでSVGオブジェクトにアニメーション効果をつけていきます。このanimateタグにはいくつかの属性があり、これらの値でオブジェクトを操作していきます。いろんな操作ができるのですが、今回はサンプルとしてパスの変形アニメーションを行なっていきます。 【sample.svg】

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300">
   <g fill="none">
     <path fill="#00C7BD" d="M133.800809,74.5781258…3502 L133.800809,74.5781258 Z">
       <animate
         attributeType="XML"
         attributeName="d"
         dur="5s"
         repeatCount="indefinite" 
         values="[d属性のパスデータ1];[d属性のパスデータ2];[d属性のパスデータ3]"/>
     </path>
  </g>
</svg>

  順番にコードを見ていきます。まずpathタグ内にanimateタグを入れます。そして「attributeType」属性には「XML」の値を入れます。CSSで操作する場合には「CSS」の値を入れます。次に「attributeName」属性には操作するオブジェクトの属性を入れます。今回はpathタグのd属性を操作するので「d」と指定します。   続いて「dur」属性にはアニメーションにかかる時間を指定します。この時間がループの基準時間となります。「repeatCount」にはリピートする回数を整数値もしくは無限にループさせる場合には「indefinite」と指定します。   最後にvalues属性で、操作する属性の値を入れていきます。それぞれの属性をセミコロン（；）で区切るとその区切った値ごとに順番に実行していきます。この値を出す時にはIllustratorやSketchなどで実際にパスを変形させてSVGデータで書き出すと簡単です。   これで、ブラウザで確認すると実際にSVGオブジェクトにアニメーションがかかっているのが確認できます。ただし、この方法ですとIEやEdgeでは確認できませんので、javascriptを使った実装方法を採用する必要があります。その方法についてはまた後日まとめていきたいと思います。今回のサンプルはこちらに用意していますのでご参考にどうぞ！   （参考にさせて頂いたサイト様） 「10分でわかるSVG 応用編」サンプル