SVG Crop

Crop the SVG canvas by adjusting the viewBox. Lossless vector output — no rasterisation, no path rewriting.

Browser-based SVG editing

Crop the SVG canvas by adjusting the viewBox.

Paste SVG code, upload a file or try the built-in sample. Set the crop area using X, Y, width and height coordinates, then copy or download the updated SVG markup — no upload, no rasterisation, pure vector output.

Local only SVG output viewBox crop Lossless
Drop an SVG file here or paste SVG markup into the input editor below.
New viewBox
Crop width
Crop height
Output size
Status
Preview

Original vs cropped SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Cropped SVG Waiting

Crop SVG to preview the result.

Processed locally viewBox: — Scripts: — Events: — External assets: — Output: —
Input

SVG markup

Use a complete SVG document or inline SVG element. Crop coordinates are pre-filled from the source viewBox when one is detected.

Output

Cropped SVG

The cropped SVG markup appears here after cropping. Copy or download the result using the buttons above.

How It Works

SVG Crop adjusts the root SVG viewBox attribute to define a new visible canvas area. The viewBox is a four-number value — X, Y, width and height — that tells the browser which portion of the SVG coordinate space to display. By changing these four numbers, SVGTrim changes what part of the artwork is shown without touching a single path, shape, or gradient inside the file. The output is the same editable SVG document with an updated viewBox. Width and height attributes are also updated to match the crop dimensions so the output SVG renders at the correct intrinsic size. If the source SVG has no viewBox, SVGTrim generates one from the width and height attributes before applying the crop.

Use Cases

  • Removing empty padding or whitespace around an SVG illustration to reduce its canvas to the visible content
  • Extracting a specific region of a large SVG composition to use as a standalone graphic
  • Trimming dead space from exported SVG files to prepare them for use as icons or logos
  • Adjusting the visible crop of an SVG artboard without modifying any of the paths, shapes, or layers inside
  • Creating square, portrait, or landscape variants of an existing SVG illustration by applying a centred crop

FAQ

Does SVG Crop upload my file?

No. SVGTrim crops SVG artwork locally in your browser by adjusting the SVG viewBox. Your SVG file is never uploaded to any server and the output remains entirely on your device.

What is the difference between raster crop and SVG crop?

Raster crop (used for JPEG, PNG and similar formats) discards pixels outside the crop boundary. SVG crop adjusts the viewBox — a viewport attribute — so the browser only renders the selected region. The path data and shapes outside the crop area remain in the file but are not visible. There is no quality loss because no pixels are involved.

Will the cropped SVG look the same visually inside the crop area?

Yes. SVG Crop only adjusts the viewBox. All shapes, gradients, filters and animations inside the crop rectangle are rendered exactly as they were in the original. The content is not resampled or modified.

What happens if my SVG has no viewBox?

SVGTrim reads the width and height attributes and generates a viewBox of 0 0 width height before applying the crop. The signal strip shows 'viewBox: generated' to indicate this happened. If the SVG has neither a viewBox nor width and height attributes a default 512×512 coordinate space is assumed.

Does SVG Crop modify path coordinates or shapes?

No. Only the root SVG element attributes — viewBox, width and height — are modified. All internal paths, shapes, gradients, filters and text are left exactly as they were in the original markup.

Can I crop outside the original viewBox boundaries?

Partially outside is allowed — the SVG will simply show blank space in the area outside the original artwork. Crops that are completely outside the source viewBox are rejected with an error to prevent accidental blank output.

What do the preset options do?

Presets fill the X, Y, width and height fields automatically based on the source viewBox. Center Square calculates the largest centred square that fits inside the original canvas. Center Portrait targets a 3:4 ratio and Center Landscape targets a 4:3 ratio. All presets centre the crop on the original artwork. Click Crop SVG after selecting a preset to apply it.