Open the source code of almost any SVG icon downloaded from the web and nine times out of ten you will find a single element, <path>, with a d attribute full of letters and numbers that look unreadable at first glance. This is the tag that drawing tools like Illustrator or Figma export by default, because it can reproduce any outline, no matter how complex.
Unlike a predefined shape that has a fixed outline, a <path> follows only one rule: step through the move, line and curve instructions written in its d attribute. That makes it the base tool for drawing a logo, an icon or a map in SVG.
Definition
The <path> element draws a free vector shape from a sequence of commands stored in its d attribute (short for the drawing's data). Each command is a letter followed by coordinates: M moves the pen without drawing, L draws a straight line, C draws a cubic Bezier curve, A draws an arc of a circle or ellipse, and Z closes the shape by returning to the starting point. An uppercase letter means absolute coordinates, the same letter in lowercase means coordinates relative to the pen's current position.
Main commands of the d attribute
A handful of commands is enough to draw most common shapes.
| Command | Role | Example |
|---|---|---|
M x y | Moves the pen without drawing, to set the starting point | M 10 10 |
L x y | Draws a straight line to the given point | L 90 10 |
C x1 y1 x2 y2 x y | Draws a cubic Bezier curve with two control points | C 20 20 80 20 50 90 |
A rx ry angle large-arc sweep x y | Draws an arc of an ellipse or circle | A 40 40 0 0 1 90 50 |
Z | Closes the shape by connecting back to the starting point | Z |
Concrete rendering example
Here is a simplified stop sign drawn with straight lines only, followed by a water drop drawn with a curve: two typical uses of <path>.
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 10 L 70 10 L 90 30 L 90 70 L 70 90 L 30 90 L 10 70 L 10 30 Z" fill="#e63946" stroke="#7a1f28" stroke-width="2" />
<path d="M 150 15 C 170 40 180 60 150 85 C 120 60 130 40 150 15 Z" fill="#4895ef" />
</svg>The first <path> chains seven L commands to draw the octagon of the sign, then closes with Z. The second combines two C curves to get the rounded silhouette of a drop, an outline that no predefined shape could produce.
Difference from predefined shapes
<rect>, an ellipse or a <polygon> are shortcuts: they describe a known geometric shape with a handful of simple attributes (position, size, radius). <path> does not have that comfort, every segment has to be written by hand or generated by software, but it can represent absolutely any outline: a letter of text converted to a vector, a country's map, an icon with organic curves. In practice, predefined shapes are used whenever they are enough, since they stay more readable in the code, and <path> is reserved for outlines that no simple tag could reproduce.
Common pitfall
d attribute (a missing comma, an incomplete command) causes no visible error in the console: the browser silently ignores the rest of the path or renders a truncated shape. Always check the rendering visually, or paste the path into a dedicated SVG editor to spot the mistake.Real-world use case
Icons from most libraries (Solar, Font Awesome, Material Icons) ship as a single <path> per icon, sometimes paired with an <animateMotion> to make an element follow a trajectory along that outline, like an arrow gliding along a drawn road. Logos exported from Illustrator or Figma follow the same principle: each outline of the artwork becomes a <path> with its own fill color.
FAQ
<path> be animated?Yes, it is even one of the most common uses: the visible length of the stroke is animated with stroke-dasharray and stroke-dashoffset to get a progressive drawing effect, or another element is made to follow the outline with <animateMotion>.
Rarely beyond very simple shapes. For a complex outline, the shape is drawn in vector software and then exported as SVG, which automatically generates the d attribute with every command needed.
<path> contain several separate shapes?Yes, by chaining several M commands inside the same d attribute, each one starts a new independent sub-path, which for example lets you draw the letter "O" with an outer outline and an inner hole in a single tag.