SVG Editor

An SVG figure editing MCP App for Wisp Science and Claude Science.

Core capabilities: open a scientific SVG figure in the conversation and edit it by hand (point-and-click selection, drag, change colors/text/fonts), or dictate / type (send to the host assistant, or run simple instructions in place).

It is packaged following the same conventions as Motif / Ketcher:

• .claude-plugin/plugin.json + .mcp.json + skills/*/SKILL.md

• Pre-packaged stdio MCP (no npm install when installing)

• ui://svg-editor/editor.html (text/html;profile=mcp-app)

• When the host does not provide a live App, fall back to a standalone HTML via svg_create_artifact

How it works

1. The assistant calls svg_open_editor (optionally with SVG text). Wisp / Claude Science opens the editor in the middle column.

2. You can click to select and change properties on the canvas; the selection state is passed into the next turn via ui/update-model-context.

3. The built-in command bar:

   • Execute locally: local syntax (change title, change color, hide legend, font size, pan/zoom)

   • Send to assistant: ui/message, then the model uses svg_inspect + svg_apply to make surgical edits.

4. Do not redraw the whole figure. Paths and data geometry remain unchanged by default.

Related MCP server: imagetosvg-mcp

Development

Requires Node.js 20.19+ (22+ recommended).

npm install
npm test
npm run preview    # 浏览器里单独预览编辑器
npm run build      # UI + server + dist-plugin zip
node dist/svg-editor-mcp.mjs   # stdio MCP

Installing into Wisp Science

1. Run npm run build

2. Open Settings → Plugins → Install Plugin, choose svg-editor-for-claude-science.zip

3. For remote install, use the SHA-256 values in svg-editor-for-claude-science.checksums.json

4. Enable the plugin for the current project, and click Start new session

Wisp will open the MCP App in the middle column, and forward tools/call (including the app-only svg_commit) while the App is still bound to the original MCP connection.

Installing into Claude Science

Load dist-plugin/ or the zip as a Claude plugin (same directory layout as Motif for Claude Science). After approving the local MCP, call:

• svg_open_editor — open the live editor

• svg_create_artifact — standalone HTML fallback

Tools

Selector: #id, [data-se-id="e12"], name:exact, text:~partial, simple CSS.

Security boundaries

• Strips <scripts>, foreignObject, event handler attributes, and javascript: URLs

• UI runs in a sandboxed, opaque-origin iframe; CSP forbids external network access

• Single-image cap: 2 MB