How to Crop an SVG

Quick answer

To crop an SVG without losing data, change the viewBox to the visible region (Geometry panel, Document section). To crop visually with a mask, draw a rectangle over the keep-region, select it together with the content, and use Object > Clip (Ctrl+Alt+C). To physically remove off-canvas geometry, marquee-select what is outside the viewBox and delete it.

Steps at a glance

Pick the crop method

viewBox (non-destructive), clipPath (masked), or trim (destructive).

Crop with viewBox

Set new ViewBox X/Y/W/H values in the Geometry panel Document section.

Crop with clipPath

Draw a shape on top, select it with the content, choose Object > Clip (Ctrl+Alt+C).

Trim destructively

Marquee-select outside the viewBox and delete; use boolean Intersect for straddling shapes.

Export

Save the SVG with the chosen crop applied.

Step 1: Decide between viewBox crop and clip path

A viewBox crop simply changes the visible window - the geometry outside is still there, just not shown. A clip path applies a clipPath element so the rendered output is masked; the clipped content is preserved in the file. A destructive trim physically deletes shapes outside the crop region.

Pick viewBox for a non-destructive reframe. Pick clip path when the SVG will be embedded inside a larger document and content outside the crop should still travel with it but stay hidden. Pick destructive trim when file size matters and the off-canvas content is no longer needed.

Step 2: Crop with the viewBox

Deselect everything and open the Geometry panel. In the Document section, type the new ViewBox X, ViewBox Y, ViewBox W, and ViewBox H matching the region you want visible. To find those numbers, draw a temporary rectangle over the desired crop, read its X/Y/Width/Height from the Geometry panel, copy them into the ViewBox fields, and delete the rectangle. The result is exact and reversible.

Step 3: Crop with a clip path

Draw a rectangle (or any shape) over the area you want to keep, positioned on top of the content. Select that shape and the content underneath it. Choose Object > Clip (Ctrl+Alt+C) - the topmost shape becomes the clip and SVGSketch wraps the content in a <clipPath> reference so anything outside it is hidden.

Use Object > Release Clip (Ctrl+Alt+Shift+C) to undo the clip without deleting the source geometry.

Step 4: Destructive trim

If you want a smaller file, marquee-select the shapes outside the visible area with the Transform tool (drag a rubber-band around them, Shift+drag to add more regions), then press Delete. For shapes that straddle the boundary, apply Shape > Boolean Operations > Intersect (Ctrl+Alt+I) against a viewBox-sized rectangle to trim them exactly.

Step 5: Export the cropped SVG

Save the SVG. The crop is now part of the file: viewBox-cropped output is just a smaller viewBox; clip-path output includes the clipPath element; destructively trimmed output simply has fewer shapes.

FAQ

Is cropping by viewBox lossless?

Yes. The geometry outside the viewBox is still in the file; only what renders changes. Reset the viewBox and the original framing is back.

Why is my SVG still showing content after I cropped?

You probably cropped the viewBox but the SVG element in HTML has overflow: visible. Add overflow: hidden to the parent container or use a clipPath instead of just a viewBox change.

How do I crop to a non-rectangular shape?

Use Object > Clip (Ctrl+Alt+C) with any shape on top - circle, polygon, custom path. The clipPath supports any vector geometry.

Will the cropped SVG be smaller?

Only if you destructively trim. ViewBox and clipPath crops keep the original geometry in the file.

Can I uncrop?

Yes for viewBox (reset values) and clipPath (Object > Release Clip). Destructive trim is undoable until you close the document.