Documentation

SVG path docs with the same visual language as the app.

This page is organized like a product doc: a sticky sidebar, in-page anchors, live SVG examples, and concise explanations that mirror how the editor behaves.

What you getAnchored navigation, syntax tables, and example SVGs

Everything is laid out for quick scanning while still being detailed enough for reference.

Overview

Why this tool exists

SVG paths are compact, but they are also easy to misunderstand once commands start stacking up. path.step turns the path into a walkthrough: you can inspect each command, see the active segment, and understand how relative coordinates resolve.

The editor and docs now share the same dark product design so the experience feels like a single surface instead of separate pages.

Quick start

Paste a path and step through it

1Paste a `d` attribute

Start with any icon path or a simple shape from the examples below.

2Use the step controls

Move command by command to inspect the live pen position and control handles.

3Copy minimal SVG markup

Export a clean SVG with viewBox and currentColor.

Read-only stepper

A documentation-friendly version with only preview and steps

Read-only stepper

A stripped-down version that shows the preview and step sequence without any editing controls.

Preview + steps only

Live previewviewBox 0 0 24 24

A stripped-down version that shows the preview and step sequence without any editing controls.

Steps4 items

Path syntax

Commands and what they do

Cmd	Name	Parameters	Note
`M`	Move to	`x y`	Starts a new subpath without drawing.
`L`	Line to	`x y`	Draws a straight line to a point.
`C`	Cubic Bézier	`x1 y1 x2 y2 x y`	Uses two control points to shape a curve.
`Q`	Quadratic Bézier	`x1 y1 x y`	Uses one control point to shape a curve.
`A`	Arc	`rx ry rot large sweep x y`	Draws an elliptical arc segment.
`Z`	Close path	`—`	Returns to the start of the current subpath.

Examples

SVGs that show more than one kind of path

Rounded square

0 0 140 140

A basic icon path with a rounded outline. Great for seeing how close-path behaves.

Curved mark

0 0 140 140

A soft freeform shape that makes control points and smooth curves easier to inspect.

Stroke path

0 0 140 140

A minimal path that shows the difference between a path and its rendered stroke.

Copy-ready output

What the export button emits

The editor is intentionally opinionated about output. It emits clean SVG markup with no fixed width or height, so the icon can be sized from CSS or inherited from text.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4Z" />
</svg>

Accessibility

Keep the icon readable and predictable

Use currentColor so icons inherit from the surrounding text color.
Prefer a consistent viewBox so the icon scales cleanly at every size.
Use stroke-linecap and stroke-linejoin that match the style of the set.
Keep the path minimal so the exported SVG stays easy to inspect and reuse.