A
licenseA
qualityA
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.
Last updated
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 "Install 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-renderRender 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: code-shot
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
Maintenance
–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity
Tools
Related MCP Servers
- AlicenseAqualityBmaintenanceRenders source code as beautiful SVG or PNG images with syntax highlighting, line numbers, and diff support. Ideal for AI agents to present code visually to humans or for sharing snippets.Last updated2188MIT
- AlicenseAqualityBmaintenanceEnables AI agents to vectorize raster images and import vector files (PDF/AI/EPS), then inspect, edit, render, and optimize SVGs locally.Last updated6MIT
- Alicense-qualityDmaintenanceGenerates SVGs from text prompts and converts raster images to SVG using the Quiver AI API.Last updated2MIT
Related MCP Connectors
Screenshot and HTML render MCP server for AI agents
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
DXF drawings for AI agents: structured facts, PNG renders, and an interactive in-chat viewer.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ope-olatunji/mcp-svg-render'
If you have feedback or need assistance with the MCP directory API, please join our Discord server