手元のSVG（企業ロゴやアイコン）を、パスやグループといった要素ごとにタイムライン上でアニメーションできる無料エディタ「SVG Motion Studio」を作りました。登録不要・ブラウザだけで動き、仕上げた結果はHTML/CSSや動画に書き出せます。

使う場所 👉 https://svg.tdmo.org/
無料・登録不要・BYOK（AI利用時のみ自分のAPIキー）

この記事では、既存の「SVGにフェードを付けるだけ」のツールと差別化するために入れた設計上の工夫を、実装寄りに紹介します。

設計の中心は「内部アニメーション形式」

この製品の核心は、AIやUIが CSSそのものを直接編集しない ことです。代わりに、編集可能で検証可能な**中間表現（内部アニメーション形式）**を操作し、そこからCSSや他形式へ変換します。1つの効果はおおよそ次のようなJSONです。

{
  "target": "logo-symbol-outline",
  "effect": "draw",
  "start": 0,
  "duration": 1.2,
  "easing": "ease-in-out",
  "properties": { "direction": "forward" }
}

この中間表現に持たせている性質は次のとおりです。

対象要素を安定したIDで参照できる（DOMの並び順に依存しない）
タイムラインから何度でも再編集できる／Undo・Redoできる
変更前後を差分として比較できる
CSS・HTML・JavaScript など複数形式へ変換できる
未対応の組み合わせを検証できる
バージョンを持ち、将来の形式変更を移行できる

「AIが直接CSSを書く」構成にしなかったのは、後から人が触れる・検証できる状態を保ちたかったからです。

SVGを「要素ごと」に階層で扱う

読み込んだSVGは、path / g / circle / rect / polygon / text などの単位で一覧化します。グループ（g）の階層を保ったまま、グループ全体を動かした後に中の要素を個別に動かす、といった指定ができます。ロゴらしい「輪郭を描いてから、少し遅れて社名を1文字ずつ」という**時間差（stagger）**は、この要素単位の設計があって初めて素直に書けます。

効果とタイミング（capability manifest）

AIとUIが扱える効果・タイミングは、機械可読な manifest として定義しています（抜粋）。

effects: fade, move, scale, rotate, draw, fill, stroke,
         strokeWidth, strokeDash, morph, reveal, blur   // 12種
timing:  start 0–60s / duration 0.1–10s
         easing: linear | ease-* | cubic-bezier(x1,y1,x2,y2)
         loop / iterations 1–20 / direction: normal|reverse|alternate
         trigger: timeline | click | hover | scroll
keyframes: supported (offset 0<..<1, smooth|hold)

move はパスに沿った移動（linear / curve / circle / points）や auto-orient にも対応します。編集中の再生制御は Web Animations API を中心に組み、絶対時刻・相対時刻の両方を扱います。

書き出しは「依存ゼロ」を基本に

主対象はWebサイト埋め込み用の HTML＋CSS で、外部ランタイムに依存しません。開始条件がページ表示・時間経過・hover・focus・activeだけならCSSのみ、画面内表示・クリック・外部ボタン連携などが必要なときだけ、依存ゼロの小さなVanilla JSを付けます。埋め込みは名前衝突しない設計で、再生APIも用意しています。

logoAnimation.play();
logoAnimation.pause();
logoAnimation.restart();
logoAnimation.seek(1.2);
logoAnimation.setSpeed(0.8);

さらに、アニメーションSVG・Lottie、動画/画像として APNG・GIF・WebM・MP4・WebP へも書き出せます（エンコードは mediabunny / gifenc / upng-js を利用）。

セキュリティ：アップロードSVGを無検査でDOMに入れない

SVGはユーザー入力なので、読み込み時に検査・除去します。

script、onload などのイベント属性、foreignObject
外部URL参照・外部フォント・外部画像
危険なCSS、XML Entity などの危険なXML構造
過大なファイル／過剰な要素数（SVG・最大2MB・1,500要素まで）

検証はクライアントとサーバーの両方で行い、AIの生成物は許可リスト方式（既存IDのみ・ロック要素は保持・生成はJSONのみ）で弾きます。

AIは「下書き」担当（BYOK・座標は送らない）

自然言語からアニメーションを提案するAI機能はありますが、AIが出せるのは検証済みの内部形式JSONだけで、生のHTML/CSS/JSは書きません。APIキーはBYOK（OpenAI・Gemini・Anthropic・Kimi対応）でタブを閉じると消え、SVG本体やパス座標そのものはAIへ送りません。送信内容と課金の可能性は生成前に確認できます。

技術スタック

フロント：React（エディタUI）、Web Animations API（再生）
実行基盤：vinext（Cloudflare Vite）＋ Cloudflare Workers
保存：D1 / Drizzle
書き出し：mediabunny（動画）、gifenc（GIF）、upng-js（APNG）

まとめ

「SVGにフェードを足す」だけなら手書きでもできます。この製品が狙ったのは、要素ごと・時間差のアニメーションを、後から編集・検証できる内部形式のまま組み立て、依存ゼロのコードや動画へ書き出すところです。無料・登録不要なので、まずはサンプルSVGで触ってみてください 👉 https://svg.tdmo.org/

（CSSの仕組みから知りたい方向けの入門記事も書いています： https://tdmo.org/blog/2026/svg-logo-animation.html ）