SVG Path Visualizer & Curve Inspector

About SVG Path Visualizer & Curve Inspector

Paste the d attribute of an SVG path and this tool splits it into segments, draws each one, and shows Bézier control points and arc centers alongside. You can paste a whole <svg> snippet; it extracts the d of the first path. It reports counts per command, the number of subpaths and whether they are closed, the bounding box and the path length, and flags errors such as a command with missing arguments, with its position.

The formatter can convert every coordinate to absolute (uppercase) or relative (lowercase), trim decimals (3 places by default), and either pretty-print or compact the output. Path length is approximated by sampling 72 points per segment, so it can differ from the browser's getTotalLength() in the decimals.

Six commands cover most real paths

A path is a list of instructions for a pen: where to put it down and how to move it. These are the commands you meet in almost every icon file. The rest are shorthands: H and V draw horizontal and vertical lines, and S and T continue a curve by mirroring the previous control point.

• M x y — lift the pen and move. This starts a new subpath. Extra coordinate pairs after an M are treated as L commands.
• L x y — straight line from the current point.
• C x1 y1 x2 y2 x y — cubic Bézier. The two control points set the direction in which the curve leaves and arrives.
• Q x1 y1 x y — quadratic Bézier. One control point, simpler shapes; TrueType font outlines are built from these.
• A rx ry rotation large-arc-flag sweep-flag x y — an arc cut from an ellipse.
• Z — draw a straight line back to the start of the current subpath and close it. Fills render without Z, but strokes join differently at the corner.

Why the two arc flags are confusing

An A command only gives start point, end point and radii. Two circles of radius r usually pass through two given points, and on each circle there is a short way and a long way between the points. That makes four candidate arcs, and the two flags pick one. large-arc = 1 chooses the arc greater than 180°, 0 the smaller one. sweep = 1 chooses the direction of increasing angle; since the SVG y-axis points down, that is clockwise on screen.

If the radius is less than half the distance between the points, no circle fits. The specification says to scale the radii up until one does, and this tool does the same. That is why an arc with radius 10 can still render as a large semicircle. When the radius is exactly half the distance, only one semicircle exists and the large-arc flag stops mattering.

Flags are single characters, so they may be written without separators. In a minified file, “a60 60 0 01100 0” means flags 0 and 1 followed by x = 100, y = 0. The parser here handles that form.

Absolute versus relative coordinates

Uppercase commands use coordinates measured from the canvas origin; lowercase commands use offsets from the current pen position. To move an absolute path you have to edit every number, while a relative path only needs its first m changed. Optimizers such as SVGO output mostly lowercase for a similar reason: small offsets have fewer digits, so the file gets smaller.

A common mistake: in a relative c, all three coordinate pairs are measured from the segment's start point, not from the previous control point. Starting at (10, 10), C 20 20, 40 20, 50 10 becomes c 10 10 30 10 40 0, where each pair is the absolute value minus (10, 10).

A lowercase m right after a z is measured from the start of the subpath that z returned to. If a shape appears in the wrong place after you hand-merge two paths, look there first.

Debugging a path that renders wrong

Numbers can be separated by a sign or a second decimal point, not only by spaces and commas. “10-5” is 10 and -5, and “.5.5” is 0.5 and 0.5. Hard to read, but valid. By contrast, an L with only one number is an error, and browsers typically stop drawing the path at that point, which is why half an icon can vanish.

If a shape with a hole, like a donut or the letter O, renders solid, check the fill rule. With the default nonzero rule, the inner subpath has to wind in the opposite direction from the outer one to become a hole. fill-rule=“evenodd” makes holes regardless of direction.

When a path looks right but its bounding box is larger than expected, look for control points far outside the shape. The tool's bounding box follows the drawn curve, but some design apps and older libraries include control points, which can make icons look misaligned.

Worked examples

How to use it

1. Paste a d string or SVG markup, or load a sample.
2. Click a segment to see its control points, arc center and endpoints.
3. Choose coordinate mode and precision, then copy the formatted path.

Frequently asked questions