How Bézier curves are described in SVG paths

This page explains how Bézier curves are described in SVG files.

Anchor and control points

A section of a Bézier curves is described by 4 points:

In the following illustration, points P1 and P4 are the anchor point. Points P2 and P2 are the control points.

Anchor and control points in Bézier curves in SVG paths

SVG paths : M and C commands

In SVG paths, the commands M and C are used to describe Bézier curves.

M x1 y1
C x2 y2     x3 y3       x4 y4

Examples

The following examples are from w3.org :

Example of Bézier curve paths in SVG files

See also


Last update : 04/13/2019