SVG path commands: read M, L, C, Q, A, and Z

How to read a path from left to right

Every path begins with a current point. A command either moves that point, draws from it, or closes the current subpath. Uppercase commands use absolute coordinates in the SVG coordinate system. Lowercase commands use offsets from the current point.

<path d="M 20 80 L 80 20 L 140 80 Z" />

Read this as: move to 20,80; draw a line to 80,20; draw another line to 140,80; then close the path back to its starting point. Commas are optional, while signs and whitespace can separate numbers. A negative number can begin immediately after another number, so 10-5 means 10 -5, not subtraction.

Move and line commands

• M x y starts a new subpath without drawing.
• L x y draws a straight line to a point.
• H x draws horizontally while preserving the current y value.
• V y draws vertically while preserving the current x value.
• Z closes the subpath with a straight segment.

Extra coordinate pairs after M are treated as line commands. That shorthand is valid, but writing the first L explicitly can make hand editing easier. Most drawing commands can also consume repeated parameter sets without repeating the letter. For example, six coordinates after one L draw three consecutive line segments.

Use Z when a filled boundary should close exactly. Manually returning to the first point with L may produce a different stroke join. The MDN path data reference provides the complete parameter order and implicit repetition rules for all 20 uppercase and lowercase commands.

Cubic and quadratic curves

A cubic curve uses two control points and one endpoint: C x1 y1 x2 y2 x y. The first handle pulls the curve away from its starting point. The second handle guides it into the endpoint. The curve usually stays inside the convex hull of these four points, but it does not pass through either handle.

<path d="M 20 100 C 45 20 115 20 140 100" />

A quadratic curve uses one control point: Q x1 y1 x y. Its smooth continuation command is T x y. The cubic continuation command is S x2 y2 x y. Both shorthand commands reflect the previous compatible handle across the current point. If the previous command is not compatible, the reflected handle collapses onto the current point.

Use cubic curves for precise logo and illustration work. Quadratic curves are compact and useful for simple bends. For a visual explanation of handle direction and length, read the cubic Bezier curve guide.

Elliptical arc commands

The arc command has the most parameters: A rx ry rotation large-arc sweep x y. The endpoint is the last pair. The radii describe the source ellipse. Rotation turns that ellipse. The two flags select one of the possible arcs connecting the same endpoints.

<path d="M 30 90 A 60 40 0 0 1 150 90" />

The large-arc flag chooses the longer or shorter route. The sweep flag chooses the drawing direction. Each flag must be 0 or 1. If the requested radii are too small to connect the endpoints, the browser scales them up automatically. When an arc looks wrong, first check the endpoint and flags, then test the radii, and only then adjust rotation.

Absolute versus relative coordinates

Relative commands can make a reusable motif easy to move because its later points are expressed as offsets. They can also make debugging harder because one incorrect value shifts every command that follows. Absolute coordinates reveal exact locations but require more edits when moving a group.

<!-- These draw the same two segments -->
M 20 20 L 80 20 L 80 70
m 20 20 l 60 0 l 0 50

Choose one form based on the editing task, not file size alone. Compression usually makes the size difference small. SVG Vector Lab can display and manipulate paths regardless of command case, so visual editing is a useful check after any manual conversion.

A safe editing checklist

1. Find the last known current point before the segment you want to change.
2. Confirm whether the command is absolute or relative.
3. Count parameters according to the command family.
4. For curves, distinguish handles from the final endpoint.
5. For arcs, keep both flags at exactly 0 or 1.
6. Check whether a later relative command depends on the value you changed.
7. Verify fill closure and stroke joins after editing.

Paste a path into the visual SVG path editor to inspect anchors and handles beside the source. Continue with the point-by-point editing workflow when you are ready to reshape a complete icon or illustration.