Theory
Theory
Comments

SVG Width and Height

SVG behaves differently from typical HTML elements: its content is rendered on an infinite canvas, and its dimensions are calculated independently of the content. The visible part of the canvas corresponds to the dimensions of the SVG element. This rendering area is called viewport.

At the same time, you can control both the dimensions of the SVG element and the behavior of its content: it can be displayed in its entirety, cropped, or shrunk without maintaining aspect ratio.

If the SVG is simply pasted into the page without specifying any dimensions, it will display at 300×150 pixels:

<svg>
  …
</svg>

You can change the width and height using width and height:

<svg width="350" height="200">
  …
</svg>

You can set the dimensions by either using attributes or CSS:

svg {
  width: 350px;
  height: 200px;
}

When specifying dimensions in CSS, you must specify the units. When specifying the dimensions in attributes, units are not required if you are using pixels.

object.svg
style.css

SVG

CSS

svg { border: 2px solid teal; }

Goalscompleted

Assign a width of 320 and a height of 240 to the SVG element.
Then change the width and height in CSS to 500px.

SVG Width and Height

Comments

Log in

Sign up

Restore access