SVG Path Visualizer
Paste a path d attribute and see it rendered live, with its bounding box and command breakdown
About this tool
The ToolNinja SVG Path Visualizer renders a raw path d attribute live — paste any path data and see exactly what shape it draws, its bounding box dimensions, and a readable breakdown of every individual drawing command (M, L, C, Q, A, Z and their lowercase relative variants). Reading a path string like M12 2 L15 8.5 L22 9.3... cold is genuinely difficult — there's no visual feedback in the raw text, and a single wrong coordinate can silently produce a malformed or invisible shape. This tool uses the browser's own native SVG rendering (not a custom path-drawing implementation), so what you see is exactly how every browser will actually render it, with the bounding box computed via the real DOM getBBox() API. Everything runs 100% in your browser — the path data never leaves your machine.
When to use it
- →Debugging why a hand-written or exported SVG path isn't rendering the shape you expect
- →Understanding what each command in an unfamiliar path string actually does, command by command
- →Checking a path's exact bounding box dimensions before setting a matching viewBox
- →Verifying an icon or logo's path data renders correctly before embedding it in code
Tips
- ◆The command list breaks a compressed path string (where multiple coordinate pairs follow one letter, like L10 20 30 40 for two line-to commands) into its actual individual commands, exactly as the browser interprets it.
- ◆Mixed-case paths (some uppercase/absolute commands, some lowercase/relative) are flagged explicitly — relative commands are measured from the previous point, not the origin, which is a common source of confusion when hand-editing a path.
- ◆The bounding box values are read directly from the browser's native SVGGeometryElement.getBBox(), the same measurement a real rendering engine uses — not an approximation.
Frequently asked questions
What's the difference between uppercase and lowercase path commands?
Uppercase commands (M, L, C...) use absolute coordinates — positions in the SVG's own coordinate space. Lowercase commands (m, l, c...) use relative coordinates — an offset from wherever the path currently is. Mixing them is valid and common, but it's also why two paths that look similar on paper can render completely differently if a case got flipped by mistake.
Why is my path's bounding box bigger than I expected?
The bounding box reflects the actual rendered geometry, including any curve control points that extend beyond the visible stroke — a Bézier curve's bounding box is based on the mathematical extent of the curve itself, not a rough visual estimate, so it can be wider or taller than the shape appears to need at first glance.
Can this tool edit or optimize my path data, not just visualize it?
No — this tool is read-only visualization and analysis. For optimizing or cleaning up SVG markup (including path data) ToolNinja's SVG Optimizer is the right tool; use this one specifically to see and understand what a path actually draws before deciding what to change.