MCP 服务器

svg-editor

Enables interactive editing of scientific SVG figures in chat, allowing users to open, inspect, modify, undo/redo, and export SVGs through direct manipulation or natural language commands.

README

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.

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”.

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.