Free SVG Path Editor — Compose and Inspect SVG Path Commands

An SVG path is the most powerful element in the SVG format: a single path can describe almost any shape through a compact string of commands in its d attribute. Those commands are a tiny language — moveto, lineto, cubic and quadratic curves, elliptical arcs, and a close-path instruction — each written as a letter followed by coordinates. The letter's case even matters: uppercase commands use absolute coordinates, lowercase use relative ones. This editor lets you build and read that command string visually, so you can craft a custom shape or understand an existing one without parsing the syntax in your head.

Paths are how icons and logos are actually drawn. When you export an icon from a design tool or pull one from an icon set, the geometry almost always ends up as path data. Being able to inspect and adjust that data directly is a practical skill: you can simplify an over-detailed export, nudge a control point, merge or trim commands, and produce a path that is both visually right and economically small. A clean, minimal path renders faster, animates more smoothly, and is far easier to maintain than a sprawling one full of redundant decimals.

Reading path commands is also the fastest way to genuinely learn SVG. The format is concrete and immediate — change a curve's control point and the shape responds instantly — which teaches the relationship between numbers and geometry better than any diagram. Once the moveto, lineto, curveto, and arc commands click, you can hand-edit icons, debug a shape that renders wrong, and reason about path-based animations like line-drawing effects, all of which depend on understanding the underlying commands.

Path data is the backbone of modern web animation, too. CSS and JavaScript animation libraries animate stroke offsets to create line-drawing effects, morph one path into another, and move objects along a path. All of those techniques start from clean, well-formed path data with a predictable command structure. Composing the path deliberately — rather than inheriting whatever a design tool emitted — gives you geometry you can actually animate without surprises.

Because the editor runs entirely in the browser, there is no upload and no account: you compose the path, watch it render live, and copy the resulting d attribute straight into your SVG, your component, or your stylesheet. It complements the other vector and design tools on this site — a simple SVG generator for full graphics, a favicon generator for icon export, and colour tools for fills and strokes — so you can go from a single path to a finished, coloured asset without leaving the browser.