Guide · 4 min read

The SVG viewBox, width and height: one file, every box.

What an SVG's viewBox is, how it differs from width and height, how to make an SVG scale with its container, and why yours will not, shown on one file in two boxes, three ways.

meetthe default: all of it, with room around
slicefills the box, cuts the overflow
nonestretched to the box
One file, viewBox="0 0 2048 2048", in a wide and a tall box; the dashed line is the box.

An SVG's viewBox gives the drawing's own coordinates: four numbers, its left, top, width and height. Width and height set how large it shows on the page. Keep the viewBox, drop the fixed width and height, and set the size with CSS, and the SVG scales with its container. preserveAspectRatio says how it fits a box of another shape: whole by default, filling with slice, stretched with none.

Updated 4 sources ↓

The viewBox

What is the viewBox in an SVG?

The rectangle of the drawing's own coordinates that the SVG shows: four numbers, the left and top edges, then the width and the height. The browser scales that rectangle to the space the SVG is given.

The first is a logo drawn on a 1200 by 800 grid, with no fixed size: it takes the space it is given, as the file at the top does. The second is an icon's, drawn on a 24 by 24 grid and shown at 24 pixels.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">

viewBox vs size

What is the difference between viewBox, width and height?

The viewBox is the drawing's coordinate space; width and height are the size the SVG takes on the page. Change the viewBox and you crop or zoom the drawing; change the width and you resize it.

  • Sets

    viewBox
    Which part of the drawing shows, in its own units
    width and height
    How large the SVG is on the page

  • Written as

    viewBox
    Four numbers: left, top, width, height
    width and height
    A length each: 240, 3em, 50vw

  • Left out

    viewBox
    The drawing is not scaled to its box
    width and height
    Inline, the SVG fills its container's width

Scale with the page

How do I make an SVG responsive?

Keep its viewBox, remove the fixed width and height from the svg tag, and size it with CSS: the width its container gives, the height auto. It then scales with the page and keeps its proportions.
<svg viewBox="0 0 1200 800" style="width:100%; height:auto">
  …
</svg>

img or inline

Should I use an SVG in an img tag or inline?

An img tag for a picture that only shows: the browser caches it and it takes alt text. Inline when your CSS or scripts must reach inside it, to recolor it on hover, say.

  • Your page's CSS reaches inside

    <img src="logo.svg">
    No
    Inline <svg>
    Yes

  • Cached between pages

    <img src="logo.svg">
    Yes
    Inline <svg>
    No: it is part of each page

  • Alt text

    <img src="logo.svg">
    The alt attribute
    Inline <svg>
    Written into the SVG itself

  • Best for

    <img src="logo.svg">
    Logos and pictures that only show
    Inline <svg>
    Icons that change color, animated drawings

Not scaling

Why is my SVG not scaling?

Usually it has a fixed width and height and no viewBox, so it keeps one size. Give it a viewBox, remove the fixed size, and set its width with CSS.
  • No viewBoxNothing to scale from
    • Without a viewBox, a new size crops or leaves space
    • Add one: 0 0 and the drawing's own width and height
  • A fixed sizewidth="240" wins
    • Fixed attributes keep one size
    • Remove them, and size it with CSS
  • Space around itThe viewBox is larger than the drawing
    • An empty margin inside the viewBox shows as space
    • Crop the viewBox to the drawing
  • A clean fileStart from one
    • VecSnap's Web file carries a viewBox and no fixed size
    • It fills the space you give it

A clean SVG

How do I get an SVG of my logo that scales?

Draw it as one from the picture you have. VecSnap's Web file has a viewBox, no fixed size and no wrapper, ready for an img tag or inline.

Drop your logo. Get its SVG.

  1. Drop the picture of your logo you have.
  2. Download the Web SVG: a viewBox, no fixed width or height.
  3. Put it in an img tag, or paste it inline, and size it with CSS.

Questions

SVG sizing, answered.

Sources

It says how the viewBox fits a box of another shape. The default, xMidYMid meet, shows all of it, centered; slice fills the box and cuts what overflows; none stretches it. The picture at the top shows all three.

More guides

Keep reading

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.