Crop extra whitespace
Fit the SVG canvas around an icon, logo, or illustration when the current viewBox leaves too much empty space.
SVG viewBox editor
SVG viewBox editor for cropping and resizing
Load an SVG, fit its viewBox to the visible artwork, or enter new canvas coordinates by hand. The file stays in your browser.
Automatic fitting uses the artwork's geometric bounds. Add padding when strokes, filters, or shadows extend beyond the visible shapes.
Runs locally
The core file work happens in your browser where possible.
No upload
SVG and PDF files are not sent to a server for the browser tools.
Editable output
Preview, copy, clean, or download the result before you use it.
Clear limits
Complex print files, scans, and unsupported SVG features may need another workflow.
Edit SVG viewBox
Analyze the SVG first, then fit the canvas to the artwork or adjust min-x, min-y, width, and height yourself.
Original canvas
viewBox: -Edited canvas
viewBox: -Set the canvas by hand
Edit the four viewBox numbers directly when you already know the origin and canvas size your app or export needs.
Keep a little padding
Automatic bounds can miss the outer edge of thick strokes, blur, or shadows. Add padding and check the edited preview before downloading.
How to crop an SVG with its viewBox
An SVG viewBox has four numbers: min-x, min-y, width, and height. Together they define the part of the SVG canvas that appears in the viewport. Tightening those values can remove unwanted space without changing the path data.
- Load the SVG and analyze its current viewBox.
- Choose Fit to artwork, then adjust the padding if a stroke or shadow looks clipped.
- Compare both previews and download the edited SVG once the framing looks right.
Use the SVG viewer when you only need to inspect dimensions. After cropping, use the SVG to PNG converter for a tighter raster export or the SVG minifier to reduce the markup size.
What automatic fitting can miss
The browser reports the geometric bounds of the SVG artwork. Thick strokes, filters, drop shadows, linked images, and some text or font cases can extend past that box. The editor does not guess how much visual space those effects need, so the padding field and side-by-side preview matter.
Common questions
Can I crop SVG whitespace without uploading the file?
Yes. The SVG viewBox editor runs in the browser. It reads the artwork bounds and edits the SVG locally.
Does changing the viewBox change SVG paths?
No. The editor changes the root SVG viewBox. It does not rewrite the path coordinates or move the artwork.
Why did automatic fitting clip a stroke or shadow?
Geometry bounds do not always include the full painted edge of strokes, filters, or shadows. Increase the fit padding and check the edited preview.
What do the four SVG viewBox values mean?
They are min-x, min-y, width, and height. The first two set the canvas origin, while width and height set the visible canvas size.
Should I remove width and height from an SVG?
Remove fixed dimensions when the SVG should size through CSS or container styles. Keep them when the file needs a useful default display size.