How to edit SVG paths point by point

Start with the path data

The geometry of an SVG <path> lives in its d attribute. Letters identify commands and numbers provide coordinates or other parameters. This example moves to one point, draws two straight lines, and closes the outline:

<path d="M 20 20 L 120 20 L 70 100 Z" fill="#2f6fed" />

Uppercase commands use absolute coordinates measured from the SVG coordinate system's origin. Lowercase commands use coordinates relative to the current point. Both are valid, but absolute coordinates are often easier to inspect manually.

The path commands you will see most often

• M x y moves the current point without drawing.
• L x y draws a straight line to a point.
• H x and V y draw horizontal and vertical lines.
• C x1 y1 x2 y2 x y draws a cubic Bézier curve using two control points and one endpoint.
• S x2 y2 x y continues a cubic curve with a reflected first control point.
• Q x1 y1 x y draws a quadratic Bézier curve with one control point.
• A rx ry rotation large-arc sweep x y draws an elliptical arc.
• Z closes the current subpath.

A single path can contain several subpaths. Every new M begins another subpath, while Z connects the current point back to that subpath's starting point.

A safe point-editing workflow

1. Preserve the original. Duplicate the element or copy its markup before making a structural change.
2. Select one path. In SVG Vector Lab, choose it on the canvas or in the vector list. The path commands and their coordinates appear in the inspector.
3. Identify the endpoint. For line and curve commands, the final coordinate pair is usually the anchor you see on the outline.
4. Move a small distance. Drag the point or change one coordinate. Watch both the canvas and the d attribute to confirm you moved the intended anchor.
5. Adjust curve handles separately. A cubic curve has two control points. They affect direction and tension but are not points through which the curve must pass.
6. Inspect neighboring segments. Moving a shared anchor affects the end of one segment and the start of the next, so check both sides of the point.
7. Export and test. Open the saved SVG in a browser at small and large sizes before replacing a production asset.

Absolute and relative coordinates

Suppose a path is currently at 20,20. The commands L 80 50 and l 60 30 reach the same endpoint. The first describes the destination; the second describes the offset.

Relative commands can make repeated geometry compact and easier to move as a group. Absolute commands make individual points easier to locate. Converting between them should not change the rendered shape, though number rounding may create tiny differences.

Common path-editing mistakes

• Changing the wrong pair: a C command contains three coordinate pairs, and only the last pair is its endpoint.
• Breaking an arc: the two arc flags must be either 0 or 1; they are not coordinates.
• Forgetting the viewBox: coordinates are interpreted inside the SVG's own coordinate system, not directly as screen pixels.
• Removing a close command: deleting Z can change the final edge and how the fill is computed.
• Over-rounding: reducing coordinate precision too aggressively can distort small icons.

Continue learning

Next, learn how cubic Bézier curves work, or review how to optimize an edited SVG for the web.