SVG Editor

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

Core capabilities: open a scientific SVG figure in the conversation and edit it by hand (select, drag, change color/text/font) or dictate / type (send it to the host assistant, or execute simple commands in place).

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

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

• Prepackaged stdio MCP (no npm install at install time)

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

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

How it works

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

2. You select and change attributes on the canvas; the selection state is carried into the next turn via ui/update-model-context.

3. Bottom command bar:

   • Run in place: local syntax (change title, change color, hide legend, font size, pan)

   • Send to assistant: ui/message; the model performs surgical edits with svg_inspect + svg_apply

4. Do not redraw the whole figure. Paths and data geometry stay untouched 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

Install into Wisp Science

1. npm run build

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

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

4. Enable the plugin for the current project and click Use in a new session

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

Install 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 — live App

• svg_create_artifact — standalone HTML fallback

Tools

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

Security Boundaries

• Removes <script>, foreignObject, event attributes, and javascript: URLs

• The UI runs in a script-only, opaque-origin iframe; CSP does not allow external domains

• Single SVG limit: 2 MB