SVG（Scalable Vector Graphics）は、ウェブ上で使用される人気のあるベクター画像形式であり、SMIL（Synchronized Multimedia Integration Language）は、SVGのアニメーションを作成するための技術です。この記事では、SMILを使用してSVG画像を動的にアニメーション化する方法について詳しく解説します。
1. SMILとは何か？
SMILは、マルチメディアの同期と統合のための言語で、SVGと組み合わせてアニメーションを作成するために使われます。SMILを使用することで、SVGの要素を指定されたタイミングで動かしたり、変形させたり、色を変えたりすることができます。これにより、インタラクティブで視覚的に魅力的なコンテンツをウェブページ上に表示できます。
2. SMILを使ったSVGアニメーションの基本構造
SVGファイル内でSMILを使用してアニメーションを作成するには、まず基本的なSVGファイルを準備します。以下は、基本的なSVGファイルの構造です。
上記の例では、cx）を2秒間で50から150に移動させるアニメーションが設定されています。このアニメーションは無限に繰り返されます。
主な要素:
-
attributeName: アニメーションさせたい属性名（ここではcx）。 -
from: アニメーションの開始値。 -
to: アニメーションの終了値。 -
dur: アニメーションの持続時間。 -
repeatCount: アニメーションを繰り返す回数（indefiniteで無限に繰り返し）。
3. SMILアニメーションの主なプロパティ
SMILを使うと、SVG要素に対してさまざまなアニメーションを適用できます。以下は代表的なプロパティとその役割です。
3.1. animate 要素
animate 要素は、SVG内の特定の属性をアニメーションさせるために使用されます。以下のように、animate 要素を使って複数の属性をアニメーション化できます。
この例では、fill 属性（図形の塗り色）を赤から緑に変更します。アニメーションは3秒間続き、その後無限に繰り返されます。
3.2. animateTransform 要素
animateTransform は、SVGのオブジェクトに変換（回転、スケーリング、移動など）を適用するために使用されます。
この例では、中心座標(50, 50)を中心にオブジェクトを回転させています。回転は0度から360度まで行われ、4秒ごとに繰り返されます。
4. SMILのタイミングと同期
SMILでは、アニメーションのタイミングを細かく制御することができます。主なタイミング属性には以下のものがあります。
4.1. begin と end
begin と end 属性を使うことで、アニメーションが開始する時間や終了する時間を指定できます。
この例では、アニメーションは0秒で始まり、5秒で終了します。
4.2. repeatCount と repeatDur
repeatCount はアニメーションの繰り返し回数を指定し、repeatDur はアニメーションの継続時間を指定します。
ここでは、アニメーションが3回繰り返されるよう設定されています。
5. 複数のアニメーションを組み合わせる
SMILでは、1つのSVG要素に複数のアニメーションを適用することもできます。これを実現するためには、
この例では、cx）と垂直方向（cy）に移動します。
6. SMILの制限と代替
SMILは非常に強力なアニメーションツールですが、すべてのブラウザで完全にサポートされているわけではありません。特に、Internet ExplorerではSMILがサポートされていないため、SMILを使用する際には代替手段としてCSSアニメーションやJavaScriptを併用することが推奨されることもあります。
7. 結論
SMILを使用したSVGのアニメーションは、ウェブコンテンツに動的で魅力的な要素を加えるための優れた方法です。複雑なアニメーションを直感的に記述できるSMILは、タイミングや同期を細かく制御できるため、アニメーションに豊かな表現を与えることができます。ブラウザ互換性の問題を避けるために、使用する際には対応ブラウザを確認し、必要に応じて他の技術と併用することをお勧めします。
