Back to catalog
SVG-Edit
MITSVG-Edit is an open-source browser vector editor replacing Boxy SVG for teams embedding a customizable SVG canvas without cloud subscriptions.
Open-source alternative to — compare it against:
Overview
SVG-Edit is a browser-based vector graphics editor driven entirely by client-side JavaScript. Its core architecture separates the user interface from an underlying drawing engine that developers can embed into custom web applications. Because the tool operates directly on standard browser DOM elements, technical teams can modify, inspect, and export raw SVG markup without external server dependencies.
Why SVG-Edit instead of Boxy SVG
Boxy SVG targets designers and web developers who need a dedicated application for web illustrations. It offers a polished interface, native desktop packaging, and deep CSS styling controls that streamline independent asset creation. However, Boxy SVG operates under a proprietary subscription model requiring cloud accounts, which prevents embedding the editing canvas into custom internal software.
SVG-Edit treats vector graphics as an open, embeddable component. The project separates its interface from the underlying drawing engine, distributed via the @svgedit/svgcanvas package. Teams can host the editor as static files behind a reverse proxy or mount the canvas directly inside internal consoles to diagram topologies and annotate schematics. While teams forgo Boxy SVG's modern interface polish, they eliminate per-seat fees and retain complete architectural control over their graphics tooling.
What it does well
- Decoupled canvas engine: Distributes the core @svgedit/svgcanvas library as an npm package, allowing developers to embed an interactive vector surface directly into web applications.
- Direct DOM manipulation: Updates standard SVG nodes directly in the browser DOM, ensuring exported markup adheres strictly to W3C specifications without proprietary metadata.
- Static client-side hosting: Runs entirely in browser memory as static assets, enabling DevOps teams to serve the tool from object storage or Nginx without databases.
- Extensible plugin system: Supports custom JavaScript and React extensions, letting engineers add domain-specific tools, symbols, and automated export routines.
- Live source editing: Provides an integrated markup viewer that lets developers inspect, edit, and sanitize XML attributes before saving assets.
- Client-side format export: Converts drawings to clean SVG code, PNG images, or PDF documents directly in the browser without backend rendering infrastructure.