SVG ViewBox Optimizer & Cropper｜Automatically Trim SVG Whitespace

This tool automatically calculates the tightest possible viewBox to perfectly fit the visible elements within your SVG, effectively trimming any excess whitespace. It's designed for developers and designers who need to optimize SVG assets exported from various design tools, ensuring they scale predictably and without unwanted padding.

💡 Tool Overview

• Automatic Bounding Box Calculation: Simply paste your SVG code, and the tool instantly calculates the precise coordinates and dimensions of its content.
• Whitespace Trimming: Removes excess transparent padding around your SVG graphics by setting an optimal viewBox.
• Code Optimization: The output SVG removes fixed width and height attributes in favor of a scalable viewBox, making your icons and graphics responsive.
• Live Preview: Instantly see a preview of your SVG with the new, cropped viewBox applied.
• Secure & Private: Your SVG data is never sent to a server. All calculations are performed directly in your browser.

🧐 Frequently Asked Questions

Q. What is an SVG viewBox?

A. The viewBox attribute defines the position and dimension of an SVG canvas. It is a list of four numbers: min-x, min-y, width, and height. These values allow you to define a coordinate system within the SVG, so the graphic can scale to fit any container it's placed in while maintaining its aspect ratio. This tool calculates these four values to perfectly frame your artwork.

Q. Why is it important to have a tight viewBox?

A. A tight viewBox ensures that the SVG has no extra, invisible space around its content. This prevents layout issues where an icon or graphic might have unexpected padding, causing alignment problems. It also makes the SVG more portable and predictable when used in different contexts, as its boundaries match its visible content precisely.

📚 A Deeper Look at SVG Bounding Boxes

This tool's core logic relies on the JavaScript getBBox() method, which is available on SVG elements. This function calculates the tightest fitting bounding box that encloses all the geometric shapes within a given element. It's important to note that the calculation is based purely on the geometry (coordinates of points in paths, circles, rects, etc.) and does not typically include the thickness of strokes that might extend beyond the geometric edge. Design applications like Figma, Illustrator, or Sketch often export SVGs with a viewBox that corresponds to the artboard size, not the content itself. This tool remedies that by recalculating the viewBox based only on the drawn elements, creating a clean, optimized, and portable asset.