SvgPathEditor: a browser editor for raw SVG path data

The problem: path data is a string, and most editors hide it

An SVG path is a single attribute, d, holding a sequence of commands such as M, L, C, Q, A and Z, each followed by coordinates. Vector drawing tools let you drag shapes, but they treat that string as generated output. When a path arrives from a design export, a font conversion, or another person's hand-written markup, the string is what you have to fix. SvgPathEditor takes the opposite position: the path field is the primary interface, and the canvas is a view of it.

The audience follows from that. This is a tool for people who are comfortable reading command letters and coordinate pairs, typically front-end developers cleaning up an icon, or anyone who needs to nudge one control point without re-exporting an asset. It is not a substitute for a general vector editor, and the README makes no claim that it is.

How the editor works: commands, subpaths and the viewBox

The README describes two linked surfaces. The path field holds the raw string, and the commands panel lists each command separately. Relative command types are shown in orange and absolute ones in purple, so the coordinate mode of every command is visible at a glance. Clicking a command type toggles it between relative and absolute.

The panel is where the structural edits live. Selecting a command and opening the ... menu gives Delete, Insert after, Convert to, Start Path From Here, Start Subpath From Here and Reverse Subpath. Those last three matter because SVG paths carry order: reversing a subpath changes the direction of the outline, and reordering a path changes which subpath is drawn first. The README documents these as explicit operations rather than leaving you to retype the string.

The viewBox is a separate control surface. The mouse wheel zooms, drag and drop moves it, Zoom to Fit derives it from the current path, and the x, y, width and height fields set it manually. Holding ctrl while dragging ignores the snap-to-grid constraint. Path-wide operations sit alongside: Scale, Translate, Rotate, Round, Convert to relative, Convert to absolute, Reverse and Optimize. Optimize is described only as minimising the path length, so treat its output as something to inspect rather than trust.

Running SvgPathEditor locally with Node.js or Docker

The hosted version at yqnn.github.io/svg-path-editor needs no install. For a local copy, the README requires Node.js v18.13 or higher, then npm install followed by npm start, which serves the app at http://localhost:4200/ and reloads on source changes.

npm install
npm start

A production build goes to the dist/ directory, and unit tests run through Karma.

npm run build
npm test

The repository also ships a Dockerfile and a docker-compose.yml. The compose file maps port 4200, mounts the working directory into /app, and installs dependencies only once by touching a marker file inside node_modules.

services:
  web-server:
    build: .
    ports:
      - 4200:4200
    volumes:
      - .:/app

For a first real use, paste a path into the path field, click a point, then press a command letter to insert a command after it. The README lists m, l, v, h, c, s, q, t, a and z, with shift plus the same letter to convert the selected command instead. ctrl+z undoes, and ctrl+shift+z redoes.

Where SvgPathEditor stops being the right tool

The README documents no tracing, no import of a raster image, and no shape primitives. You cannot draw a circle and have the editor convert it; you type the arc command. That makes it the wrong choice for anyone whose starting point is a PNG or a sketch.

There is no mention of saving to a file, export formats, or a project concept. The editor produces a path string, and what you do with it next is outside its scope. The Optimize button is the other soft spot: the README says it minimises path length and says nothing about which commands it rewrites or whether the visual result is preserved, so on a path with arcs or tight curves you should compare before and after rather than assume equivalence.

Finally, the README does not document rollback or versioning of your edits beyond the undo and redo shortcuts. Long editing sessions rely on the browser staying open.

SvgPathEditor versus a general vector editor

Inkscape and similar tools model a document: layers, shapes, fills, strokes and a path node editor, with the path as one object among many. SvgPathEditor models a string. There is no layer panel and no object tree, because there is only one path in play.

The practical difference shows up in two tasks. If you need to move a single control point by an exact amount, the command panel and the coordinate fields are faster than a node editor, and Round and Convert to relative have no direct equivalent in a drawing tool's UI. If you need to combine shapes, apply a boolean operation or manage a multi-element icon, the vector editor is the correct environment and SvgPathEditor cannot help. The README also points to a standalone package, svg-path-editor-lib, for the parsing and manipulation logic, which is the route to take if you want these operations inside your own application rather than in a browser tab.

Maintenance, licence and the cost of keeping a fork

The repository is not archived, and the last push was on 2026-06-18. The stack is Angular 17 with TypeScript 5.4, Material, and tsdown for building the library, and package.json pins version 0.0.0 for the app itself, which is normal for a private Angular workspace. Upgrades therefore mean tracking Angular major versions, and the README gives no support window or release cadence.

The licence is Apache-2.0, stated in the repository metadata, and a LICENSE file sits at the top level. Apache-2.0 is a permissive licence with an explicit patent grant, but whether it covers the app, the published svg-path-editor-lib package, or both is not spelled out in the README, so check the LICENSE file and the package metadata before shipping either in a product. Nothing here is legal advice.

Editorial conclusion

Adopt it when you already read path data by hand and need to insert a curve, reverse a subpath or round coordinates without opening a full vector editor. Skip it if you need to trace a bitmap or place shapes visually, because the README describes no such tools. Before relying on it, verify the Optimize button's output on your own paths and read the LICENSE file, since the README says nothing about what Apache-2.0 covers in this repository.

Frequently asked questions

Official sources

1. Issues
2. License: Apache-2.0
3. Project website
4. README
5. Yqnn/svg-path-editor on GitHub