SVG Path Visualizer
Parse an SVG path's d attribute into its individual commands (M, L, C, Q, A, Z and more), see a labelled breakdown table, and render an annotated preview with numbered vertices and Bézier control points. Convert between absolute and relative coordinates. Runs entirely in your browser.
Input
View
Four numbers: min-x min-y width height.
Style
Transform
Decimal places to keep when rounding coordinates.
Overlays
Output
Paste SVG path data to see the preview.
| Command | Type | Parameters | Coordinates |
|---|---|---|---|
| No data yet | |||
Guides
The SVG Path Visualizer takes the d attribute of an SVG <path> element and turns that dense string of letters and numbers into something you can actually read: a command-by-command breakdown table and a live, annotated preview of the shape it draws.
Paste any path data — M 10 10 L 90 90 C 130 50 170 130 190 90 Z — and the tool parses it into its individual drawing commands, numbers each vertex on the canvas, and (for curves) shows the Bézier control points that pull the line into shape.
What the tool shows you
- Command breakdown table. Every command in the path becomes a row: the command letter, its human-readable type (move, line, cubic Bézier, elliptical arc, close path…), its parameters with labelled fields (
x,y,x1,rx,sweep…), and whether it uses absolute (uppercase) or relative (lowercase) coordinates. - Annotated preview. The path is rendered inside your chosen
viewBox, with an optional grid, numbered endpoints, and dashed lines to each curve's control points. The preview is a standalone SVG string you can copy or download and drop straight into a project.
Supported commands
Every SVG path command is parsed: M/m (move), L/l (line), H/h and V/v (horizontal/vertical line), C/c (cubic Bézier), S/s (smooth cubic), Q/q (quadratic Bézier), T/t (smooth quadratic), A/a (elliptical arc), and Z/z (close path). The parser follows the real SVG grammar, so it handles the awkward cases: implicit repeated commands (a lone M followed by extra coordinate pairs draws lines), numbers acting as their own separator (L10-20), scientific notation, and the single-digit flag fields inside arc commands.
Convert between absolute and relative
Switch the Coordinates option to rewrite the whole path to absolute or relative form, rounded to the precision you pick. This is handy for cleaning up exported paths, diffing two shapes, or making a path easier to edit by hand.
Why doesn't it show path length?
Measuring the true length of a curved path needs the browser's own SVG engine. This tool runs its parser in pure JavaScript so it works identically in the browser and via the API, so the length stat from older tools is intentionally left out — everything shown here is computed from the path data directly.
Privacy
Everything happens in your browser. Your path data is never uploaded to a server, and the preview SVG is generated locally.