5分で簡単にできる!SVGアニメーションの基本
*SVG(Scalable Vector Graphics)*と呼ばれる画像形式が注目を集めています。
PNGやJPG、GIFなどのようなビットマップ形式のデータでは、拡大すると縁がギザギザしてしまいます。
一方、SVGのようなベクター形式のデータは、ピクセルに色を塗るのではなく数式によって画像を表現できるので、拡大してもハッキリと見ることができます。
さらにSVGの使用を加速させている理由が、SVGにはGIFのようにアニメーションを表示できるということです。
アニメーションは動きがある分ユーザーの目を引くことができますが、それだけでなく滑らかで美しいアニメーションになるので、SVGアニメーションを使っているだけで他のサイトに比べて大きな差別化となります。
SVGアニメーションは作るのが難しいと思われがちですが、HTMLに慣れている人であればそれほど難しいものではありません。
なぜなら、SVGは一般的にXML形式のデータで保存されているので、コツさえつかめれば、特別なソフトなどがなくとも、簡単にアニメーションを加えることができるのです。
今回は、簡単に実装できるSVGアニメーション実装の基本をご紹介します。
複雑なアニメーションを実装することもできますが、そのためにはまず基本を押さえておくことが非常に重要になります。
手順を理解して、ユニークなアニメーションを作成していきましょう。
5分でできるSVGアニメーションの基本
SVGは*「いくら拡大してもギザギザしない」というメリットがありますが、その他にも「テキストベース(XML形式)で編集ができる」「CSSやjQueryを含むJavaScriptで操作することができる」*という他の画像形式にはない利点があります。
この後者の点を活用することで、CSSやJavaScriptを使ってアニメーションを表示することができるようになります。
ただし、この実装方法は、InternetExplorerでは対応していません。
IEで表示する場合はJavaScriptなどを使って代替画像を用意するのがよいでしょう。
SVGファイルの中身
ここでは、最も簡単なCSSアニメーションを使った実装方法をご紹介していきます。
SVGは、HTMLと同じような形式(XML形式)で出力されたデータを使って描画をしているため、各種タグの集合になっています。
そのsvgタグで囲まれた部分の中にあるpathやrect、circleタグが、SVGの実際の構成要素になります。
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 80" style="enable-background:new 0 0 200 80;" xml:space="preserve">
<style type="text/css">
.st0{enable-background:new ;}
.st1{fill:none;stroke:#6183FF;}
</style>
<g class="st0">
<path class="st1" d="M40.3,61.1V37.6h-4v-3.6h4v-2.9c0-1.8,0.2-3.2,0.5-4c0.4-1.2,1.2-2.1,2.3-2.9c1.1-0.7,2.7-1.1,4.7-1.1 c1.3,0,2.7,0.2,4.3,0.5l-0.7,4c-0.9-0.2-1.8-0.3-2.7-0.3c-1.4,0-2.4,0.3-2.9,0.9c-0.6,0.6-0.9,1.7-0.9,3.3v2.5h5.3v3.6h-5.3v23.4 H40.3z"/>
<path class="st1" d="M72.2,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4c-2,1.5-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6 s-3.5-5.8-3.5-10.2c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7S77,43.1,77,47.5c0,0.3,0,0.7,0,1.2H56.9 c0.2,3,1,5.2,2.5,6.8c1.5,1.6,3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3C70.5,55.7,71.5,54.3,72.2,52.4z M57.2,45h15.1 c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6c-2.1,0-3.9,0.7-5.3,2.1C58.1,40.8,57.3,42.6,57.2,45z"/>
<path class="st1" d="M82.6,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2 c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9c-0.8,0.6-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H82.6z"/>
<path class="st1" d="M99.9,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2 c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9s-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H99.9z"/>
<path class="st1" d="M135.7,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4s-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6s-3.5-5.8-3.5-10.2 c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7s3.4,5.9,3.4,10.4c0,0.3,0,0.7,0,1.2h-20.1c0.2,3,1,5.2,2.5,6.8 s3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3S135,54.3,135.7,52.4z M120.7,45h15.1c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6 c-2.1,0-3.9,0.7-5.3,2.1S120.9,42.6,120.7,45z"/>
<path class="st1" d="M156.1,57l0.7,4c-1.3,0.3-2.4,0.4-3.5,0.4c-1.7,0-2.9-0.3-3.9-0.8s-1.6-1.2-1.9-2.1s-0.6-2.7-0.6-5.4V37.6 h-3.4v-3.6h3.4v-6.7l4.5-2.7v9.4h4.6v3.6h-4.6v15.8c0,1.3,0.1,2.1,0.2,2.5s0.4,0.7,0.8,0.9s0.9,0.3,1.6,0.3 C154.7,57.1,155.3,57.1,156.1,57z"/>
</g>
</svg>
これらのタグは、stroke(線)やfill(塗りつぶし)プロパティで制御ができるようになっています。
CSSアニメーションの設定
それではまず、SVGアニメーションを動かすための土台に設定を行っていきます。
SVGとクラス名を揃え、fill、strokeの設定を行っていきます。
この後設定するアニメーション名を「hello」として、アニメーションの設定も忘れずに行います。
.st1{
fill:#0060e6;
stroke:#0060e6;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: hello 4s ease-in 0s;
animation: hello 4s ease-in 0s;
}
土台の設定ができたら、今度はアニメーションの設定を行います。
@-webkit-keyframes hello {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
40% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#0060e6;
}
}
ここまでに「stroke-dasharray」と「stroke-dashoffset」が登場してきましたが、これはそれぞれ線の「感覚」と「位置」を指定していくものです。
パスの長さよりも多めに指定しても大丈夫なので、デモでは多めに2000を設定しています。
デモ
以上のように設定すると、このように線が表示され、その後中の塗りが行われるアニメーションが完成します。
もちろん、数値などの設定を変えることで、簡単に設定の変更を行うこともできます。
See the Pen svganime by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
(アニメーションがうまく表示されない場合は「Rerun」を押して再起動してみてください)
まとめ
この他にも、hoverをきっかけにアニメーションさせたり、animationではなくtransitionを使用することも可能です。
SVGは現在、多くのブラウザで対応しており、CSSを設定してレンスポンシブ対応すれば、スマートフォンでも表示することが可能です。
また、今回はロゴを使った簡単なアニメーションで動かしてみましたが、その他にも図形を使って制作されたキャラクターのアニメーションなども動かすことができます。
SVGでアニメーションを実装するのが簡単だと感じてくれたらうれしい限りです。
ぜひ、SVGを使ったアニメーション作成に挑戦してみてくださいね。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング