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)

SVG Topics

  1. SVG: Basic Examples
  2. SVG Path Tutorial
  3. SVG Path: Elliptical Arc
  4. SVG: Specifying Styles
  5. SVG: Basic Shape Styles
  6. SVG: Viewport
  7. SVG: viewBox, User Coordinate
  8. SVG: Coordinate Transformation
  9. SVG: Text Element Tutorial
  10. SVG: Structure Elements
  11. JS: Scripting SVG, Basic Example
  12. JS: SVG Clock
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon