Metlivi Blog

How to Position Bézier Handles with Exact Coordinates in Inkscape

To position Bézier handles with exact coordinates in Inkscape, edit the control-point values in the path’s d attribute using the XML Editor. For a cubic curve written with an uppercase C, the first two coordinate pairs specify the handles; the final pair specifies the endpoint. W3C: Paths

This tutorial is for someone refining a character outline who already knows where a curve’s handles should sit. The worked example uses a simple two-node curve, then explains how to apply the same method to an existing path without replacing its other segments.

October 29, 20266 min readBy Metlivi Editorial Team
Section 1

Why don’t the Node tool’s X/Y fields position handles?

The Node tool’s coordinate fields change the position of a selected node. A Bézier handle is a separate control point that shapes the curve beside that node. Entering your intended handle coordinates in the toolbar therefore changes the wrong part of the geometry. The Inkscape Beginners’ Guide explicitly describes those fields as coordinates for the selected node. Node Tool Options

Use the Node tool to identify the curve visually: press N, select the path, and select a node. Its handles appear as small circles connected to the node by thin lines. Those circles are the points whose numerical positions you will edit. Editing Paths with the Node Tool

Section 2

How do you identify the correct handle coordinates?

A cubic Bézier segment has a starting node, two control points, and an ending node. In SVG path data, the starting node comes from the preceding command. An uppercase C then supplies the two controls and the endpoint in that order. W3C: Cubic Bézier curve commands

Consider this illustrative d attribute value:

M 40 120 C 40 40 200 40 200 120

Read the numbers as follows:

Part Coordinates Meaning
M 40 120 (40, 120) Starting node
First pair after C (40, 40) Outgoing handle of the starting node
Second pair after C (200, 40) Incoming handle of the ending node
Third pair after C (200, 120) Ending node

The practical rule is to group the six values after C into three pairs before editing anything. To reposition one handle while preserving both nodes, change only its pair. MDN’s SVG tutorial documents the same ordering and explains how the controls determine the curve’s direction near each endpoint. MDN: Paths

Section 3

How do you enter exact coordinates in the XML Editor?

For a controlled first attempt, use this complete SVG document. Save it as exact-curve.svg in a plain-text editor, then open it in Inkscape. It contains one ordinary path with no groups, transforms, or path effects.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

The example’s XML structure and the coordinate calculations below were checked with Python. The desktop interaction itself was not executed.

  1. Select the curve in Inkscape.
  2. Open the XML Editor with Ctrl+Shift+X, the documented default shortcut.
  3. Select the path element identified by id="curve" in the XML tree.
  4. Select its d attribute and edit the attribute’s value.
  5. Apply the value with Ctrl+Enter, or the dialog’s Set attribute control. These commands are documented in Inkscape’s own shortcut reference. Inkscape keyboard and mouse reference

For example, change the first handle from (40, 40) to (70, 30) by entering this attribute value:

M 40 120 C 70 30 200 40 200 120

Paste only the path-data string into the value field—not d=, quotation marks, or a complete <path> element. Keep the starting pair, second control pair, and ending pair unchanged. That makes this a single-handle edit you can readily inspect.

Switch back to the Node tool and select the starting node. Check the handle’s new direction visually, then inspect the d value again for the numerical check. On an existing multi-segment outline, preserve the surrounding commands and edit only the relevant control pair; replacing the whole attribute with this short example would replace the entire outline.

Section 4

Which coordinate system do the numbers use?

Path-data coordinates use SVG user units. A document’s viewBox and transforms determine how those units map to the visible drawing. The initial SVG coordinate system has its origin at the upper left, with X increasing rightward and Y increasing downward. W3C: Coordinate Systems, Transformations and Units

In the supplied example, the 240 × 160 viewport and viewBox="0 0 240 160" provide a straightforward mapping. The move from (40, 40) to (70, 30) places the control point 30 units farther right and 10 units higher. These are illustrative design coordinates, not a prescription for a particular character shape.

For an existing document, inspect the path and its parent groups for transform attributes before treating its local coordinates as page positions. As an illustrative calculation, a lone translate(30,20) maps a local handle at (70,30) to (100,50) in its parent coordinate system. To reach (100,50) under that translation, enter (70,30) locally. Scaling, rotation, and additional ancestor transforms require accounting for the complete mapping. W3C: Coordinate systems and transforms

Section 5

What if the path uses lowercase `c` or shorthand `S`?

Lowercase c stores offsets from the segment’s starting point. All three pairs use that same starting point; they are not successive movements from one control to the next. Uppercase C stores absolute coordinates in the current user coordinate system. W3C: Cubic Bézier curve commands

For the original example, subtract the starting node (40,120) from each subsequent point:

Point Absolute position Relative offset
First handle (40,40) (0,-80)
Second handle (200,40) (160,-80)
Endpoint (200,120) (160,0)

The equivalent attribute value is therefore:

M 40 120 c 0 -80 160 -80 160 0

Do not merely capitalize c while keeping those numbers: that changes their meaning. When editing a longer relative path, calculate the current segment’s starting point first.

An S segment omits its first control point. Following a cubic segment, SVG derives that control by reflecting the preceding segment’s final control across their shared node. To specify both controls independently, expand the shorthand into an explicit C segment while preserving the calculated first control initially. MDN: Paths

Section 6

How do node types affect later handle adjustments?

Inkscape’s node types constrain subsequent interactive editing. Cusp nodes allow independent handle movement. Smooth nodes keep both handles and the node on one line. Symmetric nodes additionally keep the handles at equal distances. Auto-smooth nodes adjust their handle distances automatically when the node moves. About Node Types

Choose the intended node behavior before final numerical placement. For independently specified controls, a cusp node is a useful choice. For a flowing join, plan compatible coordinates on both sides of the shared node, then check the final values after any node-type conversion.

For example, suppose a shared node is at (200,120) and its incoming control is (200,40). An outgoing control at (200,200) is its reflection across that node: 2 × (200,120) − (200,40). This illustrative calculation gives equal, opposite handle vectors. It provides a concrete coordinate check for a symmetric join.

Section 7

How do you check an edit that looks wrong?

Work through these checks in order:

  1. Confirm the element. Check the selected path’s ID before changing its attribute.
  2. Identify the pair. Mark the starting node, first control, second control, and endpoint on paper if needed.
  3. Read the command letter. Establish whether its numbers are absolute, relative, or shorthand.
  4. Check the coordinate mapping. Inspect the viewBox, path transform, and parent transforms.
  5. Check subsequent editing. Reinspect the coordinates after dragging handles or changing node types.
  6. Preserve the original value. Keep a copy of the complete d string so you can restore it if an edit changes unintended segments.

For precise character-outline work, finish by checking both the visible contour and the stored control coordinates. Once the command type and coordinate system are clear, exact handle placement becomes a small, traceable edit: identify the segment, change the intended pair, and verify the result.

Section 8

Sources

Related reading

Keep exploring this topic