Understanding cubic Bézier curves in SVG

The four points behind every cubic curve

A cubic segment starts at the path's current point. Its C command then supplies a first control point, a second control point, and an endpoint:

M 20 100
C 50 20, 130 20, 160 100

The start point is 20,100. The first handle at 50,20 controls the direction leaving the start. The second handle at 130,20 controls the direction approaching the endpoint. The segment finishes at 160,100.

The curve generally does not pass through its control points. Imagine the handles as magnets that influence the outline: moving one changes the tangent near its associated endpoint, and making it longer usually creates a broader, stronger bend.

Direction and handle length

The line from an endpoint to its control point determines the curve's tangent at that end. Rotate the handle and the curve leaves or arrives at a different angle. Move the control point farther away and its influence extends farther through the segment.

This gives you two useful editing rules:

• Change a handle's angle to change direction.
• Change a handle's length to change how gradually the curve turns.

For a symmetrical arch, place the handles at the same height and at comparable distances from their endpoints. For an asymmetric curve, vary their angles or lengths intentionally rather than nudging the endpoint repeatedly.

Making two segments meet smoothly

Two curve segments form a smooth-looking join when the outgoing and incoming handles align through their shared anchor. The handles can have different lengths, but keeping them collinear prevents a visible corner.

The S command helps create this relationship. After a C or another S, it reflects the previous segment's second control point across the current anchor and uses that reflection as the next segment's first control point.

M 20 100
C 50 20, 100 20, 130 100
S 210 180, 240 100

The S command only contains the second handle and endpoint. Its missing first handle is calculated automatically. This keeps smooth sequences compact, although explicit C commands can be clearer when you need independent control over every handle.

How to edit a curve deliberately

1. Select the curve segment. Identify its start, two control points, and endpoint before dragging anything.
2. Fix the anchors first. Put the visible endpoints where the shape must begin and end.
3. Set the tangent angles. Point each handle in the direction the outline should travel near its endpoint.
4. Tune handle lengths. Shorten a handle for a tighter change near the anchor; lengthen it for a broader transition.
5. Check neighboring joins. If the anchor should be smooth, align the handles on either side. If it should be a corner, let the handles use different directions.
6. Inspect at several scales. Small icons reveal bumps and flat spots that can be difficult to see while zoomed in.

Cubic versus quadratic curves

A quadratic Q segment uses one control point for both its departure and arrival behavior. It is compact and useful for simpler bends. A cubic C segment uses two independent control points, so it can represent a wider range of shapes and gives you more control at each end.

You do not need to convert every quadratic curve into a cubic one. Choose the representation that makes the shape understandable and easy to maintain.

Frequent curve problems

• A bump at a join: the two handles are not aligned across the anchor.
• A flat-looking curve: one or both handles may be too short.
• An unexpected loop: handles may cross too far past each other or point away from the intended path.
• A change affects the wrong area: the control point belongs to the neighboring endpoint, not the one you intended.