A professional, modern SVG and vector path editor built with React, TypeScript, and Vite. Inspired by the layer workflow of design tools like Figma and Photoshop, with a deep, first-class path-manipulation engine inspired by svg-path-editor.
- Full SVG Path Command Support: Visually edit every SVG path command:
M,L,H,V,C,S,Q,T,A, andZ. - Interactive Control Handles: Drag nodes and Bézier control points with precision snapping.
- Coordinate Mode Toggling: Seamlessly switch individual commands between absolute (uppercase) and relative (lowercase).
- Geometric Transformations:
- Translate, scale, and rotate paths interactively.
- Reverse path direction.
- Change path origin / start node.
- Optimize paths (remove redundant commands, merge collinear lines, round decimals).
- Hierarchical Layer Tree: Organize artwork into layers and nested groups (
<g>). - Layer Controls:
- Reorder z-index via drag-and-drop or actions.
- Visibility toggles (show / hide).
- Lock / unlock to prevent accidental edits.
- Rename, duplicate, and delete layers.
- Per-Layer Styling: Custom fill, stroke, stroke-width, and opacity per layer.
- Primitive Elements: Direct parsing and layer representation for
<path>,<rect>,<circle>,<ellipse>,<line>,<polyline>, and<polygon>.
- Dual-Mode Sharing:
- Selected Path Only: Generates a shareable URL containing only the active vector path.
- Full SVG Document: Compresses and encodes the entire layer hierarchy, styles, and viewBox.
- High-Efficiency URL Compression: Uses
lz-stringto produce compact, URL-safe hash strings (#d=...). - Backward Compatibility: Fully compatible with legacy
#P=...path URLs. - Instant Preview & Import: Opening a shared link previews the artwork and lets you import it directly into the editor.
- Load reference bitmap images (
PNG,JPEG,WebP,SVG). - Adjust opacity, lock aspect ratio, and reposition/scale images to easily trace artwork into vector paths.
- Clean SVG Export: Export the full multi-layer SVG document or only the active layer.
- PNG Rasterization: Render high-resolution PNGs at custom scale factors.
- Local Browser Storage: Autosave projects to local storage and reopen them anytime.
- SVG Drag-and-Drop: Drop
.svgfiles directly into the window to inspect and edit.
- Node.js 18+
- npm or yarn / pnpm
# Clone repository
git clone https://github.com/qya/svg-edito.git
cd svg-edito
# Install dependencies
npm install# Start Vite development server
npm run devOpen your browser at http://localhost:5173.
# Type-check and build for production
npm run build
# Preview production build locally
npm run preview# Run unit tests with Vitest
npm test
# Run tests in watch mode
npm run test:watch- Framework: React 18 + TypeScript
- Bundler & Dev Server: Vite
- Compression: lz-string for URL payload compression
- Icons: lucide-react
- Testing: Vitest
- Path editing engine and mathematics are inspired by and build upon svg-path-editor by Yqnn.
- URL compression technique inspired by wiretext.
MIT License. Feel free to use, modify, and contribute!