What can you do with this server?

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 .svg file to rasterize it * Inline 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., 2 for retina-quality output, up to 8×) * Background color — Set a background color (e.g., #ffffff); defaults to transparent * Save PNG to disk — Optionally write the rendered PNG to a file via outPath * System font support — elements render correctly using automatically loaded system fonts * Embedded 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).

How do I use mcp-svg-render?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. 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 & 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"]
    }
  }
}

Related MCP server: code-shot

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

Available Tools

1 tool

render_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).

ParametersJSON Schema

Name	Required	Description
`svg`	No	Inline SVG markup. Provide this OR `path`.
`path`	No	Path to a .svg file. Provide this OR `svg`.
`scale`	No	Zoom multiplier for the raster (default 1; use 2 for crisp/retina output).
`background`	No	Background behind the SVG, e.g. '#ffffff' or 'white'. Default: transparent.
`outPath`	No	If set, also write the rendered PNG to this file path.

TDQS

A4.6/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It discloses the core behavior (rasterization to PNG, inline return), ability to save to disk via outPath, and accepts either inline markup or file path. However, it does not mention error handling, validation, or side effects like file system access for outPath. Still, it is sufficiently transparent for a rendering tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences with no unnecessary words. It front-loads the core action and then provides usage guidance and parameter summary. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema, the description explains the return format (PNG inline) and covers all main parameters. It doesn't explicitly handle mutual exclusivity of svg and path in the description (only in schema), which is a minor gap. Overall, it is reasonably complete for a tool with 5 optional parameters.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so baseline is 3. The description adds context by explaining that 'svg' and 'path' are mutually exclusive, scale is a 'zoom multiplier', background is a background color, and outPath saves to disk. This adds value beyond the schema, justifying a 4.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool rasterizes SVG to PNG and returns it inline. It specifies the verb ('rasterize') and resource ('SVG to PNG'), and provides concrete use cases like diagram, UI mockup, etc. No sibling tools exist, so no differentiation needed.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly tells when to use the tool: 'right after writing or editing any SVG' to visually verify layout, alignment, overflow, and colors. This provides clear contextual guidance without needing exclusions or alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

1 tool updatev0.1.0Jun 13, 2026
- First observedrender_svg

Deploy Server

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A4.5/5.0

Scored 2026-06-13 08:27 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 issues

Resources

Need Help?

Related Servers

Related MCP Connectors

Rendry
io.rendry
Deterministic image rendering for agents: JSON template in, on-brand PNG out.
Image & Video Processing Marketing Design Tools
1
CleanVector
ai.cleanvector
Generate vector art, vectorize images, and return SVG, PNG, and logo kits to AI agents.
Image & Video Processing Design Tools
1
SVG AIOAuth
org.svgai
Generate and vectorize clean, editable SVG graphics from text, images, or both.
AI & Machine Learning Image & Video Processing Design Tools
1
mcpOAuth
com.slickfast
Render 47 chart types and tiled dashboards as PNG/SVG. Deterministic, no headless browser.
Data Visualization Image & Video Processing
1

Related MCP Servers

ClipACanvas
Developer Tools Multimedia Processing
mechreaper007x
A
license
A
quality
C
maintenance
Render 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.
Updated 3 months ago (2026-06-04 17:49 UTC)
2
MIT
code-shot
Developer Tools Image & Video Processing
thesimonharms
A
license
A
quality
F
maintenance
Renders 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.
Updated 6 days ago (2026-09-09 14:43 UTC)
2
4 npm
MIT
svg-generator-mcp
Image & Video Processing AI & Machine Learning
tjboudreaux
A
license
Not graded
quality
D
maintenance
Generates SVGs from text prompts and converts raster images to SVG using the Quiver AI API.
Updated 7 months ago (2026-02-26 09:07 UTC)
2
MIT
Rayzia MCPofficial
Design Tools Image & Video Processing
RayziaOfficial
A
license
Not graded
quality
C
maintenance
Enables 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.
Updated 2 months ago (2026-07-22 15:05 UTC)
MIT

mcp-svg-render

Install

Claude Code

Any MCP client (Cursor, Windsurf, Claude Desktop, …)

The tool

render_svg

Example

Why

License

Available Tools

TDQS

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

ClipACanvas

code-shot

svg-generator-mcp

Rayzia MCPofficial

`render_svg`