SVG guide
Why Does My SVG Have Extra Space?
By Laramie Williamson ·
The gap may be inside the SVG's coordinate system, painted by an element you cannot see on white, or added by the surrounding HTML layout. Checking those layers in order avoids cropping the wrong thing.
Cause 1: the artboard was exported too large
Design applications often export the document artboard rather than the selected artwork bounds. The path may occupy only a small portion of the resulting viewBox, producing transparent margins on every side.
The most common cause: an artboard-sized viewBox
This is what cause 1 looks like in practice. The chart occupies a small corner of a 600 × 600 canvas, so it renders small and off-centre with margins that survive every CSS change you try. Cropping tightens the viewBox to roughly 142 × 140 — the artwork is identical either side, only the coordinate window moved. If your file looks like the left-hand side when you open it on its own, you have found your gap and can stop editing the CSS.
viewBox 0 0 600 600 — mostly empty
viewBox 213.818 235.909 142.364 140.182
Cause 2: an element still occupies the area
A white background, nearly transparent shape, off-center group, mask, or transformed object can influence the rendered result. White is not transparent; check the file on a checkerboard or colored backdrop.
- A thick stroke extends beyond the path geometry.
- Blur and shadow filters can create faint pixels outside the main shape.
- Artwork outside the current viewport may already be clipped and cannot be measured from the visible render.
Cause 3: the space is HTML, not SVG
An img element is inline by default and aligns to a text baseline, which can leave a small gap below it. Set display: block when appropriate, or adjust vertical alignment. Also inspect padding, margins, line-height, grid gaps, and flex alignment on ancestors.
img.svg-artwork {
display: block;
}A reliable troubleshooting order
Preview the SVG alone, inspect its viewBox, test it on a contrasting background, and only then auto-crop. After cropping, place it back in the original layout. If the standalone file is tight but the page still has a gap, the fix belongs in CSS.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to crop the SVG to its visible content.
Related guides
Remove empty SVG margins by tightening the viewBox around rendered content while preserving real white shapes and vector elements.
Diagnose and correct an oversized SVG viewBox using visible bounds, padding, negative coordinates, and intrinsic dimensions.