<p align="center"> <img src=".github/assets/svg-editor-banner.svg" alt="SVG Editor for Claude Science and Wisp Science — MCP App for scientific figures, matplotlib SVG, and ggplot SVG." width="100%" /> </p>

SVG Editor for Claude Science

简体中文 · Quickstart · Releases · Wisp Science · Motif-style plugin layout

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 by spoken / written instruction. 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.

<p align="center"> <img src="docs/assets/svg-editor-workbench.png" alt="SVG Editor MCP App workbench showing a two-panel scientific figure, layer list, property inspector, and a natural-language command bar for Claude Science and Wisp Science." width="100%" /> </p>

<p align="center"><em>SVG Editor as an MCP App: click to edit a matplotlib/ggplot SVG, or send an instruction such as “change the title to Figure 2A”.</em></p>

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.

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
• Spoken / typed command bar (ui/message) plus a small local grammar
• 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

Tool	Role
svg_open_editor	Open the live SVG editor MCP App
svg_inspect	List #id / data-se-id / text / paints
svg_apply	Surgical operations on the live document
svg_get	Return the current SVG
svg_undo / svg_redo	Document history
svg_create_artifact	Self-contained HTML fallback
svg_commit	App-only canvas save

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.