SVG guide

How to Crop an SVG Without Losing Vector Quality

SVG quality comes from retaining vector elements and their coordinate system. A crop can stay fully vector when it changes the visible window around those elements rather than converting the artwork into pixels.

A viewBox crop preserves vector elements

The paths do not need new point data. The viewBox simply tells the renderer which coordinate rectangle to map into the displayed width and height. Scaling afterward still uses the original vector geometry.

Coordinate-window crop
<!-- Geometry is unchanged; only the root window is tighter -->
<svg viewBox="18 12 164 96" width="164" height="96">
  <path d="…" fill="#7c3aed"/>
</svg>

Raster measurement is not raster output

A cropping tool can render a temporary canvas to locate nontransparent pixels, then apply the measured bounds back to the SVG markup. The downloaded SVG remains made from its original elements as long as the tool does not replace them with a bitmap.

Protect strokes, filters, and antialiasing

Faint pixels near a blur or shadow can fall below a transparency threshold, and scan resolution can round subpixel edges. Use a low threshold and add a little padding when preserving soft effects matters more than the tightest possible crop.

Know when quality can still be limited

Embedded PNG or JPEG content keeps its original pixel resolution. Web fonts or external images may render differently when unavailable. A later PNG export is also raster and should be created at the final required dimensions, even though the cropped SVG remains scalable.

Apply this to your file

When you are ready to work on the asset, use FreeProTool to crop the SVG without rasterizing it.

Related SVG guides