A
licenseA
qualityB
maintenanceRender HTML/CSS/JS/SVG animations into high-quality MP4 videos. Exposes render tools to AI agents using Playwright (Chromium) and FFmpeg, running locally or remote.
2
2
MIT
mcp-svg-render
by ope-olatunji
The mcp-svg-render server converts SVG markup or files into PNG images, returning them inline so AI agents can visually verify their own SVG output.
Core capabilities:
Render inline SVG markup — Pass raw SVG code as a string to rasterize it instantly
Render SVG from a file — Provide a path to a
.svgfile to rasterize itInline image return — The rendered PNG is returned directly in the conversation so the agent can immediately see the result
Scale/zoom control — Adjust the zoom multiplier (e.g.,
2for retina-quality output, up to 8×)Background color — Set a background color (e.g.,
#ffffff); defaults to transparentSave PNG to disk — Optionally write the rendered PNG to a file via
outPathSystem font support —
<text>elements render correctly using automatically loaded system fontsEmbedded image support — Renders
data:URI images embedded in SVGs
This closes the author→see→fix loop, enabling AI agents to write SVG, render it, spot issues (misalignment, overflow, wrong colors), and iterate—without requiring a headless browser (uses resvg for fast, cross-platform rendering).
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-svg-render Render the SVG I just created to see the pipeline diagram."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
mcp-svg-render
Give your AI coding agent eyes for the SVG it writes.
Models can author SVG — diagrams, UI mockups, charts, icons, logos, badges — but they can't see the result, so they ship misaligned, overflowing, or wrong-colored graphics blind and only find out when you tell them. This MCP server fixes that with one tool: render_svg rasterizes SVG to PNG (via resvg — no headless browser) and returns it inline as an image, so the model closes the author → see → fix loop in a single call.
write SVG → render_svg → the agent sees the PNG → fix & repeatInstall
Requires Node ≥ 18.17. It runs via npx — no global install needed.
Claude Code
claude mcp add svg-render -- npx -y mcp-svg-renderAny MCP client (Cursor, Windsurf, Claude Desktop, …)
Add to your MCP config:
{
"mcpServers": {
"svg-render": {
"command": "npx",
"args": ["-y", "mcp-svg-render"]
}
}
}Related MCP server: Rayzia MCP
The tool
render_svg
Rasterize an SVG and return it as an inline image.
arg | type | notes |
| string | Inline SVG markup. Provide this or |
| string | Path to a |
| number | Zoom multiplier (default |
| string | Background behind the SVG, e.g. |
| string | If set, also writes the PNG to this path. |
Returns the rendered PNG as an inline image plus a one-line summary (Rendered WxH PNG (N bytes)).
System fonts are loaded automatically, so <text> renders; embedded data: images render too.
Example
Agent: "Draw a 3-node pipeline diagram in SVG and show it to me."
The agent writes the SVG, calls render_svg, and the rendered image comes straight back in the conversation — no screenshots, no guessing.
Why
Built after one too many sessions shipping a banner/diagram with overlapping text because the model couldn't see its own output. SVG covers a huge slice of what an agent needs to draw, and resvg renders it fast and cross-platform with prebuilt binaries (no Chromium).
License
MIT
Available Tools
1 toolrender_svgRender SVG to imageA
Rasterize an SVG to a PNG and return it INLINE as an image so you can actually SEE the result. Use it right after writing or editing any SVG — a diagram, UI mockup, chart, icon, logo, or badge — to visually verify layout, alignment, overflow, and colors before shipping. Accepts inline markup (svg) or a file (path), and can also save the PNG to disk (outPath).
Inputs: svg, path, scale, background, +1 more.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
A4.5/5.0
Scored across 1 tool
Disambiguation5/5
With only one tool, there is no possibility of confusion. An agent will always select the correct tool.
Naming Consistency5/5
The single tool 'render_svg' follows a clear verb_noun pattern. Consistency is perfect by default.
Tool Count3/5
A single tool is borderline for an SVG render server. While it covers the core task, typical servers would include additional helper or validation tools.
Completeness4/5
The tool handles the primary use case of rasterizing SVG to PNG with inline or file input and output saving. Minor gaps like SVG validation are absent but not critical.
Maintenance
ActivityInactive
ResponsivenessNo recent community issues
Related MCP Connectors
Deterministic image rendering for agents: JSON template in, on-brand PNG out.
Lets AI assistants draw: logos, posters, illustrations and scenes, as editable SVG and PNG.
Generate and vectorize clean, editable SVG graphics from text, images, or both.
Screenshot, PDF and Open Graph image API for AI agents: capture pages, render PDFs, make OG images.
Related MCP Servers
Rayzia MCPofficial
AlicenseNot gradedqualityDmaintenanceEnables AI agents to drive a live SVG/vector editor, allowing a full observe-and-act loop on a canvas with real tools, state reading, and PNG rendering.2MIT- AlicenseNot gradedqualityCmaintenanceA deterministic SVG perception tool for LLM agents that renders SVGs in a real browser to measure geometry, colors, and spatial constraints, reporting results in grid grammar and W3C color names without guessing.37 npmMIT
- AlicenseNot gradedqualityCmaintenanceEnables AI agents to generate professional SVG artwork, icons, and vector logos from text prompts, and to vectorize raster images into clean, editable SVG files.MIT