svg2img
EN中日

SVG Crop Tool (Crop SVG Online)

Instantly crop SVG files and trim whitespace from around SVG icons. Recalculate tight ViewBox coordinates with custom SVG crop padding 100% in your browser.

No upload required & Private SVG CropNon-destructive ViewBox SVG Crop adjustmentCustomizable safety paddingOne-click SVG code copy

Crop SVG & Remove Blank Space

Drag and drop an SVG file to crop SVG margins, click anywhere in this box to upload, or press Cmd+V to paste SVG code directly.

Paste SVG code

Paste valid SVG markup, review it, then load the preview.

Why Use an Online SVG Crop Tool?

Vector icons and illustrations exported from design software often contain large empty viewports. Use our free SVG crop tool to optimize your vector assets:

Fix Web & App Layout Alignment with SVG Crop

SVGs exported from Figma or Illustrator frequently include extra padding, causing visual offsets in Flexbox or Grid layouts. When you crop SVG files, you ensure pixel-perfect alignment.

Optimize ViewBox & CSS Scaling via SVG Crop

Clean up useless canvas margins so your SVG scales accurately when setting CSS width and height, without creating invisible bounding box gaps.

Standardize Icon Libraries with Crop SVG

Normalize design assets across team projects when you crop SVG icons to zero-padding or uniform safety margins (e.g. 2px padding).

Advanced SVG Crop Features

Powered by client-side SVG DOM algorithms to parse bounding boxes and crop SVG files accurately.

Smart Bounding Box SVG Crop Calculation

Uses native browser DOM APIs (getBBox) to measure exact geometry including stroke widths and text bounds when you crop SVG content.

Customizable SVG Crop Padding

Adjust padding from 0px to 50px using a slider to prevent heavy strokes or drop shadows from being clipped during the SVG crop process.

100% Client-Side & Private SVG Crop

All SVG crop processing happens in your browser. Your SVG graphics are never sent to any external server.

Side-by-Side Live SVG Crop Preview

Compare original vs cropped SVGs over a transparent checkerboard background in real time.

How to Crop SVG Files Online in 3 Steps

1

1. Import Your SVG File

Drag & drop your SVG file, click to upload, or paste raw SVG XML code to begin the SVG crop process.

2

2. Adjust Safety Padding for SVG Crop

Use the padding slider (e.g. 0px or 4px) to inspect the updated ViewBox bounding box.

3

3. Copy Code or Export Cropped SVG

Click 'Copy SVG Code' for instant code reuse, or download the cropped .svg / .png file.

SVG Crop & Crop SVG FAQs

No. The SVG crop tool uses a non-destructive method that only updates the viewBox attribute on the root <svg> element. All internal <path>, <g>, and styling nodes remain 100% intact.

No. The bounding box calculation for crop SVG includes stroke geometries. If you want extra breathing room, set 2px to 4px padding using the slider.

Yes. The output from our SVG crop tool strictly adheres to W3C SVG standards and can be directly imported into Figma, Illustrator, or web code.

Latest Posts

View All →