SVGアニメーションの作り方｜軽量でリッチな演出【コード付き】

この記事の対象: SVGアニメーションを実装したいフロントエンドエンジニア
読了時間: 約7分

ロゴが描かれるように表示される。アイコンが滑らかに変形する。SVGアニメーションは、GIFやLottieと比べて圧倒的に軽量でありながら、解像度に依存しない美しい演出を実現します。

この記事では、SVGアニメーションの3つの実装方法と、実践的なコード例3選を解説します。

SVGアニメーションとは

SVGアニメーションは、ベクターグラフィック（SVG）にモーションを加える技術です。

フォーマット	ファイルサイズ	解像度	インタラクション	適したケース
GIF	大きい	固定	不可	シンプルなループ
Lottie	中程度	可変	可能	複雑なアニメーション
SVG	非常に小さい	可変	可能	アイコン、ロゴ、図形

SVGはテキストベースのXMLフォーマットであるため、gzip圧縮が効き、ファイルサイズが極小です。

SVGアニメーションの作り方3パターン

CSS animation + SVG

SVGの各要素にCSSアニメーションを適用する方法。最も手軽でブラウザ対応も完璧です。

/* SVG要素にCSSアニメーションを適用 */
.svg-icon path {
  transition: fill 0.3s ease;
}

.svg-icon:hover path {
  fill: #3b82f6;
}

SMIL（SVGネイティブアニメーション）

SVGの内部に<animate>タグでアニメーションを記述する方法です。JavaScriptもCSSも不要で、SVGファイル単体でアニメーションが動作します。

<circle cx="50" cy="50" r="20" fill="#3b82f6">
  <animate attributeName="r" from="20" to="30" dur="1s"
    repeatCount="indefinite" />
</circle>

JavaScript（GSAP + SVG）

GSAPを使えば、SVGのパス、変形、色などをタイムラインで精密に制御できます。最も柔軟な方法です。

実装例3選

ラインアニメーション（stroke-dasharray）

ロゴやアイコンが「描かれるように」表示されるアニメーションです。

<svg viewBox="0 0 200 200" class="line-draw">
  <path d="M10,80 Q95,10 180,80 Q95,150 10,80"
    fill="none" stroke="#000" stroke-width="2" />
</svg>

.line-draw path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw 2s ease forwards;
}

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

仕組み: stroke-dasharrayでパスを破線にし、stroke-dashoffsetで破線の開始位置をずらすことで、パスが描かれる効果を作ります。

モーフィング（パスの変形）

1つの形から別の形へ滑らかに変形するアニメーションです。

<svg viewBox="0 0 100 100">
  <path d="M25,50 a25,25 0 1,1 50,0 a25,25 0 1,1 -50,0" fill="#3b82f6">
    <animate attributeName="d"
      to="M10,10 L90,10 L90,90 L10,90 Z"
      dur="1s" fill="freeze"
      begin="click" />
  </path>
</svg>

円から四角形へのモーフィング。GSAPのMorphSVGPluginを使えばより複雑な変形も可能です。

マスクアニメーション

SVGのマスクを使って、コンテンツが段階的に表示される効果です。

<svg viewBox="0 0 400 200">
  <defs>
    <mask id="reveal-mask">
      <rect x="0" y="0" width="0" height="200" fill="white">
        <animate attributeName="width"
          from="0" to="400" dur="1.5s" fill="freeze" />
      </rect>
    </mask>
  </defs>
  <text x="20" y="120" font-size="48" mask="url(#reveal-mask)">
    Hello World
  </text>
</svg>

マスクのwidthをアニメーションさせることで、テキストが左から順に現れる効果を作ります。

SVGの最適化（SVGO）

SVGファイルはIllustratorやFigmaから書き出すと、不要なメタデータや冗長な属性を含んでいることが多いです。SVGOを使って最適化しましょう。

npx svgo input.svg -o output.svg

SVGOの最適化で30〜70%のファイルサイズ削減が期待できます。

注意: アニメーションに使用するid属性やclass属性がSVGOで削除されないよう、設定でそれらを除外する必要があります。

まとめ

SVGアニメーションのポイントをまとめます。

GIFやLottieより軽量でリッチな演出が可能
CSS animationで手軽に、GSAPで高度に実装
ラインアニメーション（stroke-dasharray）はロゴ表示の定番
SVGOで最適化してファイルサイズを削減
アクセシビリティ: prefers-reduced-motionでの停止対応を忘れずに