What's an SVG path?

The path element is the workhorse of SVG. A single d attribute encodes any 2D shape, a circle, a logo, an icon, a hand-drawn curve, as a sequence of single-letter commands followed by numeric arguments. M 10 20 L 30 40 is "move to (10, 20), then line to (30, 40)." Read enough path strings and the letters become as legible as English.

This editor parses your d string into commands, draws the resulting path inside an inline SVG with a grid, and gives you draggable handles for every anchor and control point. Drag a handle and the d string updates in lockstep; type into the d field and the canvas updates. Either direction is the source of truth.

How to use it

1. Paste a d string into the input, just the path data, no surrounding <path> element. The "Sample" button drops in an example with cubic Béziers. 2. Drag handles on the canvas. Filled circles are anchor points (the path passes through them); hollow circles are Bézier control points (the path is pulled toward them but doesn't pass through). Dashed lines connect each anchor to its control points so you can see the geometry. 3. Read the commands list for index, command type, and argument values. Useful for debugging "why does this curve look weird", usually a stray 0 or transposed pair. 4. Copy the cleaned-up d string or Download SVG to get a complete file with viewBox set to the path's bounding box.

The command vocabulary

Letter Name Args What it does
`M` / `m` moveto `x y` Pick up the pen; move it to a new position. The path doesn't draw between the previous point and this one.
`L` / `l` lineto `x y` Draw a straight line from the current point to `x y`.
`H` / `h` horizontal `x` Horizontal line, only one coordinate.
`V` / `v` vertical `y` Vertical line.
`C` / `c` cubic Bézier `x1 y1 x2 y2 x y` Two control points and a destination. The most common curve.
`S` / `s` smooth cubic `x2 y2 x y` Continues a previous `C`/`S` smoothly, the first control point mirrors the previous one.
`Q` / `q` quadratic Bézier `x1 y1 x y` Single control point. Cheaper, less control than cubic.
`T` / `t` smooth quadratic `x y` Like `S` but for `Q`.
`A` / `a` elliptical arc `rx ry rot large-arc sweep x y` Seven parameters because arcs are hard.
`Z` / `z` close (none) Draw a straight line back to the last `M`.

Uppercase = absolute (coordinates are in viewport space). Lowercase = relative (offsets from the previous point). The editor parses both, but normalizes everything to absolute internally so dragging is predictable.

Reading the canvas

  • Filled handles, anchor points. The path actually passes through these.
  • Hollow handles, control points. The curve bends toward them but doesn't reach.
  • Dashed lines, links from anchor to its associated control point. They aren't part of the path; they're a visual aid so you can see how each Bézier is shaped.
  • Grid, auto-scaled to roughly 1/10 of the bounding box, snapped to a "nice" round number (1, 2, 5, 10, 20, 50, 100, …). Toggle off with the Grid switch in the toolbar.

Common gotchas

  • Negative numbers without spaces. M0 0L10 10 is valid; the parser splits on the negative sign. But L-5-10 works too, the parser handles both.
  • Implicit command repetition. L 10 10 20 20 means "line to (10, 10) then line to (20, 20)", the editor unpacks this into two L commands so each row in the commands list has the right argument count.
  • Comma vs space separators. Both work and are interchangeable. The serializer emits spaces consistently.
  • Arcs with sweep flags. The large-arc and sweep flags must be 0 or 1 with NO leading sign. A 30 30 0 0 1 50 50 is correct; some browsers are strict about this.

Privacy

The path string and any edits stay in your browser. The "recent" inputs list is in localStorage only. No path data is uploaded to any server.

Frequently asked

Does the editor support every SVG path command?

Yes — M, L, H, V, C, S, Q, T, A, and Z, in both absolute (uppercase) and relative (lowercase) forms. Every command is parsed; draggable handles are provided for anchors of every type and for control points of C, S, and Q curves.

Why does my path get rewritten when I drag a handle?

The editor normalizes the path to absolute coordinates internally so dragging is predictable. The 'd' field always shows the current canonical form. If you need to keep relative commands, copy your original before editing.

Can I edit arc parameters by dragging?

Only the endpoint of an arc is draggable. Arc radii, rotation, and the large-arc/sweep flags are five non-spatial parameters that don't map cleanly to a single drag gesture — edit them in the d field directly. The endpoint handle stays in sync.

Why is the bounding box approximate?

The bbox is computed from anchor points only, not from curve extrema. A curve can bulge slightly outside its endpoints; the auto-fit padding (10%) absorbs the difference for visualization. For a tight bbox you'd need full curve solver math.

Does the downloaded SVG include a stroke?

Yes — the downloaded file uses 'stroke=black' and 'stroke-width=2' with no fill, which is the most useful default for outline review. Edit the SVG file in your editor to change those, or paste the d-string into your own template.

What's the difference between cubic and quadratic Béziers?

Cubic (C) has TWO control points per segment, giving more shape control. Quadratic (Q) has ONE control point and is cheaper to compute but more limited. Most font glyphs use quadratic; most modern vector art uses cubic. The editor draws control-point lines for both.

Why does the parser accept 'L-5-10' but my IDE rejects it?

The SVG spec allows numbers to act as separators when a sign indicates a new number — 'L-5-10' is two numbers. Some linters are stricter and want explicit spaces. The editor follows the spec; if you want safer output, add spaces manually after copying.

Can I import an existing SVG file?

Open the file in any text editor, find the <path> element, and copy its d="..." value into this tool. There's no file upload widget because most SVGs have multiple paths and you'd want to pick one — easier to extract by hand.

Related tools