動き出すSVG - アニメーション入門

SVGの魅力は、静的な美しいグラフィックを描けることだけではありません。SVG要素に動きや変化を与える「アニメーション」を加えることで、ウェブページをより魅力的でインタラクティブにすることができます。SVGアニメーションを実現する方法はいくつかありますが、このページでは主にSVGの仕様に組み込まれているSMIL (Synchronized Multimedia Integration Language) を中心に、CSSやJavaScriptを使った方法も比較しながら学んでいきましょう。

SMILによるSVGアニメーション

SMIL（「スマイル」と読みます）は、XMLベースの言語で、SVGファイル内に直接アニメーションを記述することができます。外部のスクリプトやスタイルシートが不要なため、手軽にアニメーションを始められるのが特徴です。

`<animate>` - 属性をアニメーション

<animate> 要素は、SVG要素の単一の属性値を時間経過とともに変化させます。

attributeName: アニメーションさせる属性名 (例: x, fill, r, opacity)。
from: 属性の開始値。
to: 属性の終了値。
values: セミコロン区切りで複数の値を指定し、キーフレームのように変化させます (例: "0;100;0")。from/to とは排他的。
dur: アニメーションの期間 (例: "5s", "500ms")。
begin: アニメーション開始タイミング (例: "0s", "click", "animId.end + 1s")。
repeatCount: 繰り返し回数 (数値、または "indefinite" で無限)。
fill: アニメーション終了後の状態 ("remove": 元に戻る(デフォルト), "freeze": 最終状態で停止)。

`<animate>` デモ (円の半径と色)

期間 (dur): 3s

半径from: 10

半径to: 40

fill (色):

繰り返し (repeatCount):

上のデモでは、左の円が半径と色を自動でアニメーションし、右の緑の円は「Click Me!」の矩形をクリックすると半径がアニメーションします。

`<animateTransform>` - 変形をアニメーション

transform 属性をアニメーションさせます。移動、回転、拡大縮小などの変形を時間経過で変化させることができます。

type: 変形の種類 ("translate", "scale", "rotate", "skewX", "skewY")。

`<animateTransform>` デモ (回転)

期間 (dur): 5s

from (角度): 0

to (角度): 360

from と to の値は "角度回転中心X 回転中心Y" の形式です。

`<animateMotion>` - パスに沿った動き

要素を指定したパスに沿って移動させます。

path: SVGパスデータ (例: "M0,0 L100,100")。
または、子要素として <mpath xlink:href="#pathId"/> を持ち、外部パスを参照します。
rotate: "auto", "auto-reverse", または角度。パスの向きに要素を自動回転させるか。

`<animateMotion>` デモ

期間 (dur): 6s

パスデータ (d):

rotate:

<set> 要素は、指定した時間に属性値を即座に変更します（アニメーションというより遅延設定）。

SMILはイベント連携（例: begin="elementId.click"）や、他のアニメーションの終了をトリガーにした同期も可能です。

注意: SMILは強力ですが、過去に一部ブラウザ (特にInternet Explorerや古いEdge) でのサポートが打ち切られた経緯があり、一時期は非推奨と見なされることもありました。しかし、現在の主要モダンブラウザ (Chrome, Firefox, Safari) では概ね良好にサポートされています。プロジェクトの対象ブラウザを考慮して採用を検討してください。

CSSによるSVGアニメーション

CSSのトランジション (transition) やアニメーション (@keyframes と animation プロパティ) を使って、SVG要素のスタイルプロパティをアニメーションさせることができます。fill, stroke, opacity, transform など、多くのSVGプレゼンテーション属性はCSSプロパティとしても扱えるため、これらを対象にできます。

CSSアニメーションは、ブラウザのハードウェアアクセラレーションの恩恵を受けやすく、SMILよりも複雑なイージング関数が使えるなどの利点があります。

CSSアニメーションデモ (ホバーとキーフレーム)

上のデモでは、左の矩形はCSSトランジションでホバー時に色と変形が変化し、右の円はCSSキーフレームアニメーションで脈動します。

JavaScriptによるSVGアニメーション

JavaScriptを使うと、SVG要素の属性やスタイルをフレームごとに細かく制御し、最も柔軟でインタラクティブなアニメーションを実現できます。requestAnimationFrame() を使うのが一般的です。また、Web Animations API (WAAPI) や、GreenSock (GSAP), Snap.svg, Anime.js といった強力なライブラリも利用できます。

JavaScriptアニメーションデモ (GSAP例)

このデモでは、GSAPライブラリを使って円をインタラクティブにアニメーションさせます。(GSAPのCDN読み込みが必要です)

GSAPのようなライブラリは、複雑なシーケンスアニメーションや物理ベースのアニメーションを簡単に実装できる強力なツールです。

どのアニメーション方法を選ぶか？

方法	長所	短所	適した用途
SMIL	SVG内で完結、宣言的、シンプル	一部ブラウザでのサポート経緯、複雑なロジック不可	単純な属性変化、ループアニメーション
CSS	広くサポート、ハードウェアアクセラレーション、CSS知識活用	複雑な属性(path d等)のアニメーション不可	UI要素のホバーエフェクト、状態変化、装飾的アニメーション
JavaScript	最高度の柔軟性、複雑なロジック、インタラクション連携、ライブラリ利用	コード量増加、SVG構造の理解必要	高度なインタラクション、ゲーム、データ可視化、複雑なシーケンス

豆知識 (English/日本語)

Did you know? While SVG animations are powerful, animating too many elements or complex properties (like path data with many points) can sometimes impact browser performance. It's often beneficial to keep animations smooth by targeting simpler properties like `transform` and `opacity` where possible, as browsers can often optimize these better (hardware acceleration).

知っていましたか？SVGアニメーションは強力ですが、あまりにも多くの要素や複雑なプロパティ（例えば、多数の点を持つパスデータなど）をアニメーションさせると、ブラウザのパフォーマンスに影響を与えることがあります。可能な限り `transform` や `opacity` のような単純なプロパティを対象にすることで、アニメーションを滑らかに保つことがしばしば有益です。ブラウザはこれらをより良く最適化できる（ハードウェアアクセラレーション）場合が多いためです。

まとめ

SVGアニメーションには、SMIL、CSS、JavaScriptという主に3つのアプローチがあり、それぞれに長所と適した場面があります。SMILは手軽にSVG内で完結したアニメーションを実現でき、CSSはスタイルベースのアニメーションに強く、JavaScriptは最高の柔軟性を提供します。

作りたいアニメーションの種類、インタラクションの必要性、対象ブラウザなどを考慮して、最適な方法を選択しましょう。次は、「触って楽しい - インタラクティブSVG」で、ユーザーの操作に反応するSVGの作り方を見ていきます。

このページの要約

日本語

SVGアニメーションは、主にSMIL、CSS、JavaScriptの3つの方法で実現できます。SMILはSVG内に<animate>, <animateTransform>, <animateMotion>といった要素を記述し、宣言的にアニメーションを作成します。CSSトランジションやキーフレームアニメーションは、SVG要素のスタイルプロパティを時間変化させます。JavaScriptは最も柔軟性が高く、requestAnimationFrameやライブラリ(GSAP等)を使い、複雑なインタラクションや動的なアニメーションを可能にします。各方法にはメリット・デメリットがあり、用途に応じて選択します。

English

SVG animation can be achieved primarily through three methods: SMIL, CSS, and JavaScript. SMIL uses elements like <animate>, <animateTransform>, and <animateMotion> within SVG to declaratively create animations. CSS transitions and keyframe animations alter SVG element style properties over time. JavaScript offers the most flexibility, using requestAnimationFrame or libraries (like GSAP) for complex interactions and dynamic animations. Each method has pros and cons, dictating its suitability for different use cases.

Español

La animación SVG se puede lograr principalmente mediante tres métodos: SMIL, CSS y JavaScript. SMIL utiliza elementos como <animate>, <animateTransform> y <animateMotion> dentro de SVG para crear animaciones de forma declarativa. Las transiciones CSS y las animaciones de fotogramas clave alteran las propiedades de estilo de los elementos SVG con el tiempo. JavaScript ofrece la mayor flexibilidad, utilizando requestAnimationFrame o bibliotecas (como GSAP) para interacciones complejas y animaciones dinámicas. Cada método tiene ventajas y desventajas, lo que determina su idoneidad para diferentes casos de uso.

中文

SVG动画主要可以通过三种方法实现：SMIL、CSS 和 JavaScript。SMIL 在 SVG 内部使用诸如 <animate>、<animateTransform> 和 <animateMotion> 之类的元素以声明方式创建动画。CSS 过渡和关键帧动画会随时间改变 SVG 元素的样式属性。JavaScript 提供最大的灵活性，使用 requestAnimationFrame 或库（如 GSAP）来实现复杂的交互和动态动画。每种方法都有其优缺点，决定了其对不同用例的适用性。