How to Crop an SVG File
Remove unwanted white space, trim to specific content, or isolate part of an SVG  using viewBox adjustment, Inkscape, or simple code editing.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: Adjust the viewBox (Recommended)
Changing the SVG viewBox crops the visible area without deleting any path data.
- viewBox='x y width height'  set to the region you want to show
- To remove white space: find the bounding box of your content and set viewBox to match
- In Inkscape: File > Document Properties > Resize page to content
- SVG code: change viewBox='0 0 100 100' to viewBox='10 10 80 80' to crop 10px from each edge
- This is non-destructive  all SVG path data is preserved, just hidden outside the viewBox
Method 2: Inkscape Crop Tools
Inkscape provides visual tools for cropping SVG content.
- Resize to content: File > Document Properties > Resize page to drawing or selection
- Manual: select all (Ctrl+A), then File > Document Properties > Resize page to selection
- ClipPath crop: draw a rectangle, select it and your content, Object > Clip > Set
- Export PNG at specific area: File > Export PNG > set X, Y, W, H for the crop area
- Delete paths outside your intended area if cleanup is needed
Method 3: Code Editing
For programmatic or code-based SVG cropping.
- Calculate bounding box in JS: el.getBBox() returns {x, y, width, height}
- Set viewBox dynamically: svg.setAttribute('viewBox', `${x} ${y} ${w} ${h}`)
- Remove paths outside region: check if path bounding box intersects with target area
- SVG <clipPath>: define a rectangular clip region, apply to a group
- Inkscape CLI: inkscape --export-area=x:y:x2:y2 --export-png=out.png in.svg
Frequently Asked Questions
Does cropping an SVG delete path data?
viewBox cropping hides paths outside the view but doesn't delete them  the SVG file size stays the same. To truly delete out-of-view content, select it in Inkscape and press Delete.
How do I crop an SVG to a circle?
Add a <clipPath> element containing a <circle>. Apply it to your content group with clip-path='url(#myCircle)'. The content outside the circle becomes invisible.
How do I remove all whitespace from an SVG?
In Inkscape: Select All (Ctrl+A) → File > Document Properties > Resize page to drawing. This sets the canvas exactly to the bounding box of all visible content.
Why is my SVG cropped when I embed it on a web page?
The SVG width/height attributes may be forcing it into a fixed box that clips the content. Add viewBox matching the content dimensions and remove or change the width/height attributes to scale correctly.
Can I crop only part of an SVG for reuse?
Yes. Copy the paths you want, create a new SVG document with a viewBox sized to those paths, and paste them in. The selected area becomes a standalone SVG.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG