SVG: Viewport

By Xah Lee. Date: . Last updated: .

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>
simple circle.

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>
simple circle centered at {50,50}
<svg width="70" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>
circle that does not completely fit in viewport.

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 dimension set via CSS.

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)

Buy JavaScript in Depth

SVG tutorial

Canvas Intro