About Server Svg
Server Svg is an MCP server published by BenjaminHolderbein in the Browser category: mCP server that screenshots SVG files via headless Playwright and returns a base64 PNG to Claude Code.
Recent commit activity is the strongest signal that reported issues will get attention.
Install
claude mcp add server-svg -- npx -y @benjaminholderbein/mcp-server-svgnpx -y @benjaminholderbein/mcp-server-svgThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
Ask AI about Server Svg
Powered by Claude · Grounded in docs
Security checks
- ✓README presentThe repository ships documentation.
5 checks have not been run yet.
README
mcp-server-svg
An MCP server that lets Claude Code screenshot SVG files directly in context. Pass a file path, get back a rendered PNG — no scripts, no wrapper files, no manual steps.
How it works
Claude Code calls the screenshot_svg tool with an SVG file path. The server reads the file, wraps it in a minimal HTML page, renders it headlessly with Playwright Chromium, and returns a base64 PNG image that Claude Code displays inline.
Installation
No install needed. Claude Code pulls the server automatically via npx.
The only one-time step is installing the Playwright Chromium browser:
npx playwright install chromium
Claude Code configuration
Register the server via the Claude Code CLI:
# Project-scoped (this project only)
claude mcp add svg npx -- -y @benjaminholderbein/mcp-server-svg
# Or globally (available in all projects)
claude mcp add svg npx -- -y @benjaminholderbein/mcp-server-svg -s user
Usage
Once configured, Claude Code can call the tool automatically while working with SVG files. You can also prompt it directly:
"Screenshot the SVG at
src/icons/logo.svg"
"Show me what
diagram.svglooks like"
Tool: screenshot_svg
| Parameter | Type | Required | Description |
|---|---|---|---|
file_path |
string | one of the two | Path to an .svg file on disk — the primary way to use this tool |
svg_content |
string | one of the two | Raw SVG markup — for cases where you want to render inline SVG without a file |
background |
string | optional | CSS background color, e.g. "white". Defaults to transparent. |
Why I built this
Mermaid is the go-to for diagramming with Claude, but its auto-layout quickly becomes a constraint — you lose control of positioning, spacing, and visual structure the moment your diagram gets complex.
SVG is the better tool for precise, expressive diagrams. The problem is that Claude Code can't easily iterate on SVG because it can't see what it's producing. The feedback loop was broken: write SVG, save, open a browser, refresh, go back to the terminal, repeat.
This server closes that loop. Claude Code can now render and see the SVG in the same context where it's editing it — making visual iteration with SVG as fast and natural as working with any other file.
License
MIT
README copy captured when this server was indexed; it may lag the repository. The original is authoritative.