SVG guide
How to Remove Whitespace from an SVG
Extra space around SVG artwork usually comes from a viewBox that is larger than the visible drawing. Cropping changes that coordinate window; it does not need to delete shapes or turn the vector into a bitmap.
Confirm that the margin is actually transparent
A checkerboard preview makes transparency easier to see. A white rectangle behind the artwork is a real SVG element and should remain inside the crop. If you want that rectangle removed, use a color-removal workflow before cropping.
Tighten the coordinate window
The viewBox has four values: minimum x, minimum y, width, and height. If a drawing occupies x=30 through 170 and y=40 through 160, a close viewBox is 30 40 140 120.
<!-- 200 × 200 canvas with empty margins -->
<svg viewBox="0 0 200 200">
<rect x="30" y="40" width="140" height="120" fill="#2563eb"/>
</svg>
<!-- Same vector, tighter canvas -->
<svg viewBox="30 40 140 120" width="140" height="120">
<rect x="30" y="40" width="140" height="120" fill="#2563eb"/>
</svg>Allow for strokes and effects
The geometric path can be smaller than what the browser paints. A thick stroke extends around its centerline, and a blur or shadow can extend farther. Base the crop on rendered bounds or add padding so those pixels are not clipped.
Check the destination after cropping
CSS width and height can scale the cropped SVG without changing its internal vector quality. If alignment still looks wrong, inspect the layout box, baseline behavior, transforms, and any remaining transparent or white elements.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to remove whitespace from an SVG.
Related SVG guides
Diagnose and correct an oversized SVG viewBox using visible bounds, padding, negative coordinates, and intrinsic dimensions.
Find the real cause of extra SVG space, from oversized viewBoxes and invisible elements to strokes, filters, transforms, and CSS layout.