SVG Path

Learn how the <path> element, SVG's most powerful drawing tool, uses a compact mini-language of commands in the d attribute to draw any shape imaginable.

The <path> Element and the d Attribute

The <path> element can draw lines, curves, arcs, and complex closed shapes, all through a single d attribute. The d attribute contains a sequence of commands, each made up of a single letter followed by the numeric coordinates it needs. This command language is what makes <path> more flexible than <line>, <polygon>, or <polyline> combined.

Absolute vs. Relative Commands

Every path command has two forms: an uppercase letter for absolute coordinates (measured from the SVG origin) and a lowercase letter for relative coordinates (measured from the current point). For example, M10,10 moves the pen to the absolute point (10,10), while m10,10 moves it 10 units right and 10 units down from wherever the pen currently is.

Example: Basic Path with M, L, and Z

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M20,20 L180,20 L100,180 Z" fill="#f97316" stroke="#7c2d12" stroke-width="3" />
</svg>

</body>
</html>

Common Path Commands

Beyond straight lines, path supports smooth curves. C draws a cubic Bezier curve using two control points, while Q draws a simpler quadratic curve with just one control point. Combining M, L, C, and Z lets you build almost any two-dimensional shape, from simple polygons to complex icons and logos.

CommandMeaning
M / mMove to - starts a new sub-path at the given point without drawing
L / lLine to - draws a straight line to the given point
H / hHorizontal line to - draws a straight horizontal line
V / vVertical line to - draws a straight vertical line
C / cCubic Bezier curve - draws a curve using two control points
Q / qQuadratic Bezier curve - draws a curve using one control point
A / aArc - draws an elliptical arc between two points
Z / zClose path - draws a straight line back to the start of the sub-path

Example: Curved Path with C

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="140" viewBox="0 0 220 140">
  <path d="M20,120 C20,20 200,20 200,120" fill="none" stroke="#2563eb" stroke-width="4" />
</svg>

</body>
</html>
Note: You can chain multiple coordinate pairs after a single command letter without repeating it -- for example, L40,40 60,80 100,20 draws three connected line segments after one L.

Example: Speech Bubble Combining L, Q, and Z

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="180" viewBox="0 0 220 180">
  <path d="M20,20 H180 Q200,20 200,40 V100 Q200,120 180,120 H90 L60,150 L65,120 H40 Q20,120 20,100 V40 Q20,20 40,20 Z"
        fill="#fef9c3" stroke="#a16207" stroke-width="3" />
</svg>

</body>
</html>
Note: The d attribute is case-sensitive and whitespace-tolerant: commas and spaces between numbers are mostly interchangeable, but the command letters themselves (M vs m, L vs l) always control whether coordinates are absolute or relative.

Exercise: SVG Path

Which attribute holds all the drawing commands for a <path> element?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVGFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to SVG and tweak your resume