SVG Path d Attribute: All Commands Explained
The SVG path d attribute is a mini-language  here's every command with examples so you can read and write SVG paths confidently.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Move and Line Commands
The basic building blocks of SVG paths.
- M x y: Move To  positions the pen without drawing
- L x y: Line To  draws a straight line
- H x: Horizontal Line To  draws a horizontal line to x
- V y: Vertical Line To  draws a vertical line to y
- Z (or z): Close Path  draws a line back to the starting point
- Lowercase: relative coordinates; Uppercase: absolute coordinates
Curve Commands
Commands for drawing smooth curves.
- C x1 y1 x2 y2 x y: Cubic Bézier  x1 y1 is the first control point, x2 y2 the second, x y the endpoint
- S x2 y2 x y: Smooth Cubic Bézier  assumes first control point from previous C command
- Q x1 y1 x y: Quadratic Bézier  single control point
- T x y: Smooth Quadratic  continues from previous Q/T
- A rx ry x-rotation large-arc sweep x y: Arc  draws an elliptical arc segment
Reading SVG Paths in the Wild
Tips for understanding existing SVG path data.
- M followed by L sequences: polygons and straight-sided shapes
- Lowercase m l: relative position  common in icon sets for portability
- C dominance: smooth curvy shapes like logos and organic icons
- A: curved edges, rounded rectangles as paths, circles as pairs of arcs
- Very long d strings: complex shapes; use a vector editor to understand them visually
Frequently Asked Questions
What does the M command do in SVG path?
M x y (MoveTo) moves the pen to (x, y) without drawing. It starts a new subpath. Subsequent commands draw from this position. A path can have multiple M commands for multiple disconnected subpaths.
What's the difference between uppercase and lowercase path commands?
Uppercase (M, L, C): absolute coordinates from the SVG origin. Lowercase (m, l, c): relative to the current pen position. Relative coordinates make paths portable  you can move them by changing only the starting M.
How do I draw a circle with SVG path commands?
Circles are drawn as two arcs: M 50 10 A 40 40 0 0 1 50 90 A 40 40 0 0 1 50 10 Z  or simply use the <circle> element which is far simpler.
What is the Z command?
Z (or z) closes the current subpath by drawing a straight line from the current position back to the subpath's starting M point. Combine with fill to create closed filled shapes.
How do I make a rounded corner with SVG path commands?
Use A (arc) commands at each corner: M 20 10 H 80 A 10 10 0 0 1 90 20 V 80 A 10 10 0 0 1 80 90 H 20 A 10 10 0 0 1 10 80 V 20 A 10 10 0 0 1 20 10 Z  a rounded rectangle.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG