Cropping an SVG's Visible Area
SVG cropping is achieved through the viewBox attribute or a clipPath element rather than destructively trimming path data.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Cropping via the viewBox Attribute
Adjusting an SVG's viewBox to a smaller region than the full artwork's bounding box effectively crops the visible display area, showing only the content within that specified rectangle while leaving the original path data completely untouched, making this the simplest non-destructive cropping technique.
- Adjusting viewBox to a smaller region crops the visible display area
- Only content within the specified rectangle displays, hiding the rest
- The original path data remains completely untouched by this technique
Cropping via a clipPath for Non-Rectangular Shapes
For a non-rectangular crop, such as a circular or custom-shaped viewport into a larger piece of artwork, applying a clipPath containing the desired crop shape to a group wrapping the content clips the visible output to that shape's exact boundary, again without modifying the underlying artwork.
- A clipPath enables non-rectangular crop shapes like circles or custom outlines
- Applying it to a wrapping group clips output to the shape's exact boundary
- The underlying artwork's paths remain unmodified by the clipping process
Frequently Asked Questions
Does cropping with viewBox permanently delete the hidden artwork?
No, the hidden content still exists in the SVG's markup, it simply isn't rendered within the visible viewBox region, making this a fully non-destructive cropping method.
How do I crop an SVG to a circular shape instead of a rectangle?
Define a circle inside a clipPath element and apply that clipPath to a group wrapping the artwork, which restricts visible output to that circular boundary.
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