Editing SVG Paths Sucks. Here's a Tool That Doesn't.
The Problem
Editing SVG paths manually is like trying to write a novel using only emoji. Sure, it’s possible, but it’s tedious, error-prone, and deeply unpleasant. Whether you’re hand-coding paths for a logo or tweaking a shape in a design, the process is a mess of cryptic commands, trial-and-error adjustments, and a lot of Googling "what does M mean in SVG?"
What This Does
svg-path-editor is an online tool that lets you create, edit, and manipulate SVG paths visually, like a normal human being. Under the hood, the app uses Angular for the UI (src/app is where all the components live) and a standalone library (src/lib) for handling the path logic. This separation means you can use the tool out of the box or import the library into your own projects if you’re building something custom.
The app does everything you’d want: drag-and-drop point manipulation, command conversion (relative to absolute, and vice versa), path optimization, and even subpath reordering. Want to scale, translate, or rotate your path? Buttons for all of that. Need to reverse a path or minimize its length? Covered. The actual logic lives in files like src/lib/optimize-path.ts and src/lib/reverse-path.ts, while the UI for these operations is built out in components like src/app/export/export.component.ts or src/app/path-preview/path-preview.component.ts.
There’s also a ViewBox editor (drag, zoom, fit to path) and keyboard shortcuts for power users. For example, pressing M, L, or C inserts new commands directly, while Ctrl + Z handles undo (because you will mess up).
Real-World Use
Say you’re designing a custom icon for a project. Instead of trying to fine-tune SVG commands in a text editor, you can load the path into this tool, drag points around, adjust commands inline, and optimize the output. For example, here’s how you might simplify a path:
You can run this directly in your app or just use the web editor and copy-paste the final path into your project. Either way, you’re saving time and sanity.
The Bottom Line
If you hate dealing with raw SVG path strings, this tool is your friend. The UI is intuitive, the features are practical, and the library is reusable if you want to build something custom. That said, it’s a bit overkill for quick tweaks—use it when you’re working with complex paths or need fine-grained control. It’s a fork of the popular yqnn/svg-path-editor (with 5k+ stars), so you’re in good company. Just don’t expect it to solve all your SVG headaches—it’s a path editor, not a miracle worker.