Compute an SVG path bounding box from path data

It follows straight segments, Bézier curves, elliptical arcs, relative commands, smooth control points, and closed subpaths. Because curved segments can extend beyond their endpoints and control points do not necessarily lie on the curve, the calculation evaluates the geometric extrema rather than merely collecting the numbers written in the source.

Calculate bounds from path data alone

Paste the value of an SVG path element’s <code>d</code> attribute into the path field. The calculator accepts the standard move, line, horizontal, vertical, cubic Bézier, smooth cubic, quadratic Bézier, smooth quadratic, elliptical arc, and close-path commands, in both uppercase absolute and lowercase relative forms. It returns <code>min_x</code>, <code>min_y</code>, <code>max_x</code>, and <code>max_y</code>, followed by width and height for convenience. These values describe an axis-aligned rectangle in the path’s own coordinate system. They do not apply transforms from parent groups or the path element, and they do not expand the result for stroke width, line caps, joins, markers, filters, or clipping. That distinction makes the output suitable for geometry work: it measures the path centerline exactly as encoded. An empty path is rejected instead of producing a misleading zero-sized box, while a path containing one move point legitimately produces a box whose width and height are both zero.

Why curves require analytic extrema

A reliable SVG bounding box cannot be found by looking only at segment endpoints. A cubic or quadratic Bézier may reach its smallest or largest coordinate between its start and end, and a control point can sit outside the curve without ever being touched. This calculator solves the derivative of each Bézier coordinate and evaluates every root that lies inside the segment. Elliptical arcs need different treatment: SVG arc radii may be automatically scaled, the ellipse may be rotated, and the large-arc and sweep flags choose one of several possible routes. The implementation converts each arc to its center representation, derives the angles where rotated x or y coordinates are extreme, and includes only candidates that fall on the selected sweep. Smooth commands reflect the appropriate previous control point, relative coordinates use the current point, and closing a subpath includes the line back to its start. This approach provides geometric bounds without sampling, so a narrow peak cannot fall between arbitrary sample positions.

Use the result in SVG tooling and layouts

The returned rectangle is useful when building a viewBox, centering imported artwork, normalizing icons, comparing path extents, positioning annotations, or checking whether generated geometry stays inside an expected canvas. To construct a matching viewBox, use <code>min_x min_y width height</code> in that order. If the artwork has a visible stroke, add the padding required by your stroke and join rules after computing the geometric box; transformed artwork should likewise be transformed before or after this calculation with the appropriate matrix-aware procedure. The parser accepts compact SVG number syntax, including comma or whitespace separators, adjacent signed values, decimals, and scientific notation. It rejects unknown commands, incomplete coordinate groups, malformed text, invalid arc flags, and negative arc radii so that automation fails clearly rather than silently returning partial bounds. Results are deterministic and require no network request or external renderer. The same pure calculation supports the browser tool and API, making it practical for interactive inspection and repeatable build pipelines alike.