What SVG path commands are supported?

All standard commands: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Both absolute (uppercase) and relative (lowercase) variants are supported.

How are control points shown?

For cubic bezier curves (C/c), two blue control points are connected to each anchor by dashed lines, showing you exactly how the curve is shaped. For quadratic curves (Q/q), a single purple control point is shown. Anchor points are drawn as small red dots.

Can I edit the path in the visualizer?

Currently you edit the path data text and the visualization updates live. Direct manipulation of control points by dragging on the canvas is planned for a future update.

SVG Path Visualizer

NEW

Paste any SVG path d-attribute and see it rendered instantly with control point visualization.

Control points Grid

SVG Path Data (d attribute)

Preview

Send output to:

How to use SVG Path Visualizer

Paste an SVG path d-attribute string into the input box.
The path is rendered instantly in the preview pane with auto-calculated viewBox.
Blue dots show cubic bezier control points, purple dots show quadratic bezier control points, and red dots show anchor points.
Toggle the grid overlay for precise positioning, or use the Copy/Download buttons to export your path.
Edit the path data and see the results update in real time.

What is SVG Path Visualizer?

SVG path data strings can be cryptic — a long string of letters and numbers that's hard to debug by reading alone. This tool renders your path data live, showing the actual shape, control points for bezier curves, and anchor points. It's invaluable when you're hand-editing SVG paths or debugging why a curve doesn't look the way you expect.

The tool supports all standard SVG path commands: M/m (move), L/l (line), H/h (horizontal), V/v (vertical), C/c (cubic bezier), S/s (smooth cubic), Q/q (quadratic bezier), T/t (smooth quadratic), A/a (arc), and Z/z (close path). Control points are shown as colored dots connected by dashed lines to their anchors.

FAQ

What SVG path commands are supported?: All standard commands: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Both absolute (uppercase) and relative (lowercase) variants are supported.
How are control points shown?: For cubic bezier curves (C/c), two blue control points are connected to each anchor by dashed lines, showing you exactly how the curve is shaped. For quadratic curves (Q/q), a single purple control point is shown. Anchor points are drawn as small red dots.
Can I edit the path in the visualizer?: Currently you edit the path data text and the visualization updates live. Direct manipulation of control points by dragging on the canvas is planned for a future update.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

SVG Path Visualizer

How to use SVG Path Visualizer

What is SVG Path Visualizer?

FAQ

Related tools

People also use

Ad blocker detected

Keyboard shortcuts