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 tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Specifying Styles
  5. Shape Styles
  6. Viewport
  7. viewBox
  8. Coordinate Transformation
  9. Text Element
  10. Font Size
  11. Structure Elements
  12. Scripting SVG
  13. SVG Clock
  14. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog