Convert animated SVG code/files to video (MP4/WebM) or image (GIF/aPNG) with in-band delivery.
MCP Server: io.github.GehDoc/svg-to-video
This MCP server provides conversion from animated SVG to video and animated image formats. It outputs video files in MP4, WebM, MKV, and MOV formats, and can also generate animated images in aPNG and GIF formats.
🛠️ Key Features
Animated SVG to video conversion
Animated SVG to animated image conversion
Video output: MP4, WebM, MKV, MOV
Animated image output: aPNG, GIF
🚀 Use Cases
Convert animated SVG assets into common video formats for embedding or playback
Generate animated image versions (GIF or aPNG) for environments that do not support video
Prepare SVG-based animations for distribution across different media targets
⚡ Developer Benefits
Targets multiple output formats from the same animated SVG input
Consistent conversion scope focused on SVG-to-video and SVG-to-animated-image workflows
A high-fidelity tool to transform your CSS-animated SVGs into high-quality videos (MP4, WebM, MKV, MOV) or lightweight animated formats (aPNG, GIF) with perfect alpha-channel transparency directly in your browser or via CLI/MCP server.
Transparent Backgrounds: Export your animations with a full alpha channel using WebM or aPNG, and optimized indexed transparency with GIF89a. Perfect for overlays in video editing tools or web use.
Privacy-First: The Web Studio runs entirely in your browser—your SVG files never leave your computer.
Frame-Accurate: Our engine scrubs the Web Animations API, ensuring every frame is captured exactly as rendered.
AI Agent Native: Native Model Context Protocol (MCP) server and Agent Skill (SKILL.md) support indexed on the official MCP Registry (mcp.json) to let AI assistants render their generated SVG animations into MP4/GIF automatically.
Universal Animated Formats: Beyond video, generate lightweight Animated PNGs (aPNG) and GIFs perfect for documentation, Slack, or GitHub, with full control over background transparency.
Copy to Clipboard: Instant export to Base64 Data URL—copy your video and embed it directly into your HTML, CSS, or JS code without manual downloads. Perfect for rapid prototyping and developers.
Metadata Injection: Support for custom titles and comments across video (MP4, WebM, MKV, MOV) and animated image (aPNG, GIF) formats.
Versatile: Whether you need an accessible Web Studio for quick conversions or a powerful CLI tool for batch automation and CI/CD pipelines, this project has you covered.
🚀 Getting Started
Choose the entry point that matches your needs:
Web Studio: The easiest way to convert SVGs to video, high-fidelity aPNG, or optimized GIF in your browser without any installation.
CLI / Docker Tool: For batch processing, server-side automation, and CI/CD integration.
AI Agent & MCP Server: For Claude Desktop, Cursor, Antigravity, and autonomous LLM workflows.
Our Web Studio is a serverless, client-side rendering tool. It runs entirely in your browser using WebCodecs—your SVG files never leave your computer, ensuring absolute privacy. The interface is optimized for high-productivity on screens starting from 720p resolution.
Automated Demo: The demo video at the top of this README is automatically generated and updated by our CI/CD pipeline using Playwright and Driver.js, ensuring it always reflects the latest UI changes.
Privacy Note: We use Umami Analytics to collect anonymous usage data across our Web Studio, CLI, and MCP server interfaces (e.g., number of conversions and format usage) to help us improve the tool. This tracking is cookie-less, respects standard "Do Not Track" settings (set the DO_NOT_TRACK=1 environment variable to opt out), and never collects personal information or SVG contents. See docs/ANALYTICS.md for details.
Select your format, toggle Transparent Background if needed, and ensure High-Fidelity Capture is enabled for best results.
Click Export.
🚀 CLI / Docker Tool
For automated or batch processing, use the CLI tool. It is built to run in a headless environment, making it perfect for CI/CD pipelines or server-side automation.
# Run on-demand via npx (no global installation required)
npx @gehdoc/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
🛠 Technical Details
For a deep dive into the rendering engine, algorithms, and infrastructure, see docs/ARCHITECTURE.md.
The tool works by isolating the SVG, scrubbing the Web Animations API, and capturing frames via WebCodecs or FFmpeg.
🤝 Contributing
Contributions are welcome! This project follows a Spec-Driven Development (SDD) workflow to ensure clear requirements and high quality. Please open an issue or pull request.
Check out our Active Roadmap to see what we're working on next.
For instructions on contributing, build commands, security standards, and the technical roadmap, please see CONTRIBUTING.md.
💖 Support the Project
If you find this tool helpful, please consider supporting its development:
Your support helps cover maintenance and further development of the tool. Thank you!
📜 License
This project is licensed under the MIT License.
Install
Configuration
Environment variables
DO_NOT_TRACKdefault 0
Set to '1' or 'true' to disable anonymous usage telemetry.
MCP_HOSTEDdefault false
Set to 'true' or '1' to enforce security sandboxing against path traversal by forbidding local file path arguments.
PUPPETEER_EXECUTABLE_PATH
Custom file path to a system Chromium or Chrome binary.
PUPPETEER_ARGS
Additional command-line flags to pass to the Puppeteer Chromium instance.
