Which SVG path commands are supported?

All standard SVG path commands are parsed: M/m (move-to), L/l (line-to), H/h (horizontal line), V/v (vertical line), C/c (cubic Bézier), S/s (smooth cubic Bézier), Q/q (quadratic Bézier), T/t (smooth quadratic Bézier), A/a (arc), and Z/z (close path). Both uppercase (absolute) and lowercase (relative) variants are handled.

How is the bounding box calculated?

The bounding box is derived from the rendered SVG viewBox. After the path is drawn, the tool reads the SVG element's getBBox() result to obtain the exact minimum x, y, width, and height of the path geometry, independent of the viewport.

Can I edit the path and see changes live?

Yes. The path input has a real-time listener — every keystroke re-renders the SVG canvas and re-parses the command list so you can experiment with path values interactively.

What does the scale slider do?

The scale slider multiplies the SVG viewBox zoom level from 0.25× to 4×, letting you inspect fine details or see the full shape if it extends beyond the default viewport.

design Free No signup

SVG Path Visualizer

Paste an SVG path `d` attribute, render it live with a grid, and explore each parsed path command.

Loading tool…

About this tool

Enter any SVG path `d` string and instantly see it rendered on a canvas with a grid background. The tool parses every command — M, L, C, Q, A, Z, H, V, S, T — and lists them in a breakdown table with their coordinates. Use the scale slider to zoom in and out, pick stroke and fill colors, and toggle fill on or off. The bounding box dimensions are calculated and displayed. Copy the path as a ready-to-use `<path d="..."/>` SVG element with one click.

How to use

1 Paste or type an SVG path `d` string into the input field — a sample path is pre-loaded.
2 Adjust the scale slider and choose stroke/fill colors using the pickers.
3 Review the parsed command list below the canvas to understand each segment.
4 Click 'Copy as SVG element' to get a `<path d="..."/>` snippet ready for your code.

Frequently Asked Questions

Related tools

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Box Shadow Generator

Build CSS box-shadow values visually with live preview — supports multiple layers.

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.