Skip to main content
Glama
GehDoc

svg-to-video

by GehDoc
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

SVG to Video

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

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.

🌟 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 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.

Related MCP server: ClipACanvas

🚀 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 and fonts.

Quick Start

  1. Open the Web Studio.

  2. Drag and drop your .svg file.

  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 @gehdoc/svg-to-video input.svg 60 ./out-dir

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

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

# Docker (zero local dependencies; add :Z to -v for SELinux / Fedora)
docker run --rm -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", "@gehdoc/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 @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:

Donate

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

📜 License

This project is licensed under the MIT License.

Available Tools

2 tools
inspect_svg_animationB

Analyze an SVG file or raw SVG content to detect CSS keyframe animations, estimate duration, and extract viewBox dimensions.

ParametersJSON Schema
NameRequiredDescriptionDefault
svgContentNoRaw SVG content to inspect.
svgFilePathNoPath to the .svg file to inspect.

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full behavioral burden. 'Analyze/inspect' strongly implies a read-only, non-mutating operation and it discloses the returned facts (animations, duration, viewBox), which is useful. However, it says nothing about write behavior, failure modes on malformed SVG, or what happens when both inputs are supplied.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single well-formed sentence that front-loads the verb and resource before listing outputs. No filler, though it could have used the space to disambiguate the two input modes.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema, the description does useful work by naming the three returned values, and read-only semantics are implied. But it omits the input-mode selection rule and any error behavior, leaving meaningful gaps for an inspector tool with two optional parameters.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so both parameters are already documented, making 3 the baseline. The description adds only that input may be a file or raw content; it does not clarify precedence or mutual exclusivity between svgContent and svgFilePath, which is the key semantic ambiguity for this tool.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names a specific verb (analyze) and resource (SVG file or raw SVG content) and even enumerates the three analytic outputs (CSS keyframe animations, duration, viewBox). It is clearly distinct from render_svg_to_video, though it never names or contrasts that sibling explicitly.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It implies the tool is for inspection rather than rendering, but gives no when-to-use conditions, no statement on when to prefer raw content vs. a file path, and no exclusions relative to render_svg_to_video. Usage must be inferred.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_svg_to_videoB

Render an animated SVG (from file path or raw SVG code) into a high-quality video (MP4, WebM, MKV, MOV) or animated image (aPNG, GIF) with optional background transparency.

ParametersJSON Schema
NameRequiredDescriptionDefault
fpsNoFrames per second (e.g. 24, 30, 60). Default: 60.
holdNoSeconds to freeze the last frame at the end of the video.
scaleNoScale factor (1-4) when using original resolution. Default: 1.
formatNoOutput media format. Defaults to webm if transparent is true, otherwise mp4.
outDirNoOutput directory for the generated media file. Defaults to current working directory.
bgColorNoBackground color hex code (e.g. #ffffff). Cannot be used with transparent.
durationNoDesired animation duration in seconds. If omitted, duration is auto-detected.
resolutionNoResolution preset. Default: original.original
svgContentNoRaw SVG string content to render (if svgFilePath is not provided).
svgFilePathNoAbsolute or relative path to the input .svg file.
transparentNoRender with full alpha-channel transparency (supported for webm, gif, apng, mov).

TDQS

B3.3/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It usefully consolidates that transparency is only supported for webm/gif/apng/mov, but says nothing about where the file is written by default, overwrite behavior, performance/rate characteristics, or failure modes. It adds some value but leaves meaningful behavioral gaps for a file-writing tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence led by the verb 'Render', with zero filler. Every clause (input sources, output formats, transparency) adds information without repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With 11 parameters, no output schema, and no annotations, the description is adequate on the core render operation and output formats but omits the return value (e.g., the output file path) and edge-case behavior such as bgColor/transparent conflicts or default format selection. Complete enough to attempt a call, but not to predict results confidently.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so every parameter is already documented in the schema. The description's 'from file path or raw SVG code' phrasing restates the svgFilePath/svgContent distinction that the schema already provides, adding no new semantics. Baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb+resource: render an animated SVG into a video or animated image, and enumerates both input sources (file path or raw SVG) and output formats. It does not explicitly name or differentiate itself from the sibling inspect_svg_animation, but the render-vs-inspect distinction is inferable.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explains what the tool produces but gives no when-to-use guidance, no prerequisites, and no mention of the alternative inspect_svg_animation for pre-render inspection. An agent must infer the use case from the input/output description alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv0.27.8
    • First observedinspect_svg_animation
    • First observedrender_svg_to_video
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A3.7/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: render_svg_to_video performs conversion, while inspect_svg_animation analyzes SVG content for animation metadata. There is no overlap or ambiguity in selecting between them.

Naming Consistency5/5

Both names follow a consistent snake_case verb_svg_noun pattern (render_svg_to_video, inspect_svg_animation). The verb-first convention is predictable and readable.

Tool Count3/5

Only two tools are provided for an SVG-to-video utility. The set is minimal but not inappropriate for a narrow conversion purpose, though it feels thin compared to typical well-scoped servers.

Completeness4/5

The core conversion action and a useful inspection companion are present, covering the main workflow. Minor gaps such as format discovery or batch rendering exist but are not critical for the stated purpose.

Maintenance

ActivityActive
ResponsivenessSlow

Resources

Related MCP Connectors

Related MCP Servers