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.
However, elements inside does not auto resize. Some drawing may be outside of viewport.
<svg> <circle cx="50" cy="50" r="50"/> </svg>