The world of SVG is an infinite canvas. In this chapter, we’ll discuss how you tell a viewer program which part of this canvas you’re interested in, what its dimensions are, and how you locate points within that area.
The area of the canvas that your document intends to use
is called the viewport. You establish the size of this viewport with the
height attributes on the
<svg> element. The values of these
attributes can be simply a number, which is presumed to be in pixels;
this is said to be specified in user coordinates. You may also specify
height as a number followed by a unit
identifier, which can be one of the following:
The font size of the default font, usually equivalent to the height of a character
The height of the letter x
Points (1/72 of an inch)
Picas (1/6 of an inch)
<svg width="200" height="150">
<svg width="200px" height="200px">
Both of these specify an area 200 pixels wide and 150 pixels tall.
<svg width="2cm" height="3cm">
Specifies an area two centimeters wide and three centimeters high.
<svg width="2cm" height="36pt">
It is possible, though unusual, to mix units; this element specifies an area two centimeters wide and thirty-six points high.
If you have one
element nested within another
<svg> element, the nested tag may also
height as a percentage, measured in terms of
the enclosing element. We will see nested
<svg> elements in ...