SVG Crop / Trim Whitespace
Paste SVG markup and get it back with the viewBox trimmed to the actual content bounds — no excess whitespace. Runs entirely in your browser.
What is SVG whitespace trimming?
SVG files exported from Figma, Illustrator, or Inkscape often include a large canvas that dwarfs the actual artwork. The viewBox defines what portion of the infinite SVG coordinate space is visible — if it is set to the full canvas rather than just the content, the file renders with empty space around the artwork. Trimming shrinks the viewBox to the content's actual bounding box, removing the dead space without altering any shapes or coordinates.
When to use padding
Strokes and filters render outside a path's geometric bounds. A circle with a thick stroke will be clipped if the viewBox is cropped exactly to its center-line radius. Add padding equal to at least half the stroke width to keep the full stroke visible. The same applies to drop shadows, glows, and other filter effects that extend beyond the shape geometry.
Frequently Asked Questions
Does cropping change the shapes or coordinates?+
No. Only the viewBox, width, and height attributes are updated. All path data, transforms, and coordinates remain exactly as they were.
Why might the bounding box be wrong for text elements?+
getBBox() measures the geometric bounds of rendered text using the fonts available in your browser. If the SVG uses a custom font that isn't loaded, the browser falls back to a system font, which may have different metrics. The result will still be a valid crop, but may differ slightly from what a different font would produce.
Is my SVG sent to a server?+
No. The bounding box is measured by rendering the SVG in a hidden element in your browser using the built-in getBBox() API. Your SVG markup never leaves your device.
What if my SVG has no viewBox?+
Without a viewBox, the browser uses the SVG width and height attributes as the coordinate space before measuring the bounding box. If neither is present, the browser defaults to 300×150 pixels. Adding a viewBox or explicit dimensions to your SVG before cropping gives the most predictable result.
Related Tools
How to use
- Paste your SVG markup — the viewBox is trimmed to the actual content bounds instantly.
- Set Padding to add breathing room around the content.
- The width and height attributes are updated to match the new viewBox.
- Copy the output and replace your original SVG.