Quick guide
How to fit an SVG viewBox to its content
- Paste your SVG markup or the path's
dattribute into the editor. - Read the geometry bounds and suggested viewBox. Add padding if a stroke needs room.
- Copy the viewBox alone, or copy/download the fitted static SVG.
What do the four viewBox numbers mean?
The SVG viewBox is min-x min-y width height. The first two values locate the top-left corner in SVG coordinates. The last two define the visible area. For a rectangle from (10, 20) to (90, 60), a tight fit is 10 20 80 40. Padding of 5 gives 5 15 90 50.
How SVG bounding boxes are calculated
The inspector uses your browser's SVG geometry engine to measure supported shapes, including Bézier curves, elliptical arcs, and grouped transforms. The box describes geometry, not painted stroke edges. Horizontal or vertical lines receive a minimum 1-unit viewport dimension so the result stays usable.
SVG path commands, made readable
Uppercase commands use absolute coordinates. Lowercase commands use offsets from the previous point. This tool converts them to absolute coordinates and expands H/V into lines and S/T into full curves. M moves, L draws a line, C/Q draw Bézier curves, A draws an arc, and Z closes a subpath.
Supported SVGs and privacy
Paths, rectangles, circles, ellipses, lines, polygons, polylines, and static groups are supported. Convert CSS styles to presentation attributes and text or references to outlines first. Nested SVG viewports, images, gradients, masks, and filters are not supported. Scripts and external resources never run in the preview. Your input stays in this page's memory.
Frequently asked questions
Why is my SVG clipped or surrounded by whitespace?
The viewBox may not match the coordinates occupied by the shapes. Compare the current and suggested viewBox. Copy the suggested value to fit the geometry, then add enough padding for strokes.
Does this tool include stroke width in the bounding box?
No. The reported box is geometry-only. For a simple centered stroke, half its width is a useful starting point for padding, but sharp joins can extend farther. Check the final rendering.
Can I paste just an SVG path?
Yes. Paste raw path data or a complete <path> element. The inspector wraps it in an SVG and provides the fitted markup.
Will the output preserve every feature of my SVG?
No. This is a static geometry inspector, not a full editor or lossless optimizer. Unsupported features are rejected with guidance; active content and nonessential attributes are removed with a notice. Keep your original file.
Technical references
See the MDN viewBox reference, SVG getBBox documentation, and W3C SVG path specification for the underlying behavior.