SVG Editor for Claude Science

Website · 简体中文 · Quickstart · Releases · Wisp Science

SVG Editor is an AI-native MCP App for Claude Science and Wisp Science. It opens scientific SVG figures — including matplotlib, ggplot2, and Illustrator exports — as an interactive workbench. You edit titles, colors, fonts, legends, and panel letters by hand, or select elements and tell the host assistant what to change. The agent applies surgical svg_apply operations instead of redrawing the plot.

Claude Science and Wisp Science can call svg_open_editor to mount the live MCP App (ui://svg-editor/editor.html). If the host does not display the App, svg_create_artifact returns a self-contained HTML editor that opens in the right pane.

This repository is the source for the workbench, Claude / Wisp plugin, skill, and local stdio MCP connector. It is an independent project, not an Anthropic product.

Install with a coding agent

Give Claude Code, Codex, or another local coding agent with terminal access this repository and the following request:

Install the latest released version of SVG Editor for Claude Science from
https://github.com/xuzhougeng/svg-editor.

Follow docs/QUICKSTART.md. Use the published
svg-editor-for-claude-science.zip from GitHub Releases. Verify the release
SHA-256 before installing into Wisp Science (Settings → Plugins) or loading
it as a Claude Science / Claude Code plugin. Do not run npm for an end-user
release install. Use examples/sample-figure.svg for the first test.
Tell me when I need to enable the plugin, start a new session, or reconnect
the MCP server.

For manual installation, follow the quickstart.

Related MCP server: inkscape-mcp

What is included

• Interactive SVG canvas: select, pan/zoom, drag, undo/redo

• Property inspector for fill, stroke, font, opacity, and text

• Layer list for matplotlib / ggplot / Illustrator element trees

• Select elements in the canvas, then instruct the host assistant in chat

• Live MCP App for Wisp Science and Claude Science (text/html;profile=mcp-app)

• Model tools: svg_open_editor, svg_inspect, svg_apply, svg_get, svg_undo, svg_redo

• Fallback: svg_create_artifact returns a self-contained HTML workbench

• Surgical edits: set_text, recolor, set_font, translate, hide — no silent redraw of data paths

• Deterministic Claude plugin layout: .claude-plugin/plugin.json, .mcp.json, skills/*/SKILL.md

First success

Build or install the plugin, enable it, then attach examples/sample-figure.svg and ask:

Read the complete text of examples/sample-figure.svg. Call svg_open_editor
with filename "sample-figure.svg" and the complete SVG. If no live MCP App
frame appears, call svg_create_artifact, preserve the exact returned HTML,
and open it in the right pane. Then call svg_inspect and change the title
to "Figure 2A" with svg_apply. Do not redraw the bars or lines.

Develop from source

Requires Git and Node.js 20.19+ (22+ recommended):

git clone https://github.com/xuzhougeng/svg-editor.git
cd svg-editor
npm ci
npm test
npm run preview

npm run build

writes:

dist/mcp-app.html
dist/svg-editor-mcp.mjs
dist-plugin/                 # Claude Science / Wisp plugin tree
svg-editor-for-claude-science.zip
svg-editor-for-claude-science.checksums.json

Tools

Selectors: #id, [data-se-id="e12"], text:Exact, text:~partial, simple CSS.

Data safety

The editor has no hosted backend. SVG stays in the local MCP process and the sandboxed iframe. <script>, foreignObject, event handlers, and javascript: URLs are stripped. The iframe CSP allows no network. Data supplied through Claude Science or Wisp Science remains subject to those hosts’ policies. See SECURITY.md.

License

MIT.