Paths

The <path> element

Every SVG primitive shape — <rect>, <circle>, <polygon> — is really just syntactic sugar. Internally, the browser converts them to path data. The <path> element exposes that underlying power directly: a single element can describe any shape, no matter how complex, using a mini-language stored in the d attribute.

The d attribute is a string of path commands — single-letter codes each followed by numeric parameters. Think of it like instructions for a pen on paper: pick up the pen (M), put it down and draw (L, C, A…), lift it again (M), close the shape (Z).

Move & line commands

The simplest path commands draw straight lines. These are all you need to reproduce any shape made from <polygon> or <polyline> — and they are the backbone every more complex path is built on.

Command reference

• M x y — Move the pen to (x, y) without drawing. Every path must start with M.
• L x y — Draw a line from the current position to (x, y).
• H x — Draw a horizontal line to x (y stays the same).
• V y — Draw a vertical line to y (x stays the same).
• Z — Close the path by drawing a straight line back to the most recent M point.

Uppercase = absolute coordinates (measured from the SVG origin). Lowercase = relative coordinates (measured from the current pen position). For example, L 50 80 draws a line to the point (50, 80) in the viewBox, while l 10 20 draws a line 10 units to the right and 20 units downward from wherever the pen currently is.

A triangle with M, L, and Z

A triangle needs three points and a close command. The Z at the end automatically closes the third side, connecting the last point back to the first — no need to repeat the starting coordinate.

Using H and V for axis-aligned segments

When a segment is perfectly horizontal or vertical, H and V save you from repeating coordinates. The path below draws an L-shaped notch using only five commands:

Cubic & quadratic Bézier curves

Straight lines are useful, but curves are where <path> becomes truly powerful. SVG supports two kinds of Bézier curves, both widely used in graphic design tools like Illustrator and Figma.

Quadratic Bézier: Q and T

A quadratic Bézier has one control point that "pulls" the curve toward it — the line never actually passes through the control point, but approaches it like a rubber band pulled from both ends.

• Q x1 y1 x y — curve to endpoint (x, y) with control point (x1, y1).
• T x y — smooth continuation: the control point is the mirror of the previous Q's control point, producing a seamlessly joined curve.

The red dot is the explicit control point for the first Q segment. The dashed red lines show how it "pulls" the curve away from both endpoints without the line touching it. The orange dot is the automatically mirrored control point the browser uses for the T continuation — you never have to specify it, which is why T produces a smooth join.

Cubic Bézier: C and S

A cubic Bézier has two control points — one near the start and one near the end of the segment. This gives you independent control over both ends of the curve, which is how every modern vector drawing application handles smooth curves.

• C x1 y1 x2 y2 x y — curve to endpoint (x, y) with start control point (x1, y1) and end control point (x2, y2).
• S x2 y2 x y — smooth cubic continuation: the first control point is the mirror of the previous C's second control point.

The red dot is the start control point — it pulls the curve upward near the left endpoint. The orange dot is the end control point — it pulls the curve upward near the right endpoint. Both handles point in the same direction here, producing a clean arch. Moving the handles to opposite sides would create an S-shape.

Arcs

The arc command A draws a section of an ellipse between two points. It is the most parameter-heavy command, but it covers circular arcs, pie slices, rounded edges, and any other arc-based shape cleanly in a single command.

Arc command syntax

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx ry — the x and y radii of the underlying ellipse. For a circular arc, set both equal.
• x-axis-rotation — how many degrees to rotate the ellipse axis. Almost always 0 for circular arcs.
• large-arc-flag — 0 = take the short way around; 1 = take the long way around.
• sweep-flag — 0 = arc goes counterclockwise; 1 = arc goes clockwise.
• x y — the endpoint of the arc.

Any two points on an ellipse are connected by two possible arcs (short and long), and each arc can curve in two directions (clockwise and counterclockwise) — giving four possibilities. The two flags let you pick exactly which one you want.

Pie slice demo

A pie slice is drawn by moving to the center, drawing a line out to the edge, then arcing around to another edge point, then closing back to the center with Z.

The four arc possibilities

To see all four flag combinations, consider two fixed endpoints — the same two points can be joined by four different arcs:

Each figure connects the same two gray dots — only the flag values change. The same radius A35 35 is used in all four. The large-arc flag decides which of the two arcs (the minor or major arc of the circle) is drawn; the sweep flag decides which direction (CW or CCW) the pen travels.

Putting it together: a five-pointed star

A star shape demonstrates how a single <path> can encode a complex polygon. The math behind a regular 5-point star: place ten points alternating between an outer radius and an inner radius, each 36° apart. The d string below uses M to start, L to draw each edge, and Z to close — no <polygon> or helper shapes needed.

Notice that the star outline requires an <path>, not a <polygon>, because the winding order matters: the five outer points and five inner points must be visited in the correct alternating sequence so the sides cross correctly. The <path> element handles this naturally with explicit L commands — you control exactly which point comes next.

A heart with cubic Béziers

The heart shape uses two cubic Bézier curves — one for the left lobe and one for the right — joined at the top center and meeting at a point at the bottom. This shows how C commands combine with M and Z to produce organic, smooth shapes.

Each C segment takes six numbers: the two control points followed by the endpoint. Reading the first segment: C50 20, 30 10, 20 22 — control point 1 is (50, 20), directly above the start, which keeps the departure tangent pointing up; control point 2 is (30, 10), which pulls the curve to the upper-left as it approaches the left-lobe peak at (20, 22). The mirror-image logic applies to the right lobe.