Read the path data string
M moves the pen, L draws a line, H and V draw straight axes, and Z closes a shape.
svg path
Understand SVG path commands and the d attribute
SVG paths use the d attribute to draw lines, curves, arcs, and closed shapes. Read commands in order and preview changes before editing production SVG.
Compare absolute and relative commands
Uppercase commands use absolute coordinates. Lowercase commands like m, l, c, and a move relative to the current point, which makes copied path segments easier to reposition.
Use curves and arcs deliberately
C, S, Q, and T create Bezier curves, while A draws elliptical arcs with radius and sweep flags.
Preview every command edit
Small changes in path data can move geometry dramatically, so preview and format the SVG before shipping.
Path command example
A single path can draw a smooth curve.
<svg viewBox="0 0 160 96"><path d="M12 52 C24 12 66 12 78 52 S132 92 148 52" fill="none" stroke="#0e7c66" stroke-width="8"/></svg>SVG Path Commands Guide FAQ
What is the SVG d attribute?
It is the path data string that tells the browser how to draw the path.
What are common SVG path commands?
M moves, L draws lines, C and Q draw curves, A draws arcs, and Z closes the current shape.
Are uppercase and lowercase SVG path commands different?
Yes. Uppercase path commands use absolute coordinates, while lowercase commands use coordinates relative to the current point.
How do I edit SVG paths?
Use a path editor or carefully change path commands while previewing the result.