mcp-svg-render
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
Tools
Latest Blog Posts
- 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