手元の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 ）