SVG Path Analyzer

SVG path data is the value of the 'd' attribute in an SVG <path> element. It's a mini-language of commands and coordinates that defines any shape — lines, curves, arcs, and complex polygons. For example, 'M 10 10 L 100 100 Z' moves to (10,10), draws a line to (100,100), and closes the path.

M/m = Move To (start a new subpath), L/l = Line To (straight line), H/h = Horizontal Line, V/v = Vertical Line, C/c = Cubic Bézier curve (two control points), S/s = Smooth Cubic Bézier, Q/q = Quadratic Bézier (one control point), T/t = Smooth Quadratic Bézier, A/a = Elliptical Arc, Z/z = Close Path. Uppercase = absolute coordinates, lowercase = relative coordinates.

Uppercase commands (M, L, C…) use absolute coordinates — the position is measured from the SVG viewport origin (0,0). Lowercase commands (m, l, c…) use relative coordinates — the position is measured from the current pen position. For example, 'L 100 100' moves to (100,100), while 'l 100 100' moves 100 units right and 100 units down from wherever the pen currently is.

A cubic Bézier (C command) takes 6 arguments: two control points and an end point — cp1x cp1y cp2x cp2y x y. The control points act like magnets pulling the curve. cp1 controls the curve near the start point, cp2 controls the curve near the end point. The more the control points deviate from the line between start and end, the more pronounced the curve.

This tool uses the browser's native SVGPathElement.getBBox() API to calculate the exact bounding box — the smallest axis-aligned rectangle that contains the entire path. This accounts for curves that extend beyond their control points. The result gives you minX, minY, width, and height.

Use the command breakdown to understand existing SVG paths from icon libraries. The bounding box helps you calculate the correct viewBox for scaling. You can identify complex curve sequences (C/S combinations) that form smooth shapes, and simplified paths using only L/H/V for geometric icons. Understanding the command breakdown is also useful for animating paths with CSS or GSAP.