1仕組みと動作原理
線画アニメーションは dash メカニズムに依存する：stroke-dasharray をパス全体の長さに設定し、dashoffset も同値（不可視状態）に設定した上で、offset を 0 に向けて動かすことで順次描画させる
skills/svg-animation/SKILL.md
Draw the dash array as long as the path, offset it fully (invisible), then animate the offset to 0.
2通りの長さ取得法を提示：JS の getTotalLength()（最も信頼性が高い）と、JS 不要の pathLength="1" 正規化テクニック（計測不要）。
パス変形の前提として2つの d のコマンド数および型が一致している必要があり、一致しない場合は MorphSVG や Flubber などのリサンプリングライブラリが必要となる
skills/svg-animation/SKILL.md
Paths interpolate point-by-point, so a naive morph requires both `d` attributes to have the **same number and type of commands**.
3つのアプローチを提示：GSAP MorphSVG（マッピングの自動解決および convertToPath）、Flubber（GSAP を使用しない補間ライブラリ）、手作業による同構造パスの作成（アイコン切り替え用）。
パスに沿った移動には3つの実装ルート（GSAP MotionPath、mpath を伴う SMIL animateMotion、CSS offset-path）があり、スクロール同期の要否やライブラリ依存関係に応じて選定する
skills/svg-animation/SKILL.md
motionPath: { path: "#track", align: "#track", autoRotate: true, alignOrigin: [0.5, 0.5] },
同一の要件に対して3段階のコスト帯を提示し、選定表（CSS、SMIL、GSAP それぞれ1行ずつの判断基準）を提供する。
グラデーションやフィルターもアニメーション可能（光の走査を行う gradientTransform や stop offset の制御、変形やフォーカスを行う feDisplacementMap.scale および feGaussianBlur.stdDeviation の制御）だが、フィルターは paint コストの負荷が大きい
skills/svg-animation/SKILL.md
Filters are paint-heavy — animate sparingly and prefer `transform`/`opacity` where possible.
同リポジトリの 60fps-animation とパフォーマンスコスト基準を統一し、フィルターアニメーションを低負荷な処理と誤認させないようにする。
納品前には SVG エンジニアリング規律の遵守が必須：SVGO でアニメーション依存設定（cleanupIds、removeViewBox）を削除してはならず、CSS や JS から操作可能にするため SVG をインライン展開する必要がある
skills/svg-animation/SKILL.md
keep `viewBox`, drop editor metadata, but disable `cleanupIds`/`removeViewBox` and any plugin that renames IDs you reference from CSS/JS/SMIL.
references にはアニメーション用に調整された SVGO 設定が別途用意されており、最適化によってアニメーション手順が削除されるといった事故を事前に防ぐ。
2コア機能
01ストローク描画（dasharray と dashoffset、getTotalLength および pathLength="1" 正規化、複数パスの stagger を含む）
02パス変形（GSAP MorphSVG、Flubber、手作業による同構造パス作成の3択）
03パスに沿った移動と向きの制御（MotionPath autoRotate、SMIL animateMotion、CSS offset-path）
04グラデーションおよびフィルターのアニメーション効果（gradientTransform による光の走査、feDisplacementMap、feGaussianBlur、feColorMatrix）
05駆動方式の選定（CSS、SMIL、JS のトレードオフ表、SMIL のサポート状況と非推奨化に関する注意点を含む）
06アニメーションに適した SVGO 設定とインライン展開の要件
07駆動方式に応じたアニメーション停止用ハーネス（SMIL は pauseAnimations と setCurrentTime、CSS は animationDelay と playState、GSAP は tl.seek）
08変形アプローチの選定および手作業によるアイコン切り替え（ハンバーガーと close 等）の実装詳細
09ビルド不要（ゼロビルド）での納品（バンドラーを使用せず、単一 HTML 内にインライン SVG を配置）
10アクセシビリティ基準：reduced-motion 下でのループ処理や大規模な動きの抑制、および静的な最終状態の保持
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | gsap 加 MorphSVGPlugin / MotionPathPlugin（可选：形变与沿路径运动） |
| package | flubber（可选：无 GSAP 的路径插值器） |
| cli | SVGO（可选：SVG 清洗与压缩，需关掉会破坏动画的插件） |
| api | 浏览器原语：SVGGeometryElement.getTotalLength()、SMIL animateMotion 与 mpath、CSS offset-path 与 offset-distance |
| network | 交付页可从 CDN 取 GSAP（产物期引用，不判级；正文未点名具体域） |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言: 実行時の外部通信はゼロ。納品ページは CDN から GSAP を取得可能（生成物側での参照であり、本文中に特定のドメイン名は未記載）
- 本地工作目录: ファイル読み書きおよび成果物出力: 本 skill ディレクトリへの書き込みはゼロ。エージェントが自己完結型 .html ファイル（インライン SVG と単一の駆動コード）を1つ出力
監査ノート： 判定は本 skill 自体のディレクトリ（skills/svg-animation/ = SKILL.md + 0 バイトの README.md + references/svg-techniques.md、find による全量突合済み）のみに基づきます：スクリプトなし、クレデンシャルなし、ディスク書き込みなし、実行時外部通信なし（fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( のトークンスキャンに該当なし）。本文中で言及されている GSAP CDN、svgo、gsap、flubber はすべて生成物側またはユーザー側のツールであり、リスク判定の対象外です。注意事項（リスクレベル引き上げなし）：インライン SVG は本 skill の中核手法ですが、出所不明なサードパーティ製 SVG をインライン展開した場合、含まれるインラインスクリプトやイベント属性がホストページ上で実行されるリスクがあります。これはインライン SVG 技術固有の仕様であり、本文中に注意喚起はありません。
5二重目の独立検証
- [ok] SMIL 的支持与弃用表述是否自洽 — SKILL.md 选型表给出 SMIL 适用面（自包含、无 JS bundle），并在 caveat 段说明 not supported in IE/old Edge and historically deprecation-flagged，要求滚动同步或最大兼容时改用 CSS 或 JS；references 第 4 节以三轴对比表重申，未夸大（未宣称 SMIL 已被移除）。
- [unlocatable] MorphSVG 是否真的免费可用（与 gsap-web 的免费声明同源风险） — SKILL.md 两次称 MorphSVG 在 GSAP 3.12+ 免费（**GSAP MorphSVG** (free as of GSAP 3.12)），但仓库内无上游许可文件可核，属外部事实声明，按文档声明记录（同仓 gsap-web 有同一处声明）。
- [ok] dashoffset 的两条取长度路线是否与 references 一致 — SKILL.md 的 Getting the length 两条（getTotalLength 与 pathLength="1"）在 references 的 getTotalLength gotchas 与 No-JS normalization with pathLength 两节展开，且都附代码，前后一致。
- [discrepancy] Packaged helper 的路径基准与适用性 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根而非本 skill 目录；且 SMIL 驱动的冻结走 svg.pauseAnimations() 与 setCurrentTime()，helper 只替换 URL 参数，无法冻结 SMIL 时钟——对 SMIL 路径该 helper 失效。
6結論
最適な用途： 適合シーン：① アイコン、ロゴ、署名のストローク描画・消去・複数パスのスタッガーアニメーション；② アイコンの状態切り替え変形（ハンバーガーと close、再生と一時停止）；③ 要素のパスに沿った移動と自動回転（スクロール同期 GSAP 版を含む）；④ SVG グラデーションおよびフィルター効果（光の走査、発光、ディスプレイスメント）；⑤ JS 不要（SMIL または純粋な CSS 宣言）で納品したい自己完結型のベクターアセット。
不向きな用途： 不適合シーン：① ビットマップや動画素材ベースのアニメーション（非ベクターオブジェクト）；② 複数の要素が絡む複雑なタイムライン編成（gsap-web を推奨）；③ ピクセル単位またはフレームごとの描画制御が必要なシーン（canvas や WebGL 系の skill を推奨）；④ IE や旧 Edge のサポートが必須で JS を導入できない環境（SMIL および CSS offset-path の双方が利用不可）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload svg-animation.tar.gz
sha256:
Option B · Copy Guide for Agent7a0047bb3c20631d…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.