The SVG <path> element is the most powerful and most intimidating element in the SVG spec. A single d attribute can describe any shape -- circles, curves, complex illustrations, font glyphs -- using a compact string of commands and coordinates. But reading and editing that string by hand feels like decoding machine language.
<path d="M10 80 C40 10, 65 10, 95 80 S150 150, 180 80"/>
Until you understand the command vocabulary, that is meaningless. Once you do, it becomes precise and elegant. There are only 10 commands to learn.
The command vocabulary
Every path is a sequence of commands. Uppercase commands use absolute coordinates. Lowercase use relative coordinates (offsets from the current position).
M/m (Move To): Move the pen to a point without drawing. Every path starts with M.
L/l (Line To): Draw a straight line from the current position to the target.
H/h (Horizontal Line): Draw a horizontal line. Only needs an x-coordinate.
V/v (Vertical Line): Draw a vertical line. Only needs a y-coordinate.
C/c (Cubic Bezier): The workhorse curve. Takes two control points and an endpoint: C x1 y1, x2 y2, x y. The control points determine the shape of the curve without the curve passing through them.
S/s (Smooth Cubic Bezier): Shorthand for chaining cubic beziers. The first control point is automatically reflected from the previous curve's second control point, ensuring a smooth join. Only needs one explicit control point and the endpoint.
Q/q (Quadratic Bezier): A simpler curve with one control point: Q x1 y1, x y. Less flexible than cubic but sufficient for many shapes.
T/t (Smooth Quadratic Bezier): Shorthand for chaining quadratic beziers, similar to S for cubics.
A/a (Arc): Draws an elliptical arc. The most complex command with 7 parameters: A rx ry rotation large-arc sweep x y. It handles rounded corners, circles, and elliptical segments.
Z/z (Close Path): Draws a straight line back to the path's starting point.
Why relative coordinates matter
Consider drawing a triangle:
Absolute: M 100 100 L 150 50 L 200 100 Z
Relative: M 100 100 l 50 -50 l 50 50 Z
The relative version describes the shape independent of its starting position. Change the M coordinates and the entire shape moves. With absolute coordinates, you would need to update every point.
For complex shapes, relative coordinates also produce shorter path strings because the offsets tend to be small numbers.
Bezier curves demystified
The cubic bezier C x1 y1, x2 y2, x y is where most people get lost. Think of it this way: the curve starts at the current position and ends at (x, y). The first control point (x1, y1) pulls the start of the curve toward itself. The second control point (x2, y2) pulls the end of the curve toward itself.
If you place both control points on the line between start and end, you get a straight line. Move them perpendicular to that line and you get an S-curve or a simple arc, depending on which side they are on.
The S command is genius for smooth paths. When you chain C commands, you need the end of one curve to flow smoothly into the next. This requires the second control point of the first curve and the first control point of the second curve to be reflections of each other across the joining point. S does this automatically.
Practical editing scenarios
Adjusting a single point. You have an icon where one corner is not quite right. Instead of re-exporting from a design tool, you can locate the relevant command in the path data and adjust the coordinates. Knowing the command vocabulary makes this a 30-second edit instead of a round-trip through Figma.
Creating shapes programmatically. Generating SVG paths in JavaScript for data visualization, generative art, or dynamic UI elements. Understanding path commands lets you construct paths mathematically rather than using a library.
Optimizing paths. Replacing verbose absolute-coordinate paths with compact relative paths, converting unnecessary cubic beziers to quadratic ones, and simplifying arcs.
The visual feedback gap
The fundamental problem with editing path data is the disconnect between the text and the visual result. You change a number and have to reload to see the effect. That feedback loop is too slow for exploratory editing.
I built an SVG path editor at zovo.one/free-tools/svg-path-editor that shows the path visually with draggable control points and handles. Edit the path string and the visual updates instantly. Drag a control point and the path string updates. You can see exactly how each command parameter affects the shape in real time.
It is the tool that finally made SVG paths feel approachable instead of arcane.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
Top comments (0)