{"_id":"@benjaminholderbein/mcp-server-svg","_rev":"3-4782e211366729de84c3227efe84157d","name":"@benjaminholderbein/mcp-server-svg","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@benjaminholderbein/mcp-server-svg","version":"1.0.0","keywords":["mcp","svg","screenshot","playwright","claude"],"author":{"name":"BenjaminHolderbein"},"license":"MIT","_id":"@benjaminholderbein/mcp-server-svg@1.0.0","maintainers":[{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"}],"homepage":"https://github.com/BenjaminHolderbein/mcp-server-svg#readme","bugs":{"url":"https://github.com/BenjaminHolderbein/mcp-server-svg/issues"},"bin":{"mcp-server-svg":"index.js"},"dist":{"shasum":"a2bc7479b3c3f416de5c21ca29009d3cf3d12d69","tarball":"https://registry.npmjs.org/@benjaminholderbein/mcp-server-svg/-/mcp-server-svg-1.0.0.tgz","fileCount":6,"integrity":"sha512-BfXj1vnBJZe3zg/lTwrwj8WUTfvQK8JxrmEYI6xv6Ly6YKgsVobclp0mGF24mndXoK0g2RD+HIZpk7YYNNgLuA==","signatures":[{"sig":"MEUCICv4Cx+dBzjsR0Ra3n8qkL+Vi4+KIROibFq8lwQQSJdlAiEAxnf8gEEwL4vz89CvTqQEgajr2U8+SuSHBSflISDWsVo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9795},"type":"module","gitHead":"192469c8c3cc2a157aa80bcf4dce4325f021fb91","_npmUser":{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"},"repository":{"url":"git+https://github.com/BenjaminHolderbein/mcp-server-svg.git","type":"git"},"_npmVersion":"10.8.2","description":"MCP server that screenshots SVG files via headless Playwright and returns a base64 PNG to Claude Code","directories":{},"_nodeVersion":"20.19.6","dependencies":{"playwright":"^1.44.0","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mcp-server-svg_1.0.0_1775865548452_0.046750010777861783","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@benjaminholderbein/mcp-server-svg","version":"1.0.1","keywords":["mcp","svg","screenshot","playwright","claude"],"author":{"name":"BenjaminHolderbein"},"license":"MIT","_id":"@benjaminholderbein/mcp-server-svg@1.0.1","maintainers":[{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"}],"homepage":"https://github.com/BenjaminHolderbein/mcp-server-svg#readme","bugs":{"url":"https://github.com/BenjaminHolderbein/mcp-server-svg/issues"},"bin":{"mcp-server-svg":"index.js"},"dist":{"shasum":"a0f46ae9f42539dbf5cfb9b7e97d5218ee07e85b","tarball":"https://registry.npmjs.org/@benjaminholderbein/mcp-server-svg/-/mcp-server-svg-1.0.1.tgz","fileCount":6,"integrity":"sha512-uJQKUBMNV5+gV62epEZfgBQPOtQeWSesSreuPR55z66w3NVJTz5F3p/LkApZQROeu597JmmbYgGCLMdb6oMzLQ==","signatures":[{"sig":"MEUCICyF+uKhIzh0OqhxDDlt0nMIwAhM1kZZ/STLuLkCvjzQAiEA9uKxH2vX8FhSZR/GEXXlWN2Qnx1HYiHTjheTElXqFcQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10134},"type":"module","gitHead":"cd7dffed1c7a53b8cd0c90643f3d6c8001217f7b","_npmUser":{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"},"repository":{"url":"git+https://github.com/BenjaminHolderbein/mcp-server-svg.git","type":"git"},"_npmVersion":"10.8.2","description":"MCP server that screenshots SVG files via headless Playwright and returns a base64 PNG to Claude Code","directories":{},"_nodeVersion":"20.19.6","dependencies":{"playwright":"^1.44.0","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mcp-server-svg_1.0.1_1775865825052_0.14174837663346107","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@benjaminholderbein/mcp-server-svg","version":"1.0.2","description":"MCP server that screenshots SVG files via headless Playwright and returns a base64 PNG to Claude Code","type":"module","bin":{"mcp-server-svg":"index.js"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.0","playwright":"^1.44.0"},"keywords":["mcp","svg","screenshot","playwright","claude"],"author":{"name":"BenjaminHolderbein"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/BenjaminHolderbein/mcp-server-svg.git"},"_id":"@benjaminholderbein/mcp-server-svg@1.0.2","gitHead":"0ddada849a443033289064dbbcb890788af4dbfc","bugs":{"url":"https://github.com/BenjaminHolderbein/mcp-server-svg/issues"},"homepage":"https://github.com/BenjaminHolderbein/mcp-server-svg#readme","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-BelLz3vxodu6i0+xgwzc516kLbvCih/lltH7Td/KvQmwTJtZiUrxrZtQtwCbjHn9HmENRJ5iSAX+5kS5tQK+zQ==","shasum":"ffcaad5555688cc95ca95d66a053dffcec46659e","tarball":"https://registry.npmjs.org/@benjaminholderbein/mcp-server-svg/-/mcp-server-svg-1.0.2.tgz","fileCount":7,"unpackedSize":21256,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0D0wwO1QcropIjadTRQPqN5Bg318NoWivVCVaGigFswIgAdGQttfXuy56/70JLh+IBgvtmkIoTecMY8jZ6lGejmY="}]},"_npmUser":{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"},"directories":{},"maintainers":[{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-server-svg_1.0.2_1775868983356_0.9711090608183439"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T23:59:08.351Z","modified":"2026-04-11T00:56:23.650Z","1.0.0":"2026-04-10T23:59:08.597Z","1.0.1":"2026-04-11T00:03:45.196Z","1.0.2":"2026-04-11T00:56:23.545Z"},"bugs":{"url":"https://github.com/BenjaminHolderbein/mcp-server-svg/issues"},"author":{"name":"BenjaminHolderbein"},"license":"MIT","homepage":"https://github.com/BenjaminHolderbein/mcp-server-svg#readme","keywords":["mcp","svg","screenshot","playwright","claude"],"repository":{"type":"git","url":"git+https://github.com/BenjaminHolderbein/mcp-server-svg.git"},"description":"MCP server that screenshots SVG files via headless Playwright and returns a base64 PNG to Claude Code","maintainers":[{"name":"benjaminholderbein","email":"benjamin.holderbein@gmail.com"}],"readme":"# mcp-server-svg\n\nAn 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.\n\n![System diagram](diagram.svg)\n\n## How it works\n\nClaude 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.\n\n## Installation\n\nNo install needed. Claude Code pulls the server automatically via `npx`.\n\nThe only one-time step is installing the Playwright Chromium browser:\n\n```bash\nnpx playwright install chromium\n```\n\n## Claude Code configuration\n\nRegister the server via the Claude Code CLI:\n\n```bash\n# Project-scoped (this project only)\nclaude mcp add svg npx -- -y @benjaminholderbein/mcp-server-svg\n\n# Or globally (available in all projects)\nclaude mcp add svg npx -- -y @benjaminholderbein/mcp-server-svg -s user\n```\n\n## Usage\n\nOnce configured, Claude Code can call the tool automatically while working with SVG files. You can also prompt it directly:\n\n> \"Screenshot the SVG at `src/icons/logo.svg`\"\n\n> \"Show me what `diagram.svg` looks like\"\n\n### Tool: `screenshot_svg`\n\n| Parameter | Type | Required | Description |\n|---|---|---|---|\n| `file_path` | string | one of the two | Path to an `.svg` file on disk — the primary way to use this tool |\n| `svg_content` | string | one of the two | Raw SVG markup — for cases where you want to render inline SVG without a file |\n| `background` | string | optional | CSS background color, e.g. `\"white\"`. Defaults to transparent. |\n\n## Why I built this\n\nMermaid 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.\n\nSVG 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.\n\nThis 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.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}