Editing SVG Paths in the Browser: A Practical Guide to the d Attribute

Most SVG icons you download are a single <path> element with a d attribute that looks like line noise: M4 12l5 5L20 6. It is tempting to treat that string as a black box and regenerate the whole file whenever something needs to change. You don't have to. Once you can read the path commands, small fixes — nudging a corner, closing a gap, flipping a curve — take seconds and keep your file clean.

This guide walks through the commands you will actually meet, a workflow for editing them without breaking things, and a few habits that keep paths maintainable.

The commands that matter

The d attribute is a list of drawing instructions. Each instruction is a letter followed by numbers. Uppercase letters use absolute coordinates; lowercase letters are relative to the current point. The full grammar is defined in the W3C SVG 2 paths chapter, but in practice you will mostly see these:

Command	Meaning	Example
M / m	Move the pen without drawing	M10 10
L / l	Straight line to a point	L20 20
H / h, V / v	Horizontal or vertical line	H40, v8
C / c	Cubic Bézier curve (two control points)	C20 0 40 0 50 10
Q / q	Quadratic Bézier curve (one control point)	Q25 0 50 10
A / a	Elliptical arc	A5 5 0 0 1 20 20
Z / z	Close the shape back to the start	Z

That checkmark from the intro, M4 12l5 5L20 6, reads as: move to (4, 12), draw a line 5 right and 5 down (relative), then draw a line to the absolute point (20, 6).

A safe editing workflow

Editing paths by hand goes wrong in predictable ways: you change an absolute coordinate inside a run of relative ones, or you drop a number and every following command shifts. A simple routine avoids most of that.

1. Normalise before you edit. Many optimisers compress paths aggressively, writing l5 5-3 2 with implied repeats and no separators. Before editing, expand the path so that every command letter is explicit and each segment sits on its own line. SVG ignores the whitespace, so this is purely for your eyes:

<path d="
  M4 12
  l5 5
  L20 6
" fill="none" stroke="currentColor" stroke-width="2"/>

2. Edit with a live preview. You want to see the shape update as you type. A local HTML file with the SVG inlined and a browser auto-reload works fine; so does an in-browser SVG editor that shows the code and the rendered result side by side — the important thing is the instant feedback, not the tool. Change one number at a time and watch which point moves.

3. Know your viewBox. Coordinates only make sense relative to the viewBox. An icon with viewBox="0 0 24 24" has its drawing space running from 0 to 24 on both axes, regardless of how large it is rendered. If a point disappears, check whether you pushed it outside that box.

4. Re-optimise at the end, not the middle. Once the shape looks right, run your optimiser again to shrink the output. Keep the readable version in source control if you expect to edit it again.

Common fixes you can do by hand

Moving a single corner. Find the L or l that ends at that corner and adjust its numbers. If it is relative (l), remember that the next relative segment starts from the new position, so the rest of the shape may shift with it. Converting that one segment to absolute (L) isolates the change.

Closing a visible gap. If a filled shape has a hairline gap or a stroke looks unjoined, the path probably ends near — but not exactly at — its start point. Adding Z closes it properly and gives you a clean line join instead of two caps.

Softening a sharp corner. Replace an L with a Q whose control point sits at the original corner, and whose end point is a little further along the next edge. It is a cheap way to round one corner without redrawing.

Flipping a curve. For a C curve, mirror the two control points across the line between the start and end points. For arcs, toggling the sweep flag (the fifth number in an A command) flips which way the arc bulges.

Debugging tips

• Temporarily add stroke="red" and fill="none" to see the actual outline rather than the filled shape.
• Draw small circles at suspicious coordinates: <circle cx="20" cy="6" r="0.5" fill="blue"/>. It is the fastest way to confirm where a point really is.
• If the shape renders in one browser but not another, look for a missing separator between two negative numbers (10-5 is valid, 10--5 is not).

Keep paths readable for the next person

Paths are code. A few conventions make them far easier to maintain:

• Keep icons on a consistent grid (24 × 24 is common) so coordinates are comparable between files.
• Prefer currentColor for fills and strokes so icons inherit text colour instead of hard-coding hex values.
• Split complex icons into several <path> elements with meaningful id or class names instead of one enormous path.

Learning to read the d attribute takes an afternoon, and it pays back every time you would otherwise reopen a design tool just to move one point. Start with the checkmark, change a number, and watch what happens.