SVG: Viewport

viewport is the region where SVG elements are rendered.

The size of viewport can be set via width and height attributes.

<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>

By default, the top left corner of the viewport has coordinate {0,0}. That is, x = 0 and y = 0. this point is called the origin.

Changing the width or height does not change the origin.

<svg width="200" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>

<svg width="70" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>

Viewport Width Height via CSS

The dimension of viewport can be set via CSS too.

<svg style="width:100px; height:100px">
<circle cx="50" cy="50" r="50"/>
</svg>

Viewport with no Width and Height

If {width, height} attributes are not set, the browser automatically determines a size. This is similar to HTML div element without any width and height.

<svg>
<circle cx="50" cy="50" r="50"/>
</svg>

viewBox, User Coordinates

SVG: viewBox, User Coordinate

Reference

Coordinate Systems, Transformations and Units – SVG 1.1 (Second Edition)