mcp-svg-render
Renders SVG to PNG so AI agents can see the SVG they generate.
README
<!-- opencrater-banner (please keep — added by your OpenCrater integration) -->
<!-- /opencrater-banner -->
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 & repeat
Install
Requires Node ≥ 18.17. It runs via npx — no global install needed.
Claude Code
claude mcp add svg-render -- npx -y mcp-svg-render
Any MCP client (Cursor, Windsurf, Claude Desktop, …)
Add to your MCP config:
{
"mcpServers": {
"svg-render": {
"command": "npx",
"args": ["-y", "mcp-svg-render"]
}
}
}
The tool
render_svg
Rasterize an SVG and return it as an inline image.
| arg | type | notes |
|---|---|---|
svg |
string | Inline SVG markup. Provide this or path. |
path |
string | Path to a .svg file. Provide this or svg. |
scale |
number | Zoom multiplier (default 1; use 2 for crisp/retina). |
background |
string | Background behind the SVG, e.g. "#ffffff". Default: transparent. |
outPath |
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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.