SVGアニメーションの基本とよく使う実装パターン | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

SVG（Scalable Vector Graphics）とは、ベクター形式で図形を描画できるXMLベースのマークアップ言語です。
JPEGやPNGのようなラスタ画像とは異なり、どれだけ拡大しても画像がぼやけず、線や形を数値で管理できるため、Web上でも軽量かつ鮮明な表示が可能です。

このSVGにアニメーションを加えることで、Webページにダイナミックな動きや演出を取り入れることができます。
実装方法としては、主に以下の3パターンがあります。

SMIL（SVG内で動きを定義）
SVGタグ内に``や``要素を記述することで、アニメーションを直接制御できます。
ただし、現在はブラウザのサポートが限定的であり、推奨されないケースもあります。

CSSアニメーションの利用
SVG要素に対して、通常のCSSアニメーションや`transition`を適用することで、簡単な動き（拡大・回転・フェードインなど）を実現できます。
CSSは軽量で読みやすく、マイクロインタラクションに最適です。

JavaScript（GSAPなど）による制御
複雑なアニメーションや動的な制御が必要な場合は、JavaScriptを使うのが効果的です。
特にGSAP（GreenSock Animation Platform）は、SVGとの親和性が高く、タイムライン制御や繰り返し動作なども簡単に実装できます。

代表的な属性としては、`stroke-dasharray`（線のパターン）、`stroke-dashoffset`（線の開始位置）、`transform`（回転や拡大縮小）、`opacity`（透過）などがあり、アニメーションの核となります。

これらの技術を理解することで、静的なSVGに生命を吹き込む表現が可能になります。

ここでは、実際のWeb制作現場でよく用いられるSVGアニメーションの実装パターンを5つ紹介します。
見た目の変化だけでなく、コード例や実装のポイントにも触れていきます。

パスが1本ずつ描かれるように見せる定番アニメーションです。

```css
path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 2s ease forwards;
}

@keyframes draw {
 to {
　stroke-dashoffset: 0;
   }
}
```

使用技術：CSS
利用シーン：ロゴやイラスト、手書き風演出
ポイント：`stroke-dasharray`の値はパスの長さに応じて調整

SVGアイコンにマウスを重ねたときのインタラクション表現に便利です。

```css
svg:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
```

使用技術：CSS
利用シーン：ボタンやナビゲーションの装飾
ポイント：スケールの中心を調整するには`transform-origin`を併用

ローディング中などに使用される、ループ型のSVGアニメーションです。
```css
circle {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
   }
}
```

使用技術：CSS
利用シーン：読み込み待機、スピナー表現
ポイント：SVG内の回転中心を調整するために`transform-box`や`transform-origin`が必要になる場合あり

ポイント：SVG内の回転中心を調整するために`transform-box`や`transform-origin`が必要になる場合あり

モーションパスに沿った移動 SVGパスに沿って図形が移動する高度なアニメーションです。

```xml

<animateMotion dur="4s" repeatCount="indefinite">

   <mpath xlink:href="#path" />

</animateMotion> ```

使用技術：SMIL or JavaScript（GSAPならもっと柔軟に制御可能）

利用シーン：地図、ルート表示、アイコンの軌跡

ポイント：GSAPなら`motionPath`機能で高精度なパス制御が可能

マウス連動のインタラクション ユーザーの操作に反応する、動的SVGアニメーションです。

```js

const circle = document.querySelector("circle");

document.addEventListener("mousemove", (e) => {

   circle.setAttribute("cx", e.clientX);

   circle.setAttribute("cy", e.clientY);

}); ```

使用技術：JavaScript

利用シーン：インタラクティブな演出、ゲーム風UI

ポイント：SVG要素の属性操作がポイント。Canvasとの違いはDOMとして扱えること

SVGアニメーションを実装する際は、以下の点に注意することで、より快適で効果的な演出が可能になります。

CSSとJavaScript、どちらを使うべき？

単純な動き（拡大・回転・フェード）であれば、CSSで完結できます。
複雑なアニメーションや時間制御・ユーザー操作に応じた変化が必要な場合は、JavaScript（特にGSAPなど）が適しています。

パフォーマンスへの配慮
多数のアニメーションを同時に動かすと、CPU負荷が高まり、動作がカクつくことがあります。
`will-change`や`transform`プロパティの活用で、ブラウザの最適化を促すことが重要です。

アクセシビリティにも配慮を
動きの速さや頻度によっては、一部ユーザーにとってストレスになることも。
`prefers-reduced-motion`メディアクエリを活用し、環境設定で「アニメーションを減らす」が有効なユーザーには、動きを抑制する実装が望まれます。

他技術との使い分け
WebGLやCanvasと異なり、SVGはDOMとして操作できるため、SEOやインタラクションとの親和性が高いのも利点です。
表示精度を求める2DアニメーションではSVG、3Dや粒子演出ではThree.jsなどを使い分けるのが理想です。

SVGアニメーションは、「軽量」「高解像度」「柔軟な表現」というベクターの利点を活かしながら、Webに動きと個性を加える強力な手段です。

ちょっとしたアニメーションでも、ユーザー体験を大きく変える力があります。

まずは基本を押さえて、効果的に取り入れてみてはいかがでしょうか。