↑↓ to move · Enter to open · Esc to close

SVG ViewBox Generator

Add or fix the SVG viewBox so an icon scales to any size in CSS. The value comes from the width and height, or from the area the drawing really covers, with optional padding.

Updated
Runs in your browser. Your SVG is not uploaded.

Your SVG

Settings

Take the viewBox from

Only the <svg> start tag changes. The rest of the file stays as it is.

SVG with viewBox

Your SVG with a viewBox will appear here
  1. Paste SVG code, upload a file, or load a URL
  2. Pick where the viewBox comes from
  3. Compare, then copy or download

How to add a viewBox to an SVG

  1. Paste the SVG code or drop the file.
  2. Leave Automatic on: it uses width and height when there is no viewBox. Choose Drawn content to fit the viewBox tightly around the shapes.
  3. Add padding if strokes or shadows touch the edge.
  4. Tick Remove width and height if you want CSS to set the size.
  5. Compare the two previews in a 160 × 160 px box, then copy or download the result.

How it works

The viewBox has four numbers: min-x min-y width height. It says which area of the drawing's coordinate system to show. With it, the browser scales that area to whatever size the element gets.

  • From width and height: viewBox="0 0 width height", when both are plain lengths (px, or units such as mm and in that convert to px).
  • From drawn content: a safe copy of the file, with only shapes and geometry, is measured by the browser (getBBox()), and the box around everything drawn becomes the viewBox.
  • Padding widens the box by the same amount on every side.
  • Only the <svg> start tag is rewritten. Every other byte of the file stays as it was.

Examples

  • <svg width="24" height="24"> with no viewBox gets viewBox="0 0 24 24".
  • A logo drawn from x 10 to 110 and y 20 to 70 on a large canvas gets viewBox="10 20 100 50" with Drawn content, or "8 18 104 54" with 2 units of padding.
  • With Remove width and height, <svg width="24" height="24"> becomes <svg viewBox="0 0 24 24">, and the icon fills whatever box CSS gives it.

Why an SVG needs a viewBox

Without a viewBox, width and height only set the size of the window onto the drawing. Make the element bigger in CSS and you get a bigger window with the same small drawing in the corner, or a drawing cut off. With a viewBox the drawing scales with the element, which is what you want for icons and logos.

Limitations

  • Widths in %, em, or ex can't be turned into a viewBox. Use Drawn content instead.
  • Drawn content measures shapes, paths, and text. Embedded images and HTML inside <foreignObject> are not measured.
  • The measured box follows the geometry. Thick strokes and blur can reach past it, which is what padding is for.

Frequently asked questions

What is the SVG viewBox?

An attribute with four numbers, min-x, min-y, width, and height, that picks the area of the drawing to show. The browser scales that area to fit the element, which makes the SVG responsive.

Should I remove width and height from an SVG?

For icons sized with CSS, yes, once a viewBox is present. Keep them when the SVG is used on its own or in an email, so it still gets a sensible default size.

Why is my icon cut off after adding a viewBox?

The drawing reaches outside the width and height it was saved with. Choose Drawn content to fit the viewBox around the real shapes, and add a little padding.

Does this change my drawing?

No. Only the viewBox, width, and height attributes on the root element change. Paths and shapes are untouched.

Often used together with the SVG ViewBox Generator.

  • SVG Previewer

    Shows SVG code as an image with zoom, backgrounds, and size details.

  • SVG Optimizer

    Shrinks SVG files with SVGO and shows the before and after side by side.

  • SVG Validator

    Checks SVG files for XML errors, broken references, typos, and unsafe code.