Chapter 3. Coordinates
The world of SVG is an infinite canvas. In this chapter, we’ll find out how to tell a viewer program which part of this canvas you’re interested in, what its dimensions are, and how to locate points within that area.
The area of the canvas your document intends to use is called the viewport. You establish the size of this viewport with the
height attributes on the
<svg> element. Each attribute’s value 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 line of text
- The height of the letter x
- Pixels (in CSS2-supporting graphics, there are 96 pixels per inch)
- Points (1/72 of an inch)
- Picas (1/6 of an inch)
Possible SVG viewport declarations include the following:
<svg width="200" height="150">
<svg width="200px" height="150px">
- Both of these specify an area 200 pixels wide and 150 pixels tall.
<svg width="2cm" height="3cm">
- This specifies an area 2 centimeters wide and 3 centimeters high.
<svg width="2cm" height="36pt">
- It is possible, though unusual, to mix units; this element specifies an area 2 centimeters wide and 36 points high.
<svg> element may also specify its
height as a percentage. When the element ...