SVG Studio
Turn artwork into clean, editable SVG. Entirely in your browser.
Try SVG Studio · Browse collections · Install skill and MCP
Paste, drop or choose an image, adjust the trace, compare it with the source and export SVG, one file or all of them as a zip. Existing SVG imports without retracing. Nothing leaves the page: tracing runs in the browser, so your artwork is never uploaded. Raster tracing approximates the source; it does not reproduce every shade or fine detail.
Collection
Eight collections of transparent SVGs, with version choices, an inspector, copy and download. Use the visual collection choices or the Left and Right arrow keys to move between them.
| Theme | Contents |
|---|---|
| Minimal | Classic and Modern stationery, and the Rustidian logo colours |
| Sci-fi | Courier loop, Elpis marks and startup SVGs, then interface icons |
| Japanese | Tea garden animation and Japanese garden icons |
| Persian | Hafez and dream cards, with Persian symbols |
| Cars | Vehicles, then parts and driving icons |
| Botanical | Botanical artwork, 28 icons and Garden of night |
| Graphic | Graphic artwork and 29 interface icons |
| Dark garden | Garden artwork and 30 icons |
Each collection opens with its artwork filling the first screen. Browse assets opens the next section, where you can choose a version, inspect, copy or download its SVG. Motion plays on each visit; icon controls pause and resume it. Reduced motion starts paused. Download files bundles each theme as a zip.
For agents: skill and MCP
Install provides the SVG Studio skill, a shadcn-compatible SVG registry and local tracing MCP package. The official shadcn MCP can find and install individual SVGs or a collection into your project.
mcp-server/ has two tracing tools, vectorize_image and batch_vectorize, that trace images with the studio's tuned settings. Build it from source and register it with your client:
cd mcp-server && npm install && npm run build
claude mcp add svg-studio -- node "$PWD/dist/index.js"
mcp-server/README.md documents the tools, their options and a config snippet for other clients.
Run locally
npm ci
npm run dev
npm run build
Next.js App Router, React and shadcn components, exported as a static site. npm run build runs the conversion and workbench tests, then writes the site to out/.
The local build checks hero actions across every collection and responsive breakpoint. Run npm run check:hero-actions to repeat the check on out/, or pass a URL after -- to check a deployed version. The check uses the workspace Playwright installation at ~/Desktop/p/skills/web-dev/ui-check/node_modules/playwright; set PLAYWRIGHT_MODULE or PLAYWRIGHT_CHROME_EXECUTABLE if needed.
Contributing and licence
Bug reports and contributions are welcome: see CONTRIBUTING.md and the bug report form. The code is MIT licensed.