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