Provides SVG editing capabilities: open an SVG, inspect its editable elements, surgically update properties such as colors, text, fonts, sizes, and visibility, and apply changes while preserving the original SVG structure and geometry.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@svg-editor Open the SVG figure and change the y-axis label to 'Total intensity (a.u.)'."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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
The assistant calls svg_open_editor (optionally with SVG text). Wisp / Claude Science opens the editor in the middle column.
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.
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.
Do not redraw the whole figure. Paths and data geometry remain unchanged by default.
Related MCP server: imagetosvg-mcp
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 MCPRun npm run build
Open Settings → Plugins → Install Plugin, choose svg-editor-for-claude-science.zip
For remote install, use the SHA-256 values in svg-editor-for-claude-science.checksums.json
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.
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
Tool | Purpose |
| Open the live editor |
| List editable elements |
| Make structured, surgical edits |
| Retreive current SVG |
| Document-level undo |
| Export standalone HTML |
| App only: write back manual edits |
Selector: #id, [data-se-id="e12"], name:exact, text:~partial, simple CSS.
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
This server cannot be deployed
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Agent-Native design tool - create and edit visual designs with agent assistance
Generate and vectorize clean, editable SVG graphics from text, images, or both.
Generate, edit, and export data-architecture diagrams from your AI. Column lineage, PNG in chat.
