SVG Path Editor

WHAT IS IT?

SVG Path Editor is an SVG path editor that runs entirely in the browser. Paste the content of a d attribute and the tool renders the path with its control points; every command becomes editable with the mouse or from the text field, with both views kept in sync at all times. The app is hosted on GitHub Pages, but also runs locally with npm or through the provided Dockerfile.

WHY IS IT INTERESTING?

• Bidirectional editing: the raw path and the graphical view are the same object. Drag a point and the d updates, edit the text and the drawing follows. Great for understanding what each command actually does.
• Every SVG command: insert, delete and convert commands (M, L, C, S, Q, T, A, Z), with a color code that separates relative coordinates (orange) from absolute ones (purple).
• Path operations: scaling, translation, rotation, coordinate rounding, relative/absolute conversion, path reversal and string length optimization. Everything needed to clean up a vector tool export before shipping it.
• Keyboard shortcuts: each command type has its key (m, l, c, q, a, z...), plus undo/redo and viewBox controls from the keyboard or the mouse wheel. Once learned, editing gets fast.
• Available as an npm library: the editing engine is extracted into svg-path-editor-lib, a standalone package you can reuse to embed path manipulation in your own projects.

USE CASES

• Clean up and compress a path exported from Illustrator, Inkscape or Figma before committing it
• Create or tweak an SVG icon by hand without opening a full vector editor
• Debug an unreadable d attribute by visualizing each command
• Re-center a path in its viewBox and round coordinates to shrink the file
• Embed path editing in a web app through the npm library