SVG ViewBox Auto-Cropper
Remove invisible whitespace and empty artboards from your vector graphics. Our SVG auto-cropper instantly calculates the exact bounding box and recalculates the viewBox attribute to perfectly trim your SVG code.
How to remove SVG whitespace
- Paste your SVG code: Open your `.svg` file in a text editor, copy the contents, and paste it into the Original SVG input box.
- Add optional padding: If you want a small margin around your icon, enter a padding value (e.g., 2px).
- Auto-Crop: Click the "Auto-Crop ViewBox" button. The tool will calculate the exact
mathematical bounds of your vectors and rewrite the
viewBox. - Copy and use: Copy the newly generated SVG code. The red dashed line in the preview shows the new tightly cropped bounds.
Why do SVGs have extra whitespace?
When designers export icons from tools like Figma or Adobe Illustrator, the software often exports the
entire "artboard" or "canvas" rather than just the vector paths themselves. This results in an SVG with
a massive viewBox (e.g., 0 0 512 512) while the actual icon only takes up a
100x100 area in the center.
For frontend developers, this extra padding makes CSS alignment incredibly frustrating. Instead of
manually guessing the correct coordinates, this tool renders the SVG invisibly in your browser, uses the
native getBBox() API to calculate the exact X, Y, Width, and Height of the drawn paths, and
perfectly recalculates the viewBox attribute.
Frequently Asked Questions
How to remove whitespace from SVG icons online?
To remove whitespace from SVG icons online, paste your SVG code into our tool. It automatically measures the exact boundaries of your graphics and recalculates the viewBox to eliminate all transparent padding.
How do I fix SVG viewBox alignment in Figma exports?
Figma often exports SVGs with the full artboard dimensions rather than just the icon boundaries. You can fix SVG viewBox alignment in Figma exports by running the code through this cropper, which tightens the viewBox to the actual vector paths.
Can I crop SVG and trim blank space without losing quality?
Yes! You can crop SVG and trim blank space without losing quality because SVGs are vector-based. Our tool only alters the viewport (the viewBox coordinates) and never degrades the actual mathematical paths.
How to reduce SVG canvas size without cropping paths?
To reduce SVG canvas size without cropping paths, you must use a bounding box calculator (like getBBox). This tool does exactly that—it finds the minimum safe dimensions to shrink the canvas while keeping 100% of your graphics intact.
How to fix SVG rendering issues due to incorrect viewBox?
If your SVG is rendering too small or misaligned in CSS, it is likely due to an incorrect viewBox with excess padding. Our auto-cropper fixes these rendering issues by resetting the viewBox to tightly hug the visible vectors.
Is there a free online tool to change SVG viewBox coordinates?
Yes, our SVG ViewBox Auto-Cropper is a 100% free online tool to change SVG viewBox coordinates. It recalculates the optimal X, Y, Width, and Height values automatically in your browser.
How to batch crop SVG icons for web performance?
While this specific tool is designed for single-file processing, you can rapidly crop multiple SVG icons by pasting them in sequence. Cropping your SVGs ensures smaller file sizes and better web performance (LCP).
Is this an automatic SVG viewBox tight-crop generator?
Yes, this tool acts as an automatic SVG viewBox tight-crop generator. It leverages native browser APIs to render the shape, find its absolute limits, and generate a new, tightly-cropped SVG code snippet.