Crop SVG Online Free — Tighter viewBox or PNG Export

Step by Step

How to Crop SVG

Upload Your SVG

Drop a .svg file onto the page or click to browse. We render it to a canvas using the browser's native SVG engine.

Choose the Crop Area

Drag the crop frame over the rendered SVG to select the visible region you want to keep.

Preview the Result

The preview shows the cropped SVG at its target output resolution so you can confirm sharpness before exporting.

Download as PNG or SVG

Click Download. PNG is the default (raster output of the cropped area); choose SVG to download a copy with a tightened viewBox attribute instead.

Core Features

What You Get

Renders SVG with the browser's native engine — gradients, strokes, and filters render correctly

Two output modes: rasterize to PNG/WebP, or download SVG with an updated viewBox

Adjustable export resolution from 1× up to 4× for crisp PNGs

Keeps transparency outside the crop area when exporting as PNG

Real-time preview at the chosen resolution

100% browser-based — your SVG is never uploaded

Use Cases

When to Use This

→

Crop an SVG icon set to a tighter viewBox so each glyph fits its bounding box pixel-perfect

→

Rasterize an SVG illustration to a cropped PNG for use in slide decks or social posts

→

Extract a specific region of an SVG infographic and ship it as a standalone PNG

→

Trim padding around an exported SVG logo before embedding it in HTML or a README

FAQ

Frequently Asked Questions

Will the output stay as vector SVG?

It depends on the mode. The default output is a rasterized PNG of the cropped area — easier to drop into most apps. Switch to SVG mode and we instead update the root viewBox attribute and width/height so the file stays vector and the cropped area becomes the new canvas.

How is SVG cropping different from cropping a JPG or PNG?

Raster cropping simply discards pixels. SVG cropping has to either (a) restrict the visible area by changing the viewBox while every original path stays in the file, or (b) rasterize the visible region to PNG. We support both. Paths outside the new viewBox aren't deleted unless you choose PNG output.

Can I crop SVG icons from icon sets like Heroicons or Lucide?

Yes. Drop the .svg in, drag the crop frame around the glyph, and either tighten the viewBox (stays vector, perfect for icon fonts) or export a 256×256 PNG for use in places that don't accept SVG.

Will gradients and transparency be preserved?

Yes for PNG export — gradients, opacity, and feathered strokes render exactly as Chrome would render them. For SVG viewBox mode, gradient stops and alpha channels are completely untouched because the file's <defs> block isn't rewritten.

What's the best PNG size to export from a cropped SVG?

For web use, 2× the displayed size is the sweet spot (e.g., 512 px wide for a 256 px slot) so the image stays sharp on Retina screens. For print, export at 300 DPI relative to the final size — a 4-inch wide print needs 1200 px wide PNG.

Crop SVG Image Online