SVG guide
Why Does My SVG Have Extra Space?
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.
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 SVG 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.