【えすぶいじーあにめーしょん】

SVGアニメーションとは？

最終更新: 2026年10月4日

💡 SVGの図形に動きを付ける

SVGの図形や属性などを時間とともに変化させて、動きを表す技術。SVGのアニメーション要素、CSS、JavaScriptなどを使い、表示方法とブラウザーの対応に合わせて実装する。

📌 このページのポイント

使える方法は埋め込み方や閲覧環境による。SVGを使うだけで容量や描画速度、アクセシビリティが保証されるわけではない。

ひよこ

ペンギン先生

別々の対立する技術というより、CSSはSVGを動かす方法の一つだよ。SVGの図形やパスに対して、対応する属性やCSS プロパティを時間とともに変化させる。移動、色の変化、線を描いていくような演出などに使えるんだ

ひよこ

どうやって動かすの？

ペンギン先生

SVG内のanimateなどのアニメーション要素、CSSのkeyframesやtransition、JavaScriptによるDOM操作やWeb Animations APIなどがあるよ。動かしたい属性や操作への反応、ブラウザーの対応で方法を選ぶ。必ず特定のライブラリが必要というわけではないんだ

ひよこ

imgで表示したSVGも、ページのJavaScriptから動かせる？

ペンギン先生

画像として読み込んだSVGの内部は、インラインSVGと同じようには扱えないよ。画像内のスクリプトやクリック操作は使えないけれど、宣言的な時間ベースの動きは可能な場合がある。ページ側から図形を直接操作したいなら、インラインで置く方法などを検討しよう

ひよこ

SVGなら必ず軽くて滑らかなの？

ペンギン先生

図形や効果が複雑なら負荷は増えるよ。transformやopacityはブラウザーが最適化しやすいけれど、60fpsを保証しない。will-changeも無条件に付けると別の性能問題を招くことがあるので、実測して必要な箇所へ使おう

ひよこ

動きを付けるとき、利用する人への配慮は？

ペンギン先生

動きでほかの内容を読みづらくしないようにしよう。WCAGでは、自動で始まり5秒を超えて続き、ほかの内容と並んで表示される動く情報に、停止などの仕組みを求める基準があるよ。必須の動きには例外もある。SVG形式だけで使いやすさが保証されるわけではないんだ

まとめ：ざっくりこれだけ覚えればOK！

「SVGアニメーション」って出てきたら「ベクター画像をWebで動かす技術」と思えればだいたいOK！

📖 おまけ：英語の意味

「SVG Animation」＝ SVGアニメーション

💬 Scalable Vector Graphics（拡大縮小可能なベクター画像）にアニメーションを加えるよ

参考資料