mcpField
S
SVG to Video

SVG to Video

Local
gehdoc.github.ioMedia & Design5Updated 5d ago
RepositoryVisit website

About SVG to Video

SVG to Video converts CSS- and SMIL-animated SVGs into videos or animated images for developers who need browser-based or automated conversion. It supports frame-accurate capture and transparency, with a Web Studio, CLI, and MCP integration.

Key features

  1. 01Convert to MP4, WebM, and other video formats
  2. 02Export GIF and aPNG
  3. 03Capture CSS and SMIL animations frame by frame
  4. 04Support transparency and metadata
  5. 05Use the browser studio, CLI, or Docker tool

Use cases

  1. 01Convert SVG animations in a browser
  2. 02Batch-process animations in CI/CD
  3. 03Create transparent video overlays

MCP support

The MCP server exposes SVG animation conversion to AI assistants, allowing MCP clients to generate videos or animated images through tools.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "gehdoc-svg-to-video": {
      "command": "npx",
      "args": [
        "-y",
        "@gehdoc/svg-to-video"
      ],
      "env": {
        "DO_NOT_TRACK": "<DO_NOT_TRACK>",
        "MCP_HOSTED": "<MCP_HOSTED>",
        "PUPPETEER_EXECUTABLE_PATH": "<PUPPETEER_EXECUTABLE_PATH>",
        "PUPPETEER_ARGS": "<PUPPETEER_ARGS>"
      }
    }
  }
}
Run commandnpx -y @gehdoc/svg-to-video
Environment variables to set
DO_NOT_TRACKSet to '1' or 'true' to disable anonymous usage telemetry.
MCP_HOSTEDSet to 'true' or '1' to enforce security sandboxing against path traversal by forbidding local file path arguments.
PUPPETEER_EXECUTABLE_PATHCustom file path to a system Chromium or Chrome binary.
PUPPETEER_ARGSAdditional command-line flags to pass to the Puppeteer Chromium instance.

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@gehdoc/svg-to-video0.33.0
ocidocker.io/gehdoc/svg-to-video:0.33.0

Tools

2

Saved tool list · updated 1w ago

ParameterTypeRequiredDescription
fpsnumberNoFrames per second (e.g. 24, 30, 60). Default: 60.
holdnumberNoSeconds to freeze the last frame at the end of the video.
scalenumberNoScale factor (1-4) when using original resolution. Default: 1.
widthnumberNoCustom output video width in pixels.
formatenumNoOutput media format. Defaults to webm if transparent is true, otherwise mp4.mp4 | webm | gif | apng | mkv | mov
heightnumberNoCustom output video height in pixels.
outDirstringNoOutput directory to preserve generated file locally. Omit to deliver purely in-band via ephemeral storage.
bgColorstringNoBackground color hex code (e.g. #ffffff). Cannot be used with transparent.
durationnumberNoDesired animation duration in seconds. If omitted, duration is auto-detected.
resolutionstringNoResolution preset (original, 1080p, 720p) or formatted string (e.g. 1080x1080, 1080x1920). Default: original.
svgContentstringNoRaw SVG XML string content.
svgFilePathstringNoPath to the input .svg file (required if svgContent is not provided).
transparentbooleanNoRender with full alpha-channel transparency (supported for webm, gif, apng, mov).

Details

From the project README
SVG to Video Logo

SVG to Video

CI Last Commit GitHub Release npm Version Docker Image MCP Registry HuggingFace Space llms.txt

A high-fidelity tool to transform your CSS- and SMIL-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.

SVG to Video Demo

Automated demo generated by our CI/CD pipeline

🌟 Why SVG to Video?

  • 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 both the Web Animations API and native SVG SMIL, 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) and hosted live on HuggingFace Spaces.
  • 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.

🌐 Web Studio

🚀 Try the Web Studio

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.

Explore our Visual Gallery (Storybook) to see how the engine handles complex CSS, SMIL, and fonts.

Quick Start
  1. Open the Web Studio.
  2. Drag and drop your .svg file, or test the engine instantly with 1-click built-in samples.
  3. Adjust resolution, duration, and FPS.
  4. Select your format, toggle Transparent Background if needed, and ensure High-Fidelity Capture is enabled for best results.
  5. 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.

Quick Start

Ensure Node.js and FFmpeg are installed.

# 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

See docs/CLI.md for full usage, arguments, and options. For local building and source execution, see CONTRIBUTING.md.

🤖 AI Agent & MCP Integration

Connect svg-to-video to AI Assistants (Claude Desktop, Cursor, Antigravity, AutoGPT) via Model Context Protocol:

  1. Add to mcpServers config: 
    {
  "mcpServers": {
    "svg-to-video": {
      "command": "npx",
      "args": ["-y", "-p", "@gehdoc/svg-to-video", "svg-to-video-mcp"]
    }
  }
}
  2. Prompt your AI Assistant:

    "Convert examples/example.svg into a 60fps transparent WebM video."

See docs/MCP.md for full setup instructions, tool schemas, Docker execution, and agent prompting guides.

🔗 Official Package Distributions

📦 Quick Installation & Execution

# 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

🛠 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 both the Web Animations API and native SVG SMIL DOM, and capturing frames via WebCodecs or FFmpeg.

❓ FAQ

Common questions about privacy, how frame scrubbing works, CI/CD automation, and transparency support are answered in docs/FAQ.md.

🤝 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:

Donate

Your support helps cover maintenance and further development of the tool. Thank you!

📜 License

This project is licensed under the MIT License.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.