【えすぶいじーあにめーしょん】
SVGアニメーション とは？
💡 ベクター画像を「滑らかに動かす」Web技術
📌 このページのポイント
- SVGはXMLベースのベクター画像で拡大しても劣化しない
- CSSアニメーション、SMIL、JavaScript（GSAP等）で動かす
- アイコン、ロゴ、インフォグラフィックのアニメーションに最適
- GIFやLottieの代替としてパフォーマンスに優れる
ひよこ CSSアニメーションと何が違うの？
ペンギン先生 CSSアニメーションはHTML要素全般を動かせる。SVGアニメーションはSVG内部のパス、図形、テキストを個別に動かせる。例えばロゴの各パーツが順番に描かれる「ストロークアニメーション」はSVGならでは。stroke-dasharrayとstroke-dashoffsetを使うと、文字が書かれていくような演出ができるんだよ
ひよこ どうやって作る？
ペンギン先生 3つの方法がある。①CSS（@keyframesとtransformで回転・移動・拡大）が最もシンプル、②SMIL（SVG内にanimate要素を書く）はSVGネイティブだけどChromeで一時非推奨になり復活した経緯がある、③JavaScript（GSAP、Anime.js、Framer Motion）が最も高機能で複雑なシーケンスアニメーションに向くよ
ひよこ Lottieとの使い分けは？
ペンギン先生 ひよこ おもしろい！パフォーマンスは？
ペンギン先生 SVGアニメーションはGPU描画が効くtransformとopacityの変更なら60fps安定。ただしSVG内のpath要素が数千個あると重くなる。対策は①不要なアンカーポイントを減らす（SVGOで最適化）、②will-changeでGPUレイヤーを確保、③画面外のアニメーションはIntersection Observerで停止。canvasベースのアニメーションと比べてDOMアクセスできるのが強みだよ
まとめ：ざっくりこれだけ覚えればOK！
「SVGアニメーション」って出てきたら「ベクター画像をWebで動かす技術」と思えればだいたいOK！
📖 おまけ：英語の意味
「SVG Animation」 ＝ SVGアニメーション
💬 Scalable Vector Graphics（拡大縮小可能なベクター画像）にアニメーションを加えるよ