Crop SVG

About cropping an SVG

An SVG is not a picture with a border. It is a drawing plus a viewBox — four numbers that say which part of the coordinate space the file is showing.

Padding comes from those four numbers. An icon exported at 512 × 512 with the shape sitting in the middle has empty space on every side, and no amount of resizing gets rid of it: shrink the file and you shrink the padding along with the artwork. The logo still floats in the middle of its own box, still refuses to line up with the text beside it.

This tool changes the viewBox and nothing else. It works out where the drawing actually starts and stops, tightens the box to fit, and hands you back an SVG — the same paths, the same gradients, the same groups, in a box that fits them.

It looks at the picture, not at the code

The obvious way to find the edges of an SVG is to ask the browser for the bounding box of every shape. That way is wrong in two ordinary cases, and both of them are exactly why people come looking for this tool:

• A white background rectangle. It is a shape, so it counts, so the bounding box is the whole canvas and nothing gets trimmed.
• Blur and drop shadows. A filter paints well outside the shape that made it, so a geometric bounding box cuts the soft edge off.

So this draws the SVG first and then looks at the result, the same way your eye does. A white rectangle reads as empty. A drop shadow reads as content and is kept. What you see is what gets measured.

Transparent or white

• Transparent or white *(the usual choice)* — anything you would describe as "blank" goes: fully transparent pixels and white ones alike. This is what you want for an icon exported on a white artboard, or a logo with a white plate behind it.
• Transparent only — white is treated as part of the drawing. Use this when the white really is the design: a white wordmark, a white background that has to stay, or artwork meant to sit on a dark page.

Tolerance decides how close to blank still counts as blank. Exports are rarely pure: a background can be #fefefe, an edge can be very slightly transparent. Raise the tolerance if nothing was trimmed; lower it if a pale part of the drawing got cut.

The margin

Margin to leave puts a chosen amount of space back on all four sides, measured in the SVG's own units — the same numbers the viewBox uses.

Zero gives you the tightest possible box, which is what you want for an icon in a button or a logo in a grid, where the layout should decide the spacing. A small margin is worth adding when the artwork has a stroke that a tight crop would clip, or when the file is going somewhere that crops it again.

Width and height come along

If the SVG had width and height attributes, they are scaled by the same amount as the box, in whatever unit they were written in. A drawing that was 40 mm wide inside a 100 mm canvas comes out 40 mm wide.

That matters: it means the artwork does not change size when you crop it. Only the empty space around it goes away. An SVG with no width or height is left without them, so it keeps scaling to whatever it is put inside.

Nothing is uploaded

The file is read, drawn and rewritten inside your browser. It never reaches a server, which is the point when the file is an unreleased logo, a client's brand mark or artwork under NDA.

It also means there is no upload wait and no size limit, and the tool works offline once the page has loaded.

What people use it for

• An icon exported with a fixed artboard that will not line up in a button
• A logo with a white plate behind it that has to sit on a coloured header
• Artwork from Figma, Illustrator or Inkscape that came out with the whole canvas around it
• An SVG going into a sprite sheet or icon font, where every glyph needs a tight box
• A drawing for a cutting machine or laser, where the file's box is the material
• Making a set of icons line up, by cropping each one to its own content

Good to know

• The crop is measured from a rendering, so its precision is roughly one rendered pixel — the box is expanded by a hair to make sure nothing gets shaved
• Anything drawn outside the original viewBox was already invisible, and stays out
• Live text is measured with the fonts your browser has; convert text to paths first if the fit has to be exact
• An <image> or reference pointing at another file cannot be drawn here, so it is not counted
• Comments, <defs>, metadata and ids all survive — this is a re-crop, not a clean-up
• To crop a bitmap instead, use Crop Image, which also auto-trims padding
• To turn the result into a PNG afterwards, use SVG to PNG

How to use it

• Click Click to upload, or drop your SVG onto the box
• The crop is worked out straight away — the dashed outline on the left shows what is being kept
• Leave Transparent or white unless the white is part of the design
• Raise the tolerance if nothing was trimmed, lower it if something pale was cut
• Set a margin if you want space left on all four sides
• Press Download SVG, or Copy SVG code to paste it straight into a page

Related tools

• Crop Image — the same job for PNG and JPG
• SVG to PNG — turn the cropped SVG into a bitmap
• SVG to JPG — an SVG as a flat picture
• Image to SVG — trace a logo or icon into vector paths
• Favicon Generator — make a site icon from the result
• Image Resizer — resize a bitmap instead