For all media, the term canvas describes "the space where the SVG document is rendered." The canvas is infinite for each dimension of the space, but rendering occurs within a finite rectangular region of the canvas. This finite rectangular region is called the viewport. For visual media, the viewport is the viewing area where the user sees the SVG document.
The size of the viewport (i.e., its width and height) is determined by a negotiation process (see Establishing the size of the initial viewport) between the SVG document and its parent (real or implicit). Once that negotiation process is completed, the SVG user agent is provided the following information:
Using the above information, the SVG user agent establishes an initial current coordinate system (also called user space) for the SVG document such that the origin of the current coordinate system matches the origin of the viewport, and one unit in the current coordinate system equals one "pixel" in the viewport.
Lengths in SVG can be specified as:
The supported CSS length unit specifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.
A new user space (i.e., a new current coordinate system) can be established at any place in the SVG document by specifying transformations in the form of transformation matrices or simple transformation operations such as rotation, skewing, scaling and translation.
A new viewport also can be established. New viewports provide a means for redefining the meaning of some of the various CSS unit specifiers (px, pt, pc, cm, mm, in, and percentages).
The attributes of the initial viewport are established by either the CSS positioning parameters that are defined by the outermost <svg> element in combination with the width= and height= XML attributes that are required on the <svg> element.
The size (i.e., width and height) of the viewport into which an SVG document should be rendered is determined as follows. If the <svg> element contains CSS positioning properties which establish the width for the viewport, then the width of the viewport should be set to that size. If the CSS positioning properties on the <svg> element do not provide sufficient information to determine the width of the viewport, then the XML attributes width= determines the width of the viewport. Similarly, if the <svg> element contains CSS positioning properties which establish the height for the viewport, then the height of the viewport should be set to that size. If the CSS positioning properties on the <svg> element do not provide sufficient information to determine the height of the viewport, then the XML attributes height= determines the height of the viewport.
In the following example, an SVG graphic is embedded within a parent XML document which is formatted using CSS layout rules. The width="100px" and height="200px" attributes are used to set the size of the viewport:
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">
<!-- SVG graphic -->
<svg xmlns='http://www.w3.org/Graphics/SVG/svg-19990412.dtd'
width="100px" height="200px">
<path d="M100,100 Q200,400,300,100"/>
<!-- rest of SVG graphic would go here -->
</svg>
</parent>
The initial clipping path for an SVG document is determined by the values of the 'clip' and 'overflow' properties.
To change the current user space coordinate system, you define a transformation which defines how to transform coordinates from the new user coordinate system into the previous user coordinate system. Mathematically, the transformation is represented by a transformation matrix which maps coordinates in the new user coordinate system into the previous user coordinate system. To illustrate:
(Insert an image which shows this concept.)
Transformation matrices define the mathematical mapping from one coordinate space into another. Of particular interest is the current transformation matrix (CTM) which defines the mapping from user space into viewport space.
(Insert an image showing the CTM mapping user space into device space.)
Transformation matrices are specified as 3x3 matrices of the following form:
(Insert an image showing [a b 0 c d 0 e f 1], but as a rectangular matrix.)
Because SVG's transformation matrices only have six entries that can be changed, these matrices will be called 2x3 transformation matrices, which for convenience are often written as an array of six numbers: [a b c d e f].
All coordinates in user space are expressed as (x,y) values. To calculate the transformation from the current user space coordinate system into viewport space, you multiply the vector (x,y,1) by the current transformation matrix (CTM) to yield (x',y',1):
(Insert an image showing [x',y',1]=[x,y,1][a b 0 c d 0 e f 1])
Whenever a new transformation is provided, a new CTM is calculated by the following formula. Note that the new transformation is pre-multiplied to the CTM:
(Insert an image which shows newCTM[a b c d e f]=[transformmatrix]*oldCTM[a b c d e f].)
It is important to understand the following key points regarding transformations in SVG:
(Insert an image illustrates the above concept.)
Mathematically, all transformations can be expressed as matrices. To illustrate:
(Insert an image illustrates the above concept.)
All transformations are specified with the transform CSS property:
| Value: | matrix(<a> <b> <c> <d> <e> <f>) | translate(<tx> [<ty>]) | scale(<sx> [<sy> [<center-x> [<center-y>]]]) | rotate(<rotate-angle> [<center-x> [<center-y>]]) | fit(<bbox-left> <bbox-top> <bbox-right> <bbox-bottom> [ preserve-aspect-ratio [ left | center | right ] [ top | middle | bottom ]]) | inherit |
| Initial: | see discussion below |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
The 'transform' property defines a new coordinate system transformation and thus implicitly new user space and a new CTM. A transform property has exactly one of matrix, scale, rotate, translate, fit and inherit.
The parameters to matrix have the following meanings (see the explanation of simple transformations.):
The parameters to translate have the following meanings (see the explanation of simple transformations.): Translations are represented as [1 0 0 1 tx ty], where tx and ty are the distances to translate the origin of the coordinate system in x and y, respectively.
The parameters to scale have the following meanings (see the explanation of simple transformations.):
The parameters to rotate have the following meanings (see the explanation of simple transformations.):
(The working group is investigating providing convenience mechanisms for other simple transformations such as skew and reflect.)
fit provides a mechanism for having the SVG processor automatically compute a transformation matrix such that the coordinates <bbox-left> <bbox-top> <bbox-right> <bbox-bottom> (all <number>s) will align exactly with the corresponding corners of the viewport. You can specify preserve-aspect-ratio to ensure that the aspect ratio of the graphic is preserved (i.e., uniform scaling onto the viewport) and what kind of horizontal and vertical alignment within the viewport is desired.
At any point in an SVG drawing, you can establish a new viewport into which all contained graphics should be drawn by including an <svg> element inside an SVG document. By establishing a new viewport, you also implicitly establish a new initial user space, new meanings for many of the CSS unit specifiers and, potentially, a new clipping path.
To establish a new viewport, you use the positioning properties from CSS such as left:, top:, right:, bottom:, width:, height:, margin properties and padding properties. Here is an example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990412.dtd">
<svg width="4in" height="3in">
<desc>This SVG drawing embeds another one,
thus establishing a new viewport
</desc>
<!-- The following statement establishing a new viewport
and renders SVG drawing B into that viewport -->
<svg style="left: 25%; top: 25%" width="50%" height="50%">
<!-- drawing B goes here -->
</svg>
</svg>
You can also specify values for the 'clip' and 'overflow' properties for <svg> elements within an SVG document. If specified on an <svg> element, these properties will change the current clipping path. (Note that these properties will be ignored if used on any other type of element.)
(Extract sections from chapter 8 of the CSS spec. Make modifications as necessary.).
All coordinates and lengths in SVG can be specified in one of the following ways:
<text style="font-size: 50">Text size is 50 user units</text>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990412.dtd">
<svg width="4in" height="3in">
<desc>Demonstration of coordinate transforms
</desc>
<!-- The following two text elements will both draw with a
font height of 12 pixels -->
<text style="font-size: 12">This prints 12 pixels high.</text>
<text style="font-size: 12px">This prints 12 pixels high.</text>
<!-- Now scale the coordinate system by 2. -->
<g style="transform: scale(2)">
<!-- The following text will actually draw 24 pixels high
because each unit in the new coordinate system equals
2 units in the previous coordinate system. -->
<text style="font-size: 12">This prints 24 pixels high.</text>
<!-- The following text will actually still draw 12 pixels high
because the CSS unit specifier has been provided. -->
<text style="font-size: 12px">This prints 12 pixels high.</text>
</g>
</svg>
If possible, the SVG processor should be passed the actual size of a px unit in inches or millimeters by its parent processor. (See Conformance Requirements and Recommendations.) If such information is not available from the parent processor, then the SVG processor should assume a px is defined to be exactly .28mm.
The process of establishing a new viewport via an <svg> element inside of an SVG document changes the meaning of the following CSS unit specifiers: px, pt, cm, mm, in, and % (percentages). A "pixel" (the px unit) becomes equivalent to a single unit in the user coordinate system for the given <svg> element. The meaning of the other absolute unit specifiers (pt, cm, mm, in) are determined as an appropriate multiple of a px unit using the actual size of px unit (as passed from the parent processor to the SVG processor). Any percentage values that are relative to the current viewport will also represent new values.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990412.dtd">
<svg width="300px" height="3oopx">
<desc>Transformation with establishment of a new viewport
</desc>
<!-- The following two text elements will both draw with a
font height of 12 pixels -->
<text style="font-size: 12">This prints 12 pixels high.</text>
<text style="font-size: 12px">This prints 12 pixels high.</text>
<!-- Now scale the coordinate system by 2. -->
<g style="transform: scale(2)">
<!-- The following text will actually draw 24 pixels high
because each unit in the new coordinate system equals
2 units in the previous coordinate system. -->
<text style="font-size: 12">This prints 24 pixels high.</text>
<!-- The following text will actually still draw 12 pixels high
because the CSS unit specifier has been provided. -->
<text style="font-size: 12px">This prints 12 pixels high.</text>
</g>
<!-- This time, scale the coordinate system by 3. -->
<g style="transform: scale(3)">
<!-- Establish a new viewport and thus change the meaning of
some CSS unit specifiers. -->
<svg style="left:0; top:0; right:100; bottom:100"
width="100%" height="100%">
<!-- The following two text elements will both draw with a
font height of 36 screen pixels. The first text element
defines its height in user coordinates, which have been
scaled by 3. The second text element defines its height
in CSS px units, which have been redefined to be three times
as big as screen pixels due the <svg> element establishing
a new viewport. -->
<text style="font-size: 12">This prints 36 pixels high.</text>
<text style="font-size: 12px">This prints 36 pixels high.</text>
</svg>
</g>
</svg>
(Include an example which shows multiple viewports, multiple user spaces and multiple use of different units.)