SVG Editor

面向 Wisp Science 与 Claude Science 的 SVG 图编辑 MCP App。

核心能力：在对话里打开一张科学图 SVG，用手改（点选、拖动、改颜色/文字/字体），或 口述 / 打字（发给宿主助手，或就地执行简单指令）。

它按 Motif / Ketcher 同一套约定打包：

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

• 预打包的 stdio MCP（安装时不跑 npm install）

• ui://svg-editor/editor.html（text/html;profile=mcp-app）

• 宿主不挂 live App 时，用 svg_create_artifact 退回独立 HTML

工作方式

1. 助手调用 svg_open_editor（可带上 SVG 文本）。Wisp / Claude Science 在中间栏打开编辑器。

2. 你在画布上点选、改属性；选择状态通过 ui/update-model-context 进入下一轮对话。

3. 底部指令栏：

   • 就地执行：本地语法（改标题、换色、隐藏图例、字号、平移）

   • 发给助手：ui/message，由模型 svg_inspect + svg_apply 做手术式修改

4. 不要整图重画。路径和数据几何默认保持原样。

Related MCP server: imagetosvg-mcp

开发

需要 Node.js 20.19+（推荐 22+）。

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

安装到 Wisp Science

1. npm run build

2. 打开 设置 → 插件 → 安装插件，选择 svg-editor-for-claude-science.zip

3. 远程安装请使用 svg-editor-for-claude-science.checksums.json 里的 SHA-256

4. 为当前项目启用插件，点 在新会话中使用

Wisp 会把 MCP App 开成中间标签，并在 App 仍绑定原 MCP 连接时转发 tools/call（含 app-only 的 svg_commit）。

安装到 Claude Science

把 dist-plugin/ 或 zip 作为 Claude plugin 加载（与 Motif for Claude Science 相同的目录布局）。批准本地 MCP 后调用：

• svg_open_editor — live App

• svg_create_artifact — 独立 HTML 回退

工具

选择器：#id、[data-se-id="e12"]、text:精确、text:~部分、简单 CSS。

安全边界

• 去掉 <script>、foreignObject、事件属性和 javascript: URL

• UI 在脚本-only、不透明 origin 的 iframe 里运行；CSP 不允许外网

• 单图上限 2 MB