Draw or fix SVG path data in a browser tab
SVG Path Editor renders the shape described by a d attribute, control points included, and lists every command with its values. Drag a point and the d string is rewritten; change a number in the string or in the command list and the point moves. The editor runs client-side from GitHub Pages and installs as a web app, with a manifest and a service worker that prefetches the app files.
Keyboard-driven commands and whole-path transforms
- Typing m, l, v, h, c, s, q, t, a or z inserts that command after the selected one; Shift plus the letter converts the selected command instead. Ctrl+Z and Ctrl+Shift+Z (Cmd on a Mac) undo and redo.
- Clicking a command's letter flips it between relative (orange) and absolute (purple) coordinates. Two buttons convert the whole path at once.
- The whole path can be scaled, translated, rotated, rounded to a chosen number of decimals or reversed. A command's menu restarts the path or its subpath at that command, or reverses the subpath.
- Optimize drops useless commands and moves to the H, V, S and T short forms when the geometry allows. It then keeps a relative/absolute flip, or a reversed path, only if the string gets shorter.
- There is no account to create. Saved paths stay in the browser's
localStorage, a path is shared as a URL that carries it in the#P=fragment, and SVG export sets fill, stroke and viewBox. - The engine behind the app is on npm as
svg-path-editor-lib, with no runtime dependencies, shipped as ESM and CommonJS with type definitions.
Icon touch-ups and paths shared by URL
- Fixing an icon's path without opening a vector design tool such as Penpot.
- Reading a minified
done command at a time to find the segment that goes wrong. - Attaching a work-in-progress path to an issue or a code review as a URL.
- Running the same transforms in a build script through
svg-path-editor-lib.
Path data only, and one point dragged at a time
The editor reads a d value, not an SVG file. Importing a whole file has been requested since December 2021 (issue #52, still open). The maintainer calls a proper extraction "extremely challenging", because each path can be modified by one or several SVG transforms. The only file it takes is an image, read locally and placed by hand on the canvas.
Points move one at a time. In issue #41, the maintainer confirms there is no direct way to move several, and links to a workaround built on relative and absolute coordinates.
The Dockerfile runs the development server. It starts ng serve on port 4200 from the node:current image. Static hosting means running npm run build (Node.js 18.13 or later) and serving dist/, which is what the repository's GitHub Pages script does.
Two library optimizations stay out of the app. The svg-path-editor-lib docs warn that removeOrphanDots and useClosePath may damage stroked paths, and the Optimize button leaves them off.
No GitHub releases: only the library carries version numbers. Tags 1.0.0 (November 2024) through 1.0.4 track svg-path-editor-lib, and 1.0.4 reached npm on 18 June 2026, while the app is still 0.0.0 in its package.json. The last commit landed that same day, after others in March and April 2026, and the hosted version was redeployed on 18 June. The code is TypeScript on Angular 17, under the Apache-2.0 license.