SVG Crop Tool — Adjust viewBox to Crop SVG
Crop your SVG by adjusting the viewBox — remove excess whitespace or focus on a specific portion of the graphic.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How SVG Cropping Works
SVG doesn't have a traditional crop tool like raster editors. Instead, you adjust the viewBox attribute to change which portion of the SVG coordinate space is visible.
- viewBox='0 0 200 200': shows the full content from (0,0) to (200,200)
- viewBox='50 50 100 100': crops to the center quarter of the content
- viewBox='-10 -10 220 220': adds 10px padding around the content
- The SVG content doesn't change — only the visible window changes
Auto-Crop: Fit viewBox to Content
The most common crop operation: remove excess whitespace by fitting the viewBox to the actual content bounds.
- In Inkscape: File > Document Properties > Resize Page to Content (button)
- In Illustrator: select all content → Object > Artboards > Fit to Selected Art
- Programmatically: use element.getBBox() to get content bounds, then update viewBox
- SVG optimizer tip: SVGO's removeXMLNS and cleanupViewBox plugins can help
Cropping to a Specific Area
To show only a portion of an SVG (like zooming into a map region).
- Determine the desired area coordinates in SVG user units
- Update viewBox: <svg viewBox='x y width height'> where x,y is top-left of crop area
- The SVG element's width/height on screen stays the same — only the coordinate window changes
- This technique is used for SVG map zooming and detail views
Frequently Asked Questions
Can I crop SVG online without downloading software?
Yes. Open the SVG in a text editor (or browser DevTools), find the viewBox attribute, and adjust the four values. The crop takes effect immediately.
How do I remove whitespace from an SVG?
Use Inkscape: File > Document Properties > Resize Page to Content. Or edit the SVG XML: find the viewBox and update x,y,width,height to match your content's bounding box (use element.getBBox() in the browser to measure).
Does cropping make the SVG file smaller?
Cropping by adjusting viewBox doesn't remove paths outside the viewport — they're still in the SVG file but not visible. To truly remove off-screen content: use Inkscape's Clip > Set, then apply the clip to the visible area.
Can I add padding around SVG content?
Yes. Expand the viewBox to be larger than the content bounds. If content is at 0 0 100 100, set viewBox='-10 -10 120 120' to add 10px padding on all sides.
How do I crop an SVG on the command line?
Use Inkscape CLI: inkscape --export-area=x0:y0:x1:y1 --export-filename=cropped.svg input.svg. Coordinates are in document units (usually px).
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free