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