<p align="center">
  <img src=".github/assets/svg-editor-banner.svg" alt="SVG Editor for Claude Science and Wisp Science — MCP App for scientific figures, matplotlib SVG, and ggplot SVG." width="100%" />
</p>

# SVG Editor for Claude Science

[Website](https://xuzhougeng.github.io/svg-editor/) ·
[简体中文](README.zh-CN.md) ·
[Quickstart](docs/QUICKSTART.md) ·
[Releases](https://github.com/xuzhougeng/svg-editor/releases) ·
[Wisp Science](https://github.com/xuzhougeng/wisp-science)

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 **select elements and tell
the host assistant** what to change. 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.

<p align="center">
  <img src="docs/assets/svg-editor-workbench.png" alt="SVG Editor MCP App workbench showing a two-panel scientific figure, layer list, and property inspector for Claude Science and Wisp Science." width="100%" />
</p>

<p align="center"><em>SVG Editor as an MCP App: click to select a matplotlib/ggplot SVG, then ask the host assistant to change it (for example “change the title to Figure 2A”).</em></p>

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:

```text
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](docs/QUICKSTART.md).

## 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
- Select elements in the canvas, then instruct the host assistant in chat
- 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`](examples/sample-figure.svg) and ask:

```text
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):

```bash
git clone https://github.com/xuzhougeng/svg-editor.git
cd svg-editor
npm ci
npm test
npm run preview
```

```bash
npm run build
```

writes:

```text
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](SECURITY.md).

## License

MIT.