svgsvgsvg.com

SVG viewBox Calculator

Set your content dimensions and padding, and get the correct viewBox attribute instantly — with a live visual preview.

Content Size

Presets:

Padding

Origin Offset (shift the coordinate origin)

Positive values crop from the top-left. Negative values add space without padding.

Preview

2424
Padding Content (0,0 → w,h)

viewBox attribute

viewBox="-4 -4 32 32"

min-x

-4

min-y

-4

width

32

height

32

Full SVG opening tag

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32" width="32" height="32">

viewBox dimensions: 32 × 32 — aspect ratio 1:1

What is the SVG viewBox?

The viewBox attribute defines the internal coordinate system of an SVG. It takes four numbers: min-x, min-y, width, and height. The SVG renderer maps this rectangle to whatever size the element is displayed at, scaling the content to fit. A correct viewBox is what makes SVGs truly resolution-independent.

min-x and min-y — what do they do?

min-x and min-y set which point in the internal coordinate system appears at the top-left corner of the SVG. Setting min-x=-4 is equivalent to adding 4 units of left padding — the origin (0,0) of the drawing moves 4 units inward from the left edge. Positive values crop: min-x=10 hides the first 10 units of the drawing on the left.

Frequently Asked Questions

What padding should I use for icons?+

For a 24×24 icon grid, 2–4 units of padding is typical — enough to prevent strokes from clipping at the edge. Many icon systems (Feather, Heroicons) use 0 padding and rely on a viewBox of exactly 0 0 24 24, drawing all paths within that boundary. Adding padding widens the viewBox, which can shrink the apparent icon size when displayed at a fixed pixel size.

Does changing viewBox affect the displayed size?+

The viewBox controls the internal coordinate space, not the rendered size. The SVG renders at whatever pixel dimensions the width and height attributes (or CSS) specify. A larger viewBox means the content appears smaller within those fixed pixel dimensions — the coordinate space is scaled down to fit.

What is preserveAspectRatio?+

preserveAspectRatio controls what happens when the viewBox aspect ratio does not match the element's aspect ratio. The default, xMidYMid meet, centres the content and scales it to fit without clipping — the equivalent of CSS object-fit: contain. Use none to stretch the content to fill the element exactly.

Is my data sent to a server?+

No. All calculations happen in your browser. Nothing is uploaded or transmitted.

Related Tools

SVG Crop / Trim Whitespace
Trim the viewBox to the actual content bounding box — removes excess whitespace from SVG exports. Add optional padding, then copy the result.
→
SVG Path Prettifier
Format a raw SVG path d attribute into readable output — one command per line, each labeled by type. Preview the path shape, copy prettified or minified.
→
SVG Optimizer
Remove comments, metadata, and redundant attributes from SVG markup. Minify or format the result — no upload required.
→

How to use

  • Enter your content's natural width and height — or pick a preset.
  • Set padding to add space around the content. Click Per side for independent top/right/bottom/left control.
  • Use Origin Offset to crop or shift the coordinate origin (positive crops, negative adds space).
  • Copy the viewBox attribute or the complete SVG opening tag with one click.