SVG Path Visualizer
Paste any SVG path `d` attribute and inspect it live: anchor & control points, bounding box, path length, per-command breakdown. Auto-fit viewBox, grid, copy normalized path.
| # | Cmd | Description | Parameters | Abs. point |
|---|
Uppercase = absolute coords · lowercase = relative · control handles shown for C/S/Q/T/A.
Command reference
About this tool
An SVG path inspector: paste any path's d attribute and see it rendered with anchor points, Bézier control handles, and the bounding box overlaid on a grid. It also reports the path length and a per-command breakdown (M, L, C, Q, A, Z, …) so you can understand exactly how a shape is constructed.
For example, M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 draws a smooth wave — the tool shows the two cubic Bézier segments, the implicit reflection of the first control point, and the curve's total length.
Useful when debugging an icon, tuning a Bézier curve by hand, or learning how SVG path commands map to geometry. The view auto-fits the path and you can copy a normalized version of the d string.
FAQ
Which path commands are supported? ›
All SVG path commands: M (moveto), L/lineto, H/V (horizontal/vertical), C/Q (cubic/quadratic Bézier), S/T (smooth Bézier), A (arc), Z (closepath), in both absolute (uppercase) and relative (lowercase) forms.
What does "path length" mean? ›
It is the geometric arc length of the rendered path, computed by flattening curves into small line segments and summing them. It matches what getTotalLength() reports in the SVG DOM.
Can I edit the path by dragging points? ›
No — this is a read-only inspector/visualizer. For interactive editing, use a dedicated vector editor; use this tool to understand and verify the resulting d attribute.