SVG to Video

SVG to Video

CSS および SMIL でアニメーション化された SVG を、高品質な動画（MP4、WebM、MKV、MOV）や、アルファチャンネルの透明度を完全に保った軽量なアニメーション形式（aPNG、GIF）に、ブラウザー上または CLI／MCP サーバー経由で変換できる高忠実度ツールです。

---

🌟 SVG to Video が選ばれる理由

• 背景の透明化：WebM または aPNG を使ってアニメーションを完全なアルファチャンネル付きで書き出せます。また、GIF89a では最適化されたインデックス付き透明度を利用できます。動画編集ツールでのオーバーレイやウェブでの使用に最適です。
• プライバシー優先：Web Studio はすべてブラウザー内で動作するため、SVG ファイルがコンピューターの外に送信されることはありません。
• フレーム単位の正確さ：エンジンは Web Animations API とネイティブの SVG SMIL の両方を処理し、レンダリングどおりにすべてのフレームを正確にキャプチャします。
• AI エージェントにネイティブ対応：ネイティブの Model Context Protocol（MCP） サーバーと Agent Skill（SKILL.md） に対応し、公式の MCP Registry（mcp.json）に登録されています。また、HuggingFace Spaces で公開されています。
• 幅広いアニメーション形式に対応：動画に加えて、ドキュメント、Slack、GitHub での使用に最適な軽量の アニメーション PNG（aPNG） や GIF を生成でき、背景の透明度も細かく制御できます。
• クリップボードにコピー：Base64 Data URL にすぐに書き出せます。動画をコピーして HTML、CSS、JS のコードに直接埋め込めるため、手動でダウンロードする必要はありません。迅速なプロトタイピングや開発に最適です。
• メタデータの埋め込み：動画形式（MP4、WebM、MKV、MOV）とアニメーション画像形式（aPNG、GIF）の両方で、カスタムタイトルとコメントに対応しています。
• 多用途：すばやい変換に便利な Web Studio から、バッチ処理の自動化や CI/CD パイプラインに適した強力な CLI ツール まで、幅広い用途に対応します。

---

🚀 はじめに

用途に合った方法を選んでください。

• Web Studio：インストール不要で、ブラウザー上で SVG を動画、高忠実度の aPNG、または最適化された GIF に変換できる、最も簡単な方法です。
• CLI / Docker ツール：一括処理、サーバーサイドの自動化、CI/CD との統合に適しています。
• AI エージェントと MCP サーバー：Claude Desktop、Cursor、Antigravity、および自律型 LLM ワークフローに適しています。

---

🌐 Web Studio

🚀 Web Studio を試す

Web Studio は、サーバーレスのクライアントサイドレンダリングツールです。WebCodecs を使用してブラウザー内で完全に動作するため、SVG ファイルがコンピューターの外部に送信されることはなく、プライバシーが確実に保護されます。インターフェースは、720p 解像度以上の画面で高い生産性を実現できるように最適化されています。

自動生成デモ：この README の先頭にあるデモ動画は、Playwright と Driver.js を使用して CI/CD パイプラインで自動生成・更新されるため、常に最新の UI 変更が反映されています。

プライバシーに関する注意：Umami Analytics を使用して、Web Studio、CLI、MCP サーバーの各インターフェースで匿名の利用データ（変換回数や形式の使用状況など）を収集し、ツールの改善に役立てています。このトラッキングでは Cookie を使用せず、標準の「Do Not Track」設定（オプトアウトするには DO_NOT_TRACK=1 環境変数を設定してください）を尊重し、個人情報や SVG の内容を収集することはありません。詳しくは docs/ANALYTICS.md をご覧ください。

**ビジュアルギャラリー（Storybook）**で、エンジンが複雑な CSS、SMIL、フォントをどのように処理するかをご確認ください。

クイックスタート

1. Web Studio を開きます。
2. .svg ファイルをドラッグ＆ドロップするか、組み込みサンプルをワンクリックで読み込んで、すぐにエンジンを試します。
3. 解像度、長さ、FPS を調整します。
4. 形式を選択し、必要に応じて Transparent Background を切り替え、最良の結果を得るために High-Fidelity Capture が有効になっていることを確認します。
5. Export をクリックします。

---

🚀 CLI / Docker ツール

自動処理や一括処理には、CLI ツールを使用してください。ヘッドレス環境で動作するように構築されているため、CI/CD パイプラインやサーバーサイドの自動化に最適です。

クイックスタート

Node.js と FFmpeg がインストールされていることを確認してください。

# Node.js (auto-detected duration)
npx -y -p @gehdoc/svg-to-video svg-to-video input.svg 60 ./out-dir

# Node.js (explicit duration & GIF output)
npx -y -p @gehdoc/svg-to-video svg-to-video input.svg 60 ./out-dir -d 5 --format gif --transparent

# Node.js (custom resolution dimensions e.g. vertical 1080x1920)
npx -y -p @gehdoc/svg-to-video svg-to-video input.svg 60 ./out-dir --resolution 1080x1920

# Node.js (animated PNG output)
npx -y -p @gehdoc/svg-to-video svg-to-video input.svg 60 ./out-dir -d 5 --format apng

# Docker (zero local dependencies; requires --shm-size=2gb for Chromium rendering; add :Z to -v for SELinux / Fedora)
docker run --rm --shm-size=2gb -e PUPPETEER_ARGS="--no-sandbox" -v $(pwd):/data:Z gehdoc/svg-to-video /data/input.svg 60 /data/out-dir -d 5 --format gif

使用方法、引数、オプションの詳細は docs/CLI.md をご覧ください。ローカルでのビルドとソースからの実行については、CONTRIBUTING.md をご覧ください。

---

🤖 AI エージェントと MCP 統合

Model Context Protocol を介して、svg-to-video を AI アシスタント（Claude Desktop、Cursor、Antigravity、AutoGPT）に接続できます。

1. mcpServers の設定に追加します：

   {
     "mcpServers": {
       "svg-to-video": {
         "command": "npx",
         "args": ["-y", "-p", "@gehdoc/svg-to-video", "svg-to-video-mcp"]
       }
     }
   }
   

2. AI アシスタントにプロンプトを入力します：

   "examples/example.svg を、60fps の透明な WebM 動画に変換してください。"

セットアップ手順、ツールスキーマ、Docker の実行方法、エージェントへのプロンプト作成ガイドの詳細は、docs/MCP.md をご覧ください。

---

🔗 公式パッケージ配布先

• 📦 npm パッケージ：@gehdoc/svg-to-video
• 🐳 Docker Hub イメージ：gehdoc/svg-to-video
• 🌐 Web Studio：gehdoc.github.io/svg-to-video/
• 🤖 MCP Registry：io.github.GehDoc/svg-to-video
• 🤗 HuggingFace Space：GehDoc/svg-to-video-mcp

---

📦 クイックインストールと実行

# Run on-demand via npx (no global installation required)
npx -y -p @gehdoc/svg-to-video svg-to-video input.svg 60 ./out-dir

# Install globally via npm
npm install -g @gehdoc/svg-to-video

# Pull official Docker image from Docker Hub
docker pull gehdoc/svg-to-video:latest

---

🛠 技術詳細

レンダリングエンジン、アルゴリズム、インフラストラクチャの詳細については、docs/ARCHITECTURE.md をご覧ください。

このツールは SVG を分離し、Web Animations API とネイティブ SVG SMIL DOM の両方を調整したうえで、WebCodecs または FFmpeg を使用してフレームをキャプチャします。

---

❓ よくある質問

プライバシー、フレームスクラブの仕組み、CI/CD の自動化、透明性サポートに関するよくある質問への回答は、docs/FAQ.md をご覧ください。

---

🤝 貢献

貢献を歓迎します！このプロジェクトでは、要件を明確にし、高い品質を確保するため、**仕様駆動開発（SDD）**のワークフローに従っています。イシューまたはプルリクエストを作成してください。

次に取り組む内容については、進行中のロードマップをご覧ください。

貢献方法、ビルドコマンド、セキュリティ基準、技術ロードマップについては、CONTRIBUTING.mdをご覧ください。

---

💖 プロジェクトを支援する

このツールが役に立った場合は、開発へのご支援をご検討ください。

ご支援は、このツールのメンテナンスとさらなる開発に役立てられます。ありがとうございます！

---

📜 ライセンス

このプロジェクトはMIT Licenseの下でライセンスされています。