SVG Path Visualizer

Paste any SVG path-data string — the value of a d attribute on an <path> element — and watch it draw in real time. See the total path length, the bounding box, and a per-command breakdown. Pick a stroke colour, switch between outlined and filled rendering, toggle a coordinate grid, and copy the result back out as a ready-to-use <path> snippet. Everything stays in this tab.

Path data

Sample Clear

Preview

— Copy <path>

Render options

Show grid — minor every 10 units, major every 50 Show bounding box — dashed accent rectangle around the path Mark start point — small dot at the first M command Fill — paint the interior instead of just outlining

Stroke Width viewBox

Command breakdown —

#	Cmd	Form	Description

No commands parsed yet.

Command reference click a row to insert it at the cursor

About SVG path data

• Path data is the value of a <path> element's d attribute — a single string of one-letter commands followed by numbers, e.g. M 10 10 L 90 90.
• Uppercase commands are absolute (coordinates in the viewBox); lowercase are relative (offset from the previous point).
• Implicit repeats are an SVG shorthand: M 10 10 30 30 means move to (10, 10) followed by line to (30, 30). The second pair is treated as an implicit L by the renderer.
• Length is measured by the browser's getTotalLength() in user units; the bounding box by getBBox(). Both run after the path is mounted, so they're always live.
• The viewBox field controls what part of the coordinate system is visible. The default 0 0 200 200 covers a 200×200 design grid; switch to -50 -50 300 300 to give the path breathing room.
• Everything runs in the browser. The path you paste never leaves this tab.