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

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

viewBox, User Coordinates

SVG: viewBox, User Coordinate


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

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster

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

Web Dev Tutorials