SVG Path Element Explained
The <path> element is SVG's most powerful feature. Learn to read, write, and modify path commands.
What is the SVG Path Element?
The <path> element is SVG's universal shape maker. Every shape you can draw — lines, curves, arcs, complex polygons — is expressible as a path. The shape is defined by the 'd' attribute, which contains a sequence of commands.
Path Commands Reference
SVG path commands use single-letter codes. Uppercase = absolute coordinates; lowercase = relative coordinates.
| Command | Full Name | Description |
|---|---|---|
| M x,y | Move To | Move pen to x,y without drawing |
| L x,y | Line To | Draw straight line to x,y |
| H x | Horizontal Line | Horizontal line to x (same y) |
| V y | Vertical Line | Vertical line to y (same x) |
| C x1,y1,x2,y2,x,y | Cubic Bezier | Smooth curve with two control points |
| Q x1,y1,x,y | Quadratic Bezier | Curve with one control point |
| A rx,ry,rot,laf,sf,x,y | Arc | Elliptical arc segment |
| Z | Close Path | Close path back to start |
Reading Path Data in Practice
A typical SVG path: d='M 10,10 L 90,10 L 50,80 Z'. This draws a triangle: Move to (10,10), draw line to (90,10), line to (50,80), close path back to (10,10).
- M 10 10 — place pen at (10,10)
- L 90 10 — line to (90,10)
- L 50 80 — line to (50,80)
- Z — close back to start
Cubic Bezier Curves
The C command is the most powerful: C x1,y1 x2,y2 x,y. (x1,y1) and (x2,y2) are the control points; (x,y) is the endpoint.
- C 20,20 80,20 50,80 — S-curve from (0,0) to (50,80)
- Control points 'pull' the curve toward them (like magnets)
- In Inkscape: drag bezier handles on anchor points to adjust C command values
- S command: smooth continuation, shares control point with previous C
Frequently Asked Questions
What's the difference between absolute and relative path commands?
Uppercase (M, L) uses absolute SVG coordinates. Lowercase (m, l) moves relative to the current position. Relative paths are shorter and more reusable, but harder to read at first.
How do I generate SVG path data programmatically?
Use D3.js path generators, SVG.js, or the browser's Path2D API. Also: in SVG.js, use SVG.Path().plot([['M',10,10],['L',90,10]]) to build paths from arrays.
Can I edit SVG path data by hand?
Yes, for simple shapes. For complex paths, use Inkscape or Illustrator's node editor visually. The raw d string for complex paths can be thousands of characters.
What does 'Z' do in a path?
Z closes the path by drawing a straight line from the current position back to the path's starting point (the last M command). Without Z, the path end is left open.
How do I create a circle using path commands?
A circle from path: d='M 50,10 A 40,40 0 1 0 50,10.001 Z'. But use <circle cx='50' cy='50' r='40'/> instead — it's simpler and more readable for circles.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free