SVG Path Editor / Previewer - Live Path Visualizer

SVG path command reference

• M x y - Move to (x, y) without drawing
• L x y - Line to (x, y)
• H x - Horizontal line to x
• V y - Vertical line to y
• C x1 y1 x2 y2 x y - Cubic Bézier curve
• S x2 y2 x y - Smooth cubic Bézier
• Q x1 y1 x y - Quadratic Bézier curve
• T x y - Smooth quadratic Bézier
• A rx ry x-rot large sweep x y - Arc
• Z - Close path

Lowercase versions of each command (m, l, h, v, c, s, q, t, a) use coordinates relative to the current point rather than the viewBox origin.

SVG coordinate system

SVG uses a top-left origin: the point (0, 0) is at the top-left corner of the viewBox, and the Y axis increases downward. This is the opposite of standard mathematical convention where Y increases upward. Developers accustomed to Cartesian coordinates often find their shapes mirrored vertically when they first work with SVG paths.

For example, drawing a line from (0,0) to (100,100) goes diagonally down and right, not up and right as it would on a standard math graph.

Bézier control points explained

For the C (cubic) command - C x1 y1 x2 y2 x y - the pair (x1,y1) is the control handle for the start of the curve, and (x2,y2) is the control handle for the end. Think of each handle as a magnet that "pulls" the curve toward it without the curve actually reaching the handle point. Moving a handle further away makes the curve more pronounced; moving it close to the endpoint makes the curve tighter.

The Q (quadratic) command uses a single shared control point (x1,y1) that influences both ends of the curve simultaneously.

Practical path examples