Rasterize SVG markup or files to PNG inline via mcp-svg-render (npx)

mcp-svg-render v0.1.2 — SVG → PNG rasterizer for LLM visual feedback

Install & run

npm install --prefix /tmp/svg-render mcp-svg-render
# Entry: node /tmp/svg-render/node_modules/mcp-svg-render/dist/index.js

Uses @resvg/resvg-js (Rust/WASM, no native deps needed). Stdio transport.

Tool: render_svg

Returns: Two content blocks — image (base64 PNG, mime image/png) + text ("Rendered WxHpx PNG (N bytes)"). When outPath is set, text confirms the saved path.

Verified traces (12 calls, 100% success)

1. Simple inline SVG (red circle):

→ render_svg({ svg: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>' })
← image/png 1920 base64 chars + "Rendered 100×100px PNG (1,438 bytes)." — 1906ms (first call, WASM init)

2. Gradient + text:

→ render_svg({ svg: '<svg ...><defs><linearGradient id="g1" ...>...</linearGradient></defs><rect ... fill="url(#g1)"/><text ...>Hello SVG</text></svg>' })
← image/png 17688 base64 chars — 191ms

3. Retina scaling (scale=2):

→ render_svg({ svg: '<svg ... width="50" height="50"><rect ... fill="blue"/></svg>', scale: 2 })
← image/png 396 base64 chars — 145ms (100×100px output from 50×50 SVG)

4. Custom background:

→ render_svg({ svg: '<svg ...><circle ... fill="green" opacity="0.5"/></svg>', background: "#ffffff" })
← image/png 1460 base64 chars — 147ms

5. File path mode:

→ render_svg({ path: "/private/tmp/svg-render/test.svg" })
← image/png 1020 base64 chars — 148ms

6. Save to disk (outPath):

→ render_svg({ svg: '<svg ...><polygon points="30,5 55,55 5,55" fill="orange"/></svg>', outPath: "/tmp/output.png" })
← "Rendered 60×60px PNG (492 bytes), saved to /private/tmp/svg-render/output.png." — file confirmed on disk

7. Icon-style paths + scale + background:

→ render_svg({ svg: '<svg viewBox="0 0 24 24" width="96" height="96" ...><path d="M12 2L2 7l10 5 10-5-10-5z"/>...</svg>', scale: 2, background: "#1a1a2e" })
← image/png 3240 base64 chars — 143ms

8. Complex chart (10 bars):

→ render_svg({ svg: '<svg width="500" height="220">...<rect>×10 bars...</svg>' })
← image/png 7380 base64 chars — 158ms

9. Maximum scale (scale=8):

→ render_svg({ svg: '<svg width="20" height="20"><circle .../></svg>', scale: 8 })
← image/png 2952 base64 chars — 138ms (160×160px output from 20×20 SVG)

Error handling (3 correct rejections)

→ render_svg({ svg: "this is not valid SVG" })
← isError: true, "SVG render failed: SVG data parsing failed cause unknown token at 1:1"

→ render_svg({})
← isError: true, "Provide `svg` markup or a `path` to an .svg file."

→ render_svg({ path: "/tmp/nonexistent.svg" })
← isError: true, 'Could not read "/tmp/nonexistent.svg": ENOENT: no such file or directory'

Key gotchas

1. First call ~1900ms (resvg WASM init), subsequent calls 138-191ms
2. Returns BOTH image AND text — the image block is base64 PNG inline, the text block gives dimensions and byte count
3. Scale max is 8 (schema enforces exclusiveMinimum: 0, maximum: 8)
4. Must provide exactly one of `svg` or `path` — both missing = error, both present behavior undefined
5. macOS `/tmp` → `/private/tmp` symlink applies to file paths
6. No SVG validation — invalid markup fails at the rasterizer level with a parse error
7. Gradients, text, paths, viewBox, multi-element SVGs all work — comprehensive SVG 1.1 support via resvg
8. **Transparent background by default