✒️SVG Path Visualizer

About this tool

Paste the d="…" value from an SVG path. The tool draws it with end points numbered in red and Bézier control handles in orange, lists every command with its meaning and absolute end point, shows the bounding box, and rewrites the whole path in all-absolute and all-relative commands.

Reading SVG path commands

Every shape in an icon set or illustration is ultimately a <path> whose d attribute is a mini drawing language. M moves the pen, L draws a straight line, and H and V draw horizontal and vertical lines. C draws a cubic Bézier curve with two control points, while S continues smoothly by mirroring the previous control point. Q and T are the quadratic equivalents with one control point, A draws an elliptical arc and Z closes the shape. Upper-case commands use absolute coordinates and lower-case ones are relative to the current point. Paths exported from design tools are often minified ("m10-5.5.5" packs three numbers together) and repeat commands implicitly, which makes them hard to read. The parser handles both, follows the current point through every command to compute absolute positions, and draws handles so you can see exactly how each curve is shaped. Relative paths are usually shorter (useful for smaller files), while absolute ones are easier to edit by hand. Honest limits: the bounding box includes control points, so curves may sit slightly inside it. Arc handles aren't drawn, and transforms or stroke settings on the original element aren't applied. The SVG optimizer, SVG to JSX and the clip-path generator are related, and What an SVG is, why it scales forever, and when not to use it explains SVG.

Frequently asked questions