0%

Programmingプログラミングナレッジ

Posted:2018.03.19

XML形式のデータ編集でパスを変形させるSVGアニメーションを実装

アイコンなどの画像素材はビットマップ画像では拡大した時にぼやけたり、データサイズが大きくなったりしますが、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 応用編」サンプル

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】