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+Shift+{) and Shape > Reverse Path Direction.

  6. Join and split

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

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+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+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