Editing nodes and bezier curves in SVG
Practical guide
SVG shapes are made of nodes (anchors) joined by straight or curved segments. Editing those nodes gives you full control over the shape. Curves are controlled with bezier handles: levers that define how much and in which direction a segment curves.
Basic concepts
- Anchor (node): point the stroke passes through.
- Handle: lever extending from the anchor that defines the curvature.
- Corner node: no handles, produces a sharp angle.
- Smooth node (curve): with handles, produces a curved transition.
Enter node mode
In svgdesk, double-click a shape (or pick the nodes tool, key N). The shape becomes an editable path and you'll see its anchors.
Move a node
Drag any anchor to reposition it. Hold Shift to lock movement to one axis (horizontal only or vertical only).
Turn a corner into a curve
Double-click a node, or use the Convert to curve button, so the node gains bezier handles. Then drag the pink points to shape the curve. To go back to a corner, convert it again.
Symmetric or free handles
By default the handles are symmetric (mirrored): moving one moves the other, achieving smooth curves. Click Free (or hold Alt while dragging) to break the symmetry and control each side separately, useful for tips and kinks.
Add and delete nodes
Click the midpoint marker of a segment to insert a new node. Select a node and press Del or the Delete node button to remove it.
Multi-selection
With Shift+click you select several nodes at once and move them together. Ideal for shifting an entire part of the shape without deforming it.
Compound paths
A shape can have several subpaths (for example, a letter "O" with its hole). svgdesk respects those subpaths while editing, so the whole thing doesn't deform.