SVGSketch Learn

How to Edit SVG Paths and Bezier Curves

Direct node-and-handle control over the d attribute - move anchors, reshape curves, and clean up imported geometry.

Open SVGSketch

Quick answer

Select the path, then press E (or click the Edit tool) to expose its nodes. Drag anchor nodes to reposition, drag the round Bezier handles to reshape curves, double-click a segment to insert a node, and press Delete to remove selected nodes. The Path Editor panel shows the raw d attribute alongside a command-by-command table.

Steps at a glance

  1. Enter node editing

    Select the path and press E for the Edit tool.

  2. Move and reshape

    Drag nodes and Bezier handles; Shift-click adds nodes to the selection, Shift+segment-drag snaps to 45 degrees.

  3. Insert and delete

    Double-click a segment to insert a node; Delete to remove.

  4. Edit path data

    Use the Path Editor panel to edit the d attribute and per-command parameters.

  5. Simplify and reverse

    Shape > Simplify Path (Ctrl+Alt+Shift+[) and Shape > Reverse Path Direction.

  6. Join and split

    Join Nodes (Ctrl+J) welds endpoints; Split Nodes (Ctrl+Shift+N) breaks them apart.

What node editing looks like

PATH TOOLEDIT TOOL
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.
L COMMANDL 184 104CHANGED TO CC 128 128 160 14 184 104
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.
48 NODES11 NODES
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.
100 NODES7 NODES
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.
CONVERT TO PATHAFTER SPLIT PATH
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.

Step 1: Enter node editing

Select a path, then press E or click the Edit tool in the left toolbar. Anchor nodes appear on the path; Bezier control handles extend from curved nodes as tangent lines you can drag.

Step 2: Move and reshape

Drag any node to move it - multiple selected nodes move together. Drag a Bezier handle to bend the adjacent curve segment. Click a node to select it, Shift-click to add more to the selection, and hold Shift while dragging a segment to snap the drag to 45-degree increments.

Step 3: Insert and delete nodes

Double-click an empty stretch of a segment to insert a node there. Select a node and press Delete to remove it - the path closes the gap by reconnecting the neighbors. Shape > Complexify Path (Ctrl+Alt+Shift+]) adds evenly distributed nodes when you need more control points to work with.

Step 4: Edit the path data directly

Open the Path Editor panel while in Edit mode: it shows the raw d attribute in a live text editor plus a structured table of every command. Change a command type (say, a straight L into a cubic C), edit parameters numerically, or insert and delete commands per row - clicking a row highlights its node on canvas. While drawing with the Path tool (B), Alt+click an anchor to toggle it between corner and smooth behavior.

Step 5: Simplify and reverse

Shape > Simplify Path (Ctrl+Alt+Shift+[) reduces anchor count without changing the shape - useful after vectorization, with an adjustable tolerance in the edit toolbar's Simplify Options. Shape > Reverse Path Direction flips the start and end points; this matters for marker placement, text on a path, and some animation calculations.

Step 6: Join, split, and cut

Select two open endpoints and use Shape > Join Nodes (Ctrl+J) to weld them into one - joining a path's own two endpoints closes it. Split Nodes (Ctrl+Shift+N) breaks a node into two coincident endpoints, and Break at Nodes (Ctrl+Shift+B) starts new subpaths at the selected nodes. The Scissors tool (Shift+K) cuts a path at any clicked point on its outline.

FAQ

Can I edit the d attribute as text?

Yes. In Edit mode, the Path Editor panel shows the raw d string in a live editor and re-renders as you type. The XML Inspector (F12) also lets you edit the d attribute directly in the markup.

How do I add a new node to a finished path?

Switch to the Edit tool and double-click an empty segment - a node is inserted at that position. Shape > Complexify Path adds nodes across the whole path.

How do I turn a straight segment into a curve?

Open the Path Editor panel and change the segment's command type from L to C (cubic) or Q (quadratic), then drag the new handles on canvas. While drawing with the Path tool, Alt+click an anchor to toggle corner and smooth behavior.

What does Reverse Path Direction do?

It flips the start and end of the path. This affects marker positions, arrow heads, animations along the path, and some boolean operations. It lives in the Shape menu.

How do I close an open path?

Use Shape > Close Path (Ctrl+Shift+J) to add a Z command back to the start, or select both endpoints and use Join Nodes (Ctrl+J) to weld them.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch