SVG Path Editor Online: Edit Path Data Free

Quick answer

SVGSketch is a free online SVG path editor. Open or draw a path, press E, and drag its anchors and Bezier handles on the canvas. The Path Editor panel shows the same path as d attribute text and as a table of commands you can retype, reorder, or change type. Simplify Path and Smooth Path clean up traced and freehand paths. Everything runs in the browser and nothing is uploaded.

What the path tools do

Anchors and handles Select a path and press E. Square anchors sit on the path, round handles set the curve on either side of each one. The start anchor is green, the end anchor red, and a selected anchor fills in. Drag any of them.

Turn a line into a curve In the Path Editor panel, change a command type from L to C. The endpoint stays put and two handles appear on the canvas, ready to drag. The row under each panel is that command as the panel lists it.

The Path Editor panel showing a cubic path as d attribute text and as a table of commands with one row selected — **The Path Editor panel** The d attribute as text, and every command as a row with a field per parameter. Click a row and that node is selected on the canvas; click the badge to change the command type.

Simplify a dense path Shape > Simplify Path took this trace from 48 nodes to 11 at the default tolerance of 0.1% of its size, and the outline moved by less than that. Simplify Options sets the tolerance.

Smooth a stair-stepped trace Simplify keeps the nodes you have, so a pixel staircase stays a staircase. Shape > Smooth Path refits through the noise instead: 100 nodes became 7 smooth ones here, with Smoothness at 1.5% and Preserve corners off in Smooth Options.

Split into letters Convert to Path returns one path holding all seven contours of these three letters. Split Path keeps each counter with the letter that encloses it, so every hole stays a hole.

Edit the path on the canvas

Select a path and press E. Its anchors appear as squares and its Bezier handles as circles on dashed lines. Drag an anchor to move it, drag a handle to bend the curve beside it, or drag a segment directly. Double-click a segment to add a node where you clicked. Select a node and press Delete to remove it, and the path closes the gap. Shift-click adds nodes to the selection so they move together.

The controls are the same on any path: one drawn with the Path tool, an imported icon, a vectorizer trace, a motion path, or text converted to outlines.

Edit the d attribute in the Path Editor panel

Open Window > Panels > Path Editor. The top box holds the path's d attribute in a code editor that colors each command letter by type; edit the text and the canvas follows. Under it, every command has a row: a badge that changes the command type, a numeric field per parameter, checkboxes for arc flags, and buttons to insert or delete commands. Click a row to select that node on the canvas, and click a node to highlight its row.

Change an L to a C and the segment keeps its endpoint while two handles appear on the canvas, ready to drag. Change a C back to an L and the handles are gone. Absolute and relative commands both work, and so does every command from M to Z.

Have path data already, from an icon set, a stylesheet or a Stack Overflow answer? Draw any path, select it, and paste your d attribute over the text in the panel: the canvas redraws it as you type, and a malformed command is flagged instead of silently dropped. A whole SVG file is simpler still: open it, or paste its markup onto the canvas with Ctrl+V.

Draw paths with Freehand, Pen, or line tools

The Path tool (B) places one anchor per click: click for a corner, drag for a curve. The Polyline tool (P) draws straight segments. The Freehand tool (F) follows the pointer and, when you release, thins the stroke to its smoothing setting and rounds it into a path you can edit node by node.

Clean up traced and freehand paths

Shape > Simplify Path (Ctrl+Alt+Shift+[) drops the nodes a path does not need, within a tolerance: 48 nodes became 11 on the trace above, at the default 0.1% of the path's size. The nodes it keeps stay where they were, so a pixel staircase stays stepped however few nodes are left.

Shape > Smooth Path (Ctrl+Alt+Shift+S) refits the path through its noise instead: 100 nodes became 7 smooth ones above. Real corners survive unless you switch that off, and open paths keep their endpoints. Simplify Options and Smooth Options in the edit toolbar set the tolerance.

Split, join, close, reverse

Shape > Split Path (Ctrl+Alt+P) turns a compound path into one shape per outline, and a hole stays with the shape around it. Shape > Join Paths (Ctrl+Alt+J) connects open paths into one. Close Path (Ctrl+Shift+J) adds the closing segment, Open Path (Ctrl+Shift+K) removes it, and Reverse Path Direction flips the start and end, which matters for markers, dashes, and anything animated along the path. In Edit mode, Join Nodes (Ctrl+J) welds two endpoints and Split Nodes (Ctrl+Shift+N) breaks a node in two.

Export the path data you see

Edits stay in plain SVG path syntax. Export writes the d attribute the panel shows, optimized with SVGO if you want it, and Edit > Copy as Code > SVG (Ctrl+Shift+C) puts the markup on the clipboard for a component or a stylesheet.

FAQ

Can I edit the raw SVG path d attribute?

Yes. The Path Editor panel shows the selected path's d attribute in a code editor and as a table of commands. Edit either one and the canvas updates. Every command from M to Z is accepted, absolute or relative.

Can I paste existing SVG path data?

Yes. Select any path, open Window > Panels > Path Editor, and replace the text in its path data box with your d attribute. The canvas redraws the path as you type. To bring in a whole SVG, open the file or paste its markup onto the canvas.

Can I convert a straight segment into a curve?

Yes. In the Path Editor panel, change the command type from L to C or Q. The endpoint stays where it is and the new handles appear on the canvas for you to drag.

Does it simplify paths with too many nodes?

Yes. Shape > Simplify Path removes nodes within a tolerance you set in Simplify Options, and the outline stays within that tolerance of where it was. The trace above went from 48 to 11 nodes at the default setting.

Can it smooth a jagged or traced path?

Yes. Shape > Smooth Path refits the path through its noise, keeping real corners and the endpoints of open paths. Smooth Options sets how far the refit may move the outline and whether corners are kept.

Can I reverse an SVG path direction?

Yes. Shape > Reverse Path Direction swaps the start and end of the path, which changes where markers point, where a dash pattern begins, and which way a motion path runs.