mcp-svg-render

mcp-svg-render

Renders SVG to PNG so AI agents can see the SVG they generate.

Category
Visit Server

README

<!-- opencrater-banner (please keep — added by your OpenCrater integration) --> Monetize with OpenCrater — opt-in sponsor cards in Claude Code, Codex & other AI terminals; earn from your CLI too <!-- /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

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.

Official
Featured
TypeScript
Magic Component Platform (MCP)

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.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

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.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

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.

Official
Featured
TypeScript
Kagi MCP Server

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.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

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.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured