Webサイトにちょっとした動きを加えるだけで、ユーザーの注目を集め、サイトの印象がぐっと洗練されます。ローディング画面の回転アイコン、ホバー時に色が変わるボタン、スクロールに合わせて描かれる線画。こうしたアニメーションの多くはSVGで実装されています。
SVG（Scalable Vector Graphics）はXMLベースのベクター画像形式で、拡大・縮小しても画質が劣化せず、テキストエディタで編集でき、CSSやJavaScriptでアニメーションを付けられるのが特長です。
この記事では、SVGアニメーションの3つの実装方法（CSS・SMIL・JavaScript）それぞれの特徴と具体的な使い方を解説します。コードの書き方だけでなく、どの手法をどんな場面で使うべきかの判断基準も紹介します。
SVGの基本を理解する
SVGとは
SVGはW3Cが策定したXMLベースのベクター画像形式です。JPEGやPNGなどのラスター画像とは異なり、数学的な座標とパス情報で図形を定義するため、どれだけ拡大しても画質が劣化しません。
現在のすべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）がSVGに対応しており、互換性を心配する必要はほとんどありません。
SVGの基本要素
- <svg>：SVGのルート要素。widthとheightで表示サイズ、viewBoxで座標系を定義する
- <circle>：円を描く。cx、cy（中心座標）とr（半径）で指定
- <rect>：長方形を描く。x、y（左上の座標）とwidth、heightで指定
- <path>：自由な形のパスを描く。d属性にパスデータを記述
- <line>：直線を描く。x1、y1（始点）とx2、y2（終点）で指定
- <g>：グループ化要素。複数の要素をまとめて操作するときに使う
SVGをWebページに埋め込む方法
SVGのWebページへの埋め込み方法は主に3つあります。
- インラインSVG：HTML内に直接SVGコードを記述する。CSSやJavaScriptからの操作が可能で、アニメーションに最適
- imgタグ：
<img src="image.svg">で読み込む。シンプルだが、CSSやJavaScriptからSVGの内部要素を操作できない - CSSの背景画像：
background-image: url('image.svg');で指定。装飾目的に向いている
SVGアニメーションを実装する場合は、インラインSVGでの埋め込みが必須です。imgタグやCSSの背景画像として読み込んだ場合、SVG内部の要素に対してCSSやJavaScriptでアクセスできません。
方法1：CSSアニメーション
CSSアニメーションは、SVGの要素に対して通常のHTML要素と同じようにCSSのtransitionや@keyframesを適用する方法です。最も手軽で、Web制作者にとって馴染みのある手法です。
CSSアニメーションでできること
- 色の変化（fill、stroke）
- 透明度の変化（opacity）
- 回転・拡大・縮小・移動（transform）
- ホバーやフォーカスに連動したインタラクション（:hover、:focus）
具体的な実装例
例えば、SVGの円をホバー時に色を変えるには、SVGの<circle>にclass属性を付け、CSSで.circle:hover { fill: #ff6347; transition: fill 0.3s ease; }のように記述します。transitionプロパティで変化の時間やイージングを指定できます。
回転アニメーションの場合は、@keyframesでfrom { transform: rotate(0deg); } to { transform: rotate(360deg); }を定義し、対象要素にanimation: spin 2s linear infinite;を適用します。
transform-originの注意点
SVG要素のtransform-originはデフォルトで要素の左上（0, 0）になっている点に注意が必要です。HTML要素のように中心を基準に回転させたい場合は、transform-origin: center;を明示的に指定する必要があります。この違いを知らないと、意図しない位置を軸にして回転してしまいます。
方法2：SMILアニメーション
SMIL（Synchronized Multimedia Integration Language）は、SVGに組み込まれたアニメーション機能です。CSSやJavaScriptを使わずに、SVGのマークアップだけでアニメーションを定義できるのが特長です。
SMILの主要タグ
- <animate>：属性値の変化をアニメーションする。色、サイズ、位置などに使用
- <animateTransform>：回転・拡縮・移動などのtransform系の変形をアニメーションする
- <animateMotion>：パスに沿った移動アニメーションを定義する
- <set>：特定のタイミングで属性値を一度だけ変更する
SMILの基本的な書き方
SMILアニメーションは、アニメーション対象の要素の中に<animate>タグを記述します。attributeName（変化させる属性）、from（開始値）、to（終了値）、dur（継続時間）、repeatCount（繰り返し回数）を指定するのが基本です。
例えば、円の半径を変化させるには、<circle>の中に<animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />と記述します。
SMILのブラウザ対応状況
SMILはChrome・Firefox・Safari・Edgeの現行バージョンですべてサポートされています。以前はChromeで非推奨とされていた時期がありましたが、その後撤回され、引き続きサポートされています。MDN Web Docsにも詳細なリファレンスが掲載されています。
方法3：JavaScriptアニメーション
JavaScriptを使えば、ユーザーの操作やスクロール位置に応じた高度なアニメーション制御が可能になります。
JavaScriptアニメーションのメリット
- イベント（クリック、スクロール、マウス移動）に連動したアニメーションが作れる
- 条件分岐やランダム性を含む複雑なアニメーションが実装できる
- アニメーションの一時停止・再開・逆再生など、きめ細かな制御ができる
代表的なアニメーションライブラリ
- GSAP（GreenSock Animation Platform）：高性能なアニメーションライブラリ。SVGアニメーションとの相性が非常に良い
- anime.js：軽量でシンプルなAPI。SVGのパスアニメーションに対応
- Lottie：After Effectsで作成したアニメーションをWebで再生できるライブラリ
「線画を描く」アニメーション
SVGの「stroke-dasharray」と「stroke-dashoffset」を組み合わせると、パスが徐々に描かれていく「ライン描画」アニメーションを作れます。この手法はロゴやイラストの登場演出として非常に人気があります。
仕組みとしては、stroke-dasharrayでパスの長さと同じ値の破線パターンを設定し、stroke-dashoffsetでパスの開始位置をずらします。dashoffsetをパスの全長から0に変化させると、線が描かれていくように見えます。
3つの手法の使い分け
CSS・SMIL・JavaScriptの3つの手法は、それぞれ得意な領域が異なります。
- CSSアニメーション：ホバーエフェクト、ローディングアイコン、シンプルなトランジションなど、インタラクションに連動した軽い動きに最適
- SMILアニメーション：SVG単体で完結する装飾的なアニメーション。外部ファイルとしてSVGを配布する場合にも動作する
- JavaScriptアニメーション：スクロール連動、クリック連動、複雑なタイムライン制御が必要な場面。ユーザーの操作に応じた動的なアニメーション
まずはCSSアニメーションから始めるのがおすすめです。多くのSVGアニメーションはCSSだけで実現でき、既存のCSS知識をそのまま活用できます。CSSでは実現が難しいアニメーション（パス沿いの移動、複雑なタイムライン制御など）が必要になった段階で、SMILやJavaScriptの導入を検討しましょう。
SVGアニメーション制作のワークフロー
SVGデータの準備
SVGデータはIllustrator、Figma、Inkscape（無料）などのベクターグラフィックツールで作成し、SVG形式で書き出します。書き出し時のポイントは以下の通りです。
- 不要なグループやレイヤーを削除してファイルサイズを軽くする
- アニメーション対象の要素には意味のあるid属性やclass属性を付けておく
- テキストはアウトライン化（パスに変換）しておくとフォント依存がなくなる
SVGの最適化
SVGOMGは、SVGファイルを最適化するオンラインツールです。不要なメタデータや冗長なコードを除去し、ファイルサイズを大幅に削減できます。
アクセシビリティへの配慮
SVGアニメーションを実装する際は、prefers-reduced-motionメディアクエリに対応しましょう。このメディアクエリは、OSの設定で「視差効果を減らす」をオンにしているユーザーに対してアニメーションを無効化するためのものです。前庭障害やてんかんのあるユーザーにとって重要な配慮です。
よくある質問（Q&A）
Q：SVGアニメーションはSEOに影響しますか？
A：SVGアニメーション自体が直接SEOに影響することはありません。ただし、アニメーションによってページの表示速度が低下する場合は、Core Web Vitalsのスコアに影響する可能性があります。過度に重いアニメーションは避けましょう。
Q：SVGアニメーションはスマートフォンでも動作しますか？
A：CSS・SMIL・JavaScriptのいずれの方法も、iOS Safari・Android Chromeで動作します。ただし、モバイル端末はPCよりも処理能力が低いため、複雑なアニメーションはパフォーマンスに影響する可能性があります。
Q：GIFアニメーションとSVGアニメーションはどちらが良いですか？
A：ロゴやアイコンなどのベクターグラフィックにはSVGアニメーションが適しています。ファイルサイズが小さく、Retinaディスプレイでも鮮明に表示されます。一方、実写映像や複雑なイラストの動きにはGIF（またはMP4動画やLottie）の方が向いています。
Q：SVGアニメーションの作成に特別なツールは必要ですか？
A：SVGはテキストベースのフォーマットなので、テキストエディタだけでも作成・編集できます。ただし、複雑な図形やイラストはIllustratorやFigmaなどのグラフィックツールで作成する方が効率的です。
Q：SVGアニメーションの学習にはどのくらい時間がかかりますか？
A：CSSアニメーションの基礎があれば、SVGへの応用は数時間で理解できます。SMILやJavaScript（GSAP）を使った高度なアニメーションは、実際にコードを書きながら1〜2週間程度で基本的なパターンを習得できます。
まとめ
SVGアニメーションは、CSS・SMIL・JavaScriptの3つの手法で実装でき、それぞれ得意な場面が異なります。シンプルなインタラクションにはCSS、SVG単体の装飾にはSMIL、高度な制御にはJavaScriptを使い分けましょう。
まずはCSSでSVGアイコンのホバーアニメーションを1つ作ってみるのがおすすめです。fill色をtransitionで変化させるだけでも、サイトに動きが加わり、ユーザーの操作感が向上します。
