SVG Crop Tool — Trim the Canvas and ViewBox
Crop an SVG by adjusting the viewBox — remove whitespace, zoom into a region, or resize the SVG canvas without touching the path data.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Cropping SVG with viewBox
Cropping an SVG is as simple as changing the four viewBox values.
- viewBox='x y width height' — set x/y to offset, width/height to crop size
- Zoom in: viewBox='25 25 50 50' on a 100×100 SVG — crops to the center quarter
- Trim whitespace: reduce width/height to match content bounds
- Offset: increase x and y to crop from the top-left
- No path data changes needed — only the viewBox determines what's visible
Auto-Crop with Inkscape
Let Inkscape calculate the tight bounds for you.
- File > Document Properties > Resize Page to Content > Resize Page to Drawing or Selection
- This sets the SVG viewBox/document size to exactly the content bounds
- Useful for removing editor-added whitespace around icons and logos
- Also: Edit > Resize Page to Selection for cropping to a specific selected area
- Save as Plain SVG after adjusting to strip Inkscape metadata
Frequently Asked Questions
How do I remove whitespace from an SVG?
In Inkscape: File > Document Properties > Resize Page to Content > Resize Page to Drawing. This crops the viewBox to the content bounds, eliminating whitespace.
Does cropping an SVG change the path data?
No — changing viewBox only changes what's visible. All paths remain in the SVG file. You can restore the original view by reverting the viewBox values.
How do I crop an SVG to a specific region?
Change the viewBox to: viewBox='cropX cropY cropWidth cropHeight'. Example: viewBox='10 20 80 60' shows only the region from (10,20) to (90,80) in the original coordinate space.
What is the difference between viewBox and preserveAspectRatio for cropping?
viewBox defines what's visible. preserveAspectRatio controls how the viewBox content fits the display area when aspect ratios differ. For simple cropping, only change the viewBox.
Can I crop an SVG to a circle shape?
Use clipPath with a circle element: <clipPath id='c'><circle cx='50' cy='50' r='50'/></clipPath> applied to the SVG content. This is circular masking, not crop — the SVG canvas remains rectangular.
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