Last updated
Understanding SVG Path Data
The SVG <path> element is the most powerful SVG shape — it can represent
any 2D shape using a series of commands in the d attribute.
Path data is a compact string of commands and coordinates that describe how to draw the shape,
similar to giving drawing instructions: "move here, draw a line there, curve to this point."
Path Command Reference
| Command | Uppercase (absolute) | Lowercase (relative) |
|---|---|---|
| Move to | M x,y | m dx,dy |
| Line to | L x,y | l dx,dy |
| Horizontal | H x | h dx |
| Vertical | V y | v dy |
| Cubic Bézier | C x1,y1 x2,y2 x,y | c dx1,dy1 dx2,dy2 dx,dy |
| Smooth cubic | S x2,y2 x,y | s dx2,dy2 dx,dy |
| Quadratic | Q x1,y1 x,y | q dx1,dy1 dx,dy |
| Arc | A rx,ry rot large sweep x,y | a ... |
| Close path | Z | z |
Drawing a Star with Path
JavaScript
function starPath(cx, cy, outerR, innerR, points = 5) {
const step = Math.PI / points;
let d = '';
for (let i = 0; i < 2 * points; i++) {
const r = i % 2 === 0 ? outerR : innerR;
const angle = i * step - Math.PI / 2;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
d += (i === 0 ? 'M' : 'L') + `${x.toFixed(2)},${y.toFixed(2)} `;
}
return d + 'Z';
}
// 5-pointed star centered at (100,100)
console.log(starPath(100, 100, 50, 20, 5));