SVG Path Visualizer

What an SVG path actually is

Every curve, icon, and complex shape in an SVG comes down to one attribute: d, the path data. It is a compact string of single-letter commands followed by numbers — a tiny drawing language where a virtual pen moves, draws lines, and sweeps curves across the canvas. The string M 20 80 C 40 10, 65 10, 95 80 tells the pen to move to (20, 80), then draw a cubic Bézier curve. This tool takes any such d string, renders it live on a grid, computes its bounding box, and lists every command in plain language so you can understand exactly what each segment does.

The command alphabet

Path commands come in pairs: an uppercase letter uses absolute coordinates (measured from the SVG origin), and the same lowercase letter uses relative coordinates (measured from wherever the pen currently sits). The tool parses and labels both.

Understanding Bézier curves

The curve commands are where most people get lost, so it helps to see the difference. A quadratic Bézier (Q) has one control point: the curve starts at the pen, ends at the end point, and bends toward that single control point like a magnet pulling the line. A cubic Bézier (C) has two control points — one influencing the departure from the start, the other the approach to the end — which is why cubic curves can have an S-shape that quadratics cannot. The "smooth" variants (S and T) save you from repeating coordinates: they automatically reflect the previous control point so consecutive curves flow seamlessly, which is how long, wavy outlines are built without specifying every control point by hand.

A worked example

The pre-loaded sample is M 20 80 C 40 10, 65 10, 95 80 S 150 150, 180 80. Read it left to right: M 20 80 moves the pen to (20, 80). C 40 10, 65 10, 95 80 draws a cubic curve whose first control point is (40, 10), second is (65, 10), and end point is (95, 80) — both control points sit high above the baseline, so the curve arcs upward into a hill. Then S 150 150, 180 80 draws a smooth cubic: because it is an S, its first control point is automatically the reflection of the previous one across (95, 80), and you only supply the second control point (150, 150) and the end (180, 80). Those control points sit below the line, so this segment dips into a valley. The result is a smooth wave. The tool's command list spells all of this out, segment by segment, with the exact coordinates.

The bounding box and scale

After rendering, the tool reads the path's true bounding box via the browser's native getBBox() — the smallest rectangle (x, y, width, height) that contains the actual drawn geometry. This is genuinely useful: the numbers in a d string rarely tell you how big the shape ends up, especially once curves bulge past their control points. Knowing the real bounds lets you set a correct viewBox so the icon is not clipped or floating in empty space. The scale slider (0.25× to 4×) zooms the rendering so you can inspect a tiny detail or fit a large path into view, and it uses a non-scaling stroke so the outline stays a consistent visual weight at any zoom.

Use cases and tips

• Learning by reverse-engineering. Paste a path copied from an icon set and watch the command list explain it — the fastest way to learn the path syntax.
• Debugging a broken shape. If an SVG renders wrong, the parsed command list reveals a misplaced control point or a missing Z at a glance.
• Sizing for production. Use the bounding box to derive an accurate viewBox and remove wasted padding.
• Tip — keep coordinates small and clean. Paths built around a 0–100 or 0–24 grid are easier to read and edit than ones with long decimals.
• Tip — prefer relative commands for reusable shapes. Lowercase commands let you reposition a whole path by changing only the initial M.
• Pitfall — arcs are the hardest command. An A takes seven numbers including two flags (large-arc and sweep) that flip which of four possible ellipse segments is drawn; if an arc looks wrong, those flags are usually the cause.

Rendering, parsing, and the bounding-box calculation all happen in your browser. Nothing you paste is uploaded, and you can copy the result as a ready-to-use <path> element with one click.