SVG Transforms 1.0, Part 2: Language

W3C Working Draft 20 March 2009

This version:

http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/

Latest version:

http://www.w3.org/TR/SVG-Transforms

Previous version:

This is the first public Working Draft

Editors:

Jun Fujisawa, Canon Inc. <fujisawa.jun@canon.co.jp>

Anthony Grasso, Canon Inc. <anthony.grasso@cisra.canon.com.au>

Authors:

The authors of this specification are the participants of the W3C SVG Working Group.

Copyright © 2007W3C^® (MIT,ERCIM,Keio), All Rights Reserved. W3Cliability,trademark anddocument use rules apply.

Contents

1. 1.Introduction
   1. 1.1.Projection Matrix
   2. 1.2.3D Transformation Matrix
2. 2.Perspective Definitions
   1. 2.1.The'transform-origin' property
      1. 1.2.1.3D Translation Matrix
      2. 1.2.2.3D Scaling Matrix
      3. 1.2.3.3D Rotation
      4. 1.2.4.3D Rotation about X
      5. 1.2.5.3D Rotation about Y
      6. 1.2.6.3D Rotation about Z
   2. 2.2.The'perspective' Property
3. 3.TransformList Extensions
4. 4.'animateTransform' Extensions
5. 5.Converting a 4x4 to a 3x3 matrix
6. 6.RelaxNG Schema for SVG Transforms 1.0
7. 7.DOM interfaces
   1. 7.1.InterfaceSVGMatrix
   2. 7.2.InterfaceSVGPerspective
   3. 7.3.InterfaceSVGTransformOrigin
   4. 7.4.InterfaceSVGSVGElement
   5. 7.5.InterfaceTraitAccess
8. 8.References
   1. 8.1.Normative References
   2. 8.2.Informative References
9. 9.Acknowledgements

1. Introduction

This document is normative and lists features that may be used in the context of display. The various scenarios are listed in the SVG Transforms Requirements document.

Note that even though this specification references parts of SVG Tiny 1.2 it does not require a complete or SVG Tiny 1.2 implementation.

This document contains explicit conformance criteria that overlap with some RNG definitions in requirements. If there is any conflict between the two, the explicit conformance criteria are the definitive reference.

The SVG Transforms module extends the two-dimensional transformation pipeline in SVG to allow graphical elements to be transformed in three-dimensions. For elements to be transformed using three-dimensonal transformations a Z axis is introduced by this module. The elements in SVG can be positioned along the Z axis and transformed in 3D space, however the elements themselves still remain two-dimensional. A perspective projection can be applied to elements to give the illusion of depth. The projection plane for a perspective projection is the X-Y plane (where Z = 0). All are still rendered to this plane. Unless stated otherwise, all elements are rendered in document order as per the existing SVG specifications.

1.1. Projection Matrix

The projection matrix provides a means for depth information of an element to be specified. Depth information can be represented as a 4x4 matrix of the following form:

1 0  0   00 1  0   00 0  0   00 0 1/-d 1

The projection transformation matrix is also expressed as a vector[x y d]. The'perspective' property is used to set the perspective projection matrix of an object.

1.2. 3D Transformation Matrix

The 3D transformation matrices provide a means to transform a point in 3D space before it is projected to a 2D plane. Mathematically, all 3D transforms can be represted as a 4x4 transformation matrices.

The 3D transforms matrices are of the following form:

a b c de f g hi j k m0 0 0 1

The 3D transformation matrix is also expressed as a vector[a b c d e f g h i j k m]. The transforms in theTransformsList Extensions can be used to set the transformation of an object.

TheCSS 3D Transforms specification uses 16 values.

1.2.1. 3D Translation Matrix

A 3D Translation is equivalent to the matrix:

1 0 0 tx0 1 0 ty0 0 1 tz0 0 0 1

1.2.2. 3D Scaling Matrix

A 3D Scaling is equivalent to the matrix:

sx 0  0  00  sy 0  00  0  sz 00  0  0  1

1.2.3. 3D Rotation

A 3D Rotation is equivalent to the matrix:

t.nx.nx + c     t.nx.ny - s.nz  t.nx.nz + s.ny  0t.nx.ny + s.nz  t.ny.ny + c     t.ny.nz - s.nx  0t.nx.nz - s.ny  t.ny.nz + s.nx  t.nz.nz + c     0       0              0               0         1

where:

c = cos(a)s = sin(a)t = 1 - cos(a)

1.2.4. 3D Rotation about X

A 3D Rotation about the X axis is equivalent to the matrix:

1   0       0    00 cos(a) -sin(a) 00 sin(a) cos(a)  00   0       0    1

1.2.5. 3D Rotation about Y

A 3D Rotation about the Y axis is equivalent to the matrix:

 cos(a) 0 sin(a)  0   0    1    0    0-sin(a) 0 cos(a)  0   0    0    0    1

1.2.6. 3D Rotation about Z

A 3D Rotation about the Z axis is equivalent to the matrix:

cos(a) -sin(a) 0  0sin(a)  cos(a) 0  0  0      0     1  0  0      0     0  1

2. Perspective Definitions

The SVG Working Group is currently discussing how to give the author the ability to change the Z order of objects. One possible solution is to use the CSS'transform-style' property on a group. When set to "preserve-3d", it allows child elements in the group to be re-ordered based on their Z position (rather than document order). A similar option is to introduce a container element 'layeredG' or 'g3d' where the order of rendering the child elements is based on its Z position. Note that in either case I different tree traversal order may only be needed. This would help restrict the complexity when rendering 3D Transforms in SVG. The SVG Working Group believes this is the most optimal solution without causing too many complexities to SVG Implementations. The SVG Working Group welcomes any comments or suggestions regarding this feature.

2.1. The'transform-origin' property

The'transform-origin' property establishes the transformation origin of an element in the element's CTM.

The'transform-origin' is the equivalent of the following specification:translate(<ox>, <oy>, <oz>)<transform>translate(-<ox>, -<oy>, -<oz>). If a <transform> already specifies a transformation origin the'transform-origin' is still applied as per the equivalent specification specified above.

This property is similar to property in the CSS 3D Transformsspecification.

2.2. The'perspective' Property

The'perspective' property specifies a projeciton matrix to apply to child elements contained within the current element. It effectively sets the viewpoint to project an element on the X-Y viewing plane (where z=0).

This property is similar to property in the CSS 3D Transformsspecification.

Consider adding "near" and "far" planes to the 'perspective' property. Could have a value like: perspective(<px> <py> <pd> [<n> <f>]). <n> and <f> define the Near and Far clipping planes for the perspective view.

3. TransformList Extensions

SVG Transforms extends the transform types availble in the SVGTransformList.

• matrix(a b c d e f g h i j k m), which specifies a transformation in the form of a3D transformation matrix of 12 values.matrix(a,b,c,d,e,f,g,h,i,j,k,m) is equivalent to applying the transformation matrix[a b c d e f g h i j k m].

• translate(<tx> [<ty> [<tz>]]), which specifies a3D translation bytx,ty andtz. If<ty> and<tz> are not provided, it is assumed to be zero.

• scale(<sx> [<sy> [<sz>]]), which specifies a3D scale operation bysx,sy andsz. If<sy> and<sz> are not provided, it is assumed to be equal to<sx>.

• rotate(<rotate-angle> <nx> <ny> <nz> [<cx> <cy> <cz>]), which specifies a3D rotation by <rotate-angle> degrees in the direction defined by the vector<nx> <ny> <nz> about a given point.

  If optional parameters<cx>,<cy> and<cz> are not supplied, the rotation is about the origin of the current user coordinate system.

  If optional parameters<cx>,<cy> and<cz> are supplied, the rotation is about the point (cx,cy andcz). The operation represents the equivalent of the following specification:translate(<cx>, <cy>, <cz>) rotate(<rotate-angle> <nx> <ny> <nz>) translate(-<cx>, -<cy>, -<cz>).

• rotateX(<rotate-angle> [<cy> <cz>]), which specifies arotation by <rotate-angle> degrees about the X axis.

  If optional parameters<cy> and <cz> are supplied, the rotation is about the point (cy, cz). The operation represents the equivalent of the following specification:translate(0, <cy>, <cz>) rotateX(<rotate-angle>) translate(0, -<cy>, -<cz>).

• rotateY(<rotate-angle> [<cx> <cz>]), which specifies arotation by <rotate-angle> degrees about the Y axis.

  If optional parameters<cx> and <cz> are supplied, the rotation is about the point (cx, cz). The operation represents the equivalent of the following specification:translate(<cx>, 0, <cz>) rotateX(<rotate-angle>) translate(-<cx>, 0, -<cz>).

• rotateZ(<rotate-angle> [<cx> <cy>]), which specifies arotation by <rotate-angle> degrees about the Z axis.

  If optional parameters<cx> and <cy> are supplied, the rotation is about the point (cx, cy). The operation represents the equivalent of the following specification:translate(<cx>, <cy>, 0) rotateX(<rotate-angle>) translate(-<cx>, -<cy>, 0).

4.'animateTransform' Extensions

SVG Transforms extends the'animateTransform' element'type' to include theTransformList extensions.

Attribute definition:

type ="translate" | "scale" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "skewX" | "skewY"

Indicates the type of transformation which is to have its values change over time. If'type' has anunsupported value (e.g.type="foo" ortype="ref(svg)") the'animateTransform' element is ignored.

Animatable: no.

The'from','by' and'to' attributes take a value expressed using the same syntax that is available for the given transformation type:

• For atype="translate", each individual value is expressed as<tx> [,<ty> [,<tz>]].
• For atype="scale", each individual value is expressed as<sx> [,<sy>[,<sz>]].
• For atype="rotate", each individual value is expressed as rotate(<rotate-angle> <nx> <ny> <nz> [<cx> <cy> <cz>]).
• For atype="rotateX", each individual value is expressed as rotateX(<rotate-angle> [<cy> <cz>]).
• For atype="rotateY", each individual value is expressed as rotateY(<rotate-angle> [<cx> <cz>]).
• For atype="rotateZ", each individual value is expressed as rotateZ(<rotate-angle> [<cx> <cy>]).
• For atype="skewX" andtype="skewY", each individual value is expressed as<skew-angle>.

5. Converting a 4x4 to a 3x3 matrix

A rectangle ABCD is given on plane X-Y. When a 3D affine transform and perspective projection are applied, a quadrangle A'B'C'D' will appear on the X-Y plane. Note the X-Y plane is the projection plane. Generally, this mapping is expressed as a 4x4 matrix.

An affine3D Transform MatrixT is given as

    | a11 a12 a13 a14 |M = | a21 a22 a23 a24 |    | a31 a32 a33 a34 |    |  0   0   0   1  |

APerspective Projection MatrixP is given as

    | 1 0  0   0 |P = | 0 1  0   0 |    | 0 0  0   0 |    | 0 0 1/d  1 |

The combined matrixMcan be expressed as

M = P.T    | 1 0  0   0 | | a11 a12 a13 a14 |  = | 0 1  0   0 |.| a21 a22 a23 a24 |    | 0 0  0   0 | | a31 a32 a33 a34 |    | 0 0 1/d  1 | |  0   0   0   1  |    |  a11   a12   a13     a14    |  = |  a21   a22   a23     a24    |    |   0     0     0       0     |    | a31/d a32/d a33/d (a34/d)+1 |  = Expression 1

An arbitary pointK can be expressed as (kx,ky, 0). If the pointK is transformed to pointK'(k'x,k'y,0), the eqation is derived

| k'x |     | kx || k'y | = M.| ky ||  0  |     | 0  || k'w |     | 1  |          |  a11   a12   a13     a14    | | kx |        = |  a21   a22   a23     a24    |.| ky |          |   0     0     0       0     | | 0  |          | a31/d a32/d a33/d (a34/d)+1 | | 1  |          | a11.kx + a12.ky + a14               |        = | a21.kx + a22.ky + a24               |          | 0                                   |          | (a31/d).kx + (a32/d).ky + (a34/d)+1 |        = Expression 2

A non-affine 3x3 matrix (F) can be expressed as a 4x4 where the components that make up the Z axis are set to 0 as shown below

    | b11 b12  0  b14 |F = | b21 b22  0  b24 |    |  0   0   0   0  |    | b41 b42  0   1  |

If matrixF can be used to map pointK to pointK' as shown below

| k'x |     | kx || k'y | = F.| ky ||  0  |     | 0  || k'w |     | 1  |          | b11 b12  0  b14 | | kx |        = | b21 b22  0  b24 |.| ky |          |  0   0   0   0  | | 0  |          | b41 b42  0   1  | | 1  |          | b11.kx + b12.ky + b14 |        = | b21.kx + b22.ky + b24 |          | 0                     |          | b41.kx + b42.ky + 1   |        = Expression 3

Expression 2 can be shown to be related toExpression 3 for any arbitary pointkx,ky by a constantm

| a11.kx + a12.ky + a14               |   | m.(b11.kx + b12.ky + b14) || a21.kx + a22.ky + a24               | = | m.(b21.kx + b22.ky + b24) || 0                                   |   |    0                      || (a31/d).kx + (a32/d).ky + (a34/d)+1 |   | m.(b41.kx + b42.ky + 1)   |

Thus it can be said from the above relationship

        a11 = m.b11        a12 = m.b12        a14 = m.b14        a21 = m.b21        a22 = m.b22        a24 = m.b24      a31/d = m.b41      a32/d = m.b42(a34/d) + 1 = m

Therefore, the combination of An affine3D Transform Matrix and aPerspective Projection Matrix can be expressed by using a 3x3 matirx as follows

| a11     a12        a14    || a21     a22        a24    || a31/d  a32/d  (a34/d) + 1 |

6. RelaxNG Schema for SVG Transforms 1.0

The schema for SVG Transforms 1.0 is written in RelaxNG [RelaxNG], a namespace-aware schema language that uses the datatypes from XML Schema Part 2 [Schema2]. This allows namespaces and modularity to be much more naturally expressed than using DTD syntax. The RelaxNG schema for SVG Transforms 1.0 may be imported by other RelaxNG schemas, or combined with other schemas in other languages into a multi-namespace, multi-grammar schema usingNamespace-based Validation Dispatching Language [NVDL].

Unlike a DTD, the schema used for validation is not hardcoded into the document instance. There is no equivalent to the DOCTYPE declaration. Simply point your editor or other validation tool to the IRI of the schema (or your local cached copy, as you prefer).

The RNG is under construction, and only the individual RNG snippets are available at this time. They have not yet been integrated into a functional schema. The individual RNG files will be available soon.

7. DOM interfaces

7.1. InterfaceSVGMatrix

TheSVGMatrix interface corresponds to setting the equivalent matrix values of a component from the transform attribute specification.

IDL Definition

interface SVGMatrix{  float getComponent(in unsigned long index)       raises(DOMException);  SVGMatrix multiply(in SVGMatrix secondMatrix);  SVGMatrix inverse()       raises(SVGException);  SVGMatrix translate(in float x, in float y, in float z);  SVGMatrix scale(in float scaleFactor-x, in float scaleFactor-y, in scaleFactor-y);  SVGMatrix rotate(in float angle);  SVGMatrix rotateX(in float angle);  SVGMatrix rotateY(in float angle);  SVGMatrix rotateZ(in float angle);};

Methods

getComponent3D

multiply3D

inverse

translate

scale

rotateX

rotateY

rotateZ

7.2. InterfaceSVGPerspective

TheSVGPerspective interface corresponds to the'perspective' attribute.

IDL Definition

Interface SVGPerspective{  attribute float ex;  attribute float ey;  attribute float ez;};

Attributes

float ex

float ey

float ez

7.3. InterfaceSVGTransformOrigin

TheSVGTransformOrigin interface corresponds to the'transform-origin' attribute.

IDL Definition

Interface SVGTransformOrigin{  attribute float ox;  attribute float oy;  attribute float oz;};

Attributes

float ox

float oy

float oz

7.4. InterfaceSVGSVGElement

TheSVGMatrix interface corresponds to creating a 3D Transformation Matrix.

IDL Definition

interface SVGSVGElement : SVGLocatableElement, SVGTimedElement{  SVGMatrix createSVGMatrixComponents  (    in float m1, in float m2, in float m3, in float m4,    in float m5, in float m6, in float m7, in float m8,    in float m9, in float m10, in float m11, in float m12  );  SVGPerspective createSVGerspective  (    in float p1, in float p2, in float p3  );};

Methods

createSVGMatrixComponents

createSVGerspective

InterfaceSVGLocatable

IDL Definition

interface SVGLocatable{  SVGMatrix getScreenCTM();  SVGPerspective getScreenPerspective();};

Methods

getScreenCTM

getScreenPerspective

7.5. InterfaceTraitAccess

IDL Definition

interface TraitAccess{  SVGMatrix getMatrixTrait(in DOMString name)      raises(DOMException);  SVGMatrix getMatrixPresentationTrait(in DOMString name)       raises(DOMException);  void setMatrixTrait(in DOMString name, in SVGMatrix matrix)       raises(DOMException);};

Methods

getMatrixTrait

getMatrixPresentationTrait

setMatrixTrait

8. References

8.1. Normative References

[NVDL]

Document Schema Definition Languages (DSDL) — Part 4: Namespace-based Validation Dispatching Language — NVDL. ISO/IEC FCD 19757-4, See http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/

[RelaxNG]

Document Schema Definition Languages (DSDL) — Part 2: Regular grammar- based validation — RELAX NG. ISO/IEC FDIS 19757-2:2002(E), J. Clark,村田 真(Murata M.), eds., 12 December 2002. See http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf

[Schema2]

XML Schema Part 2: Datatypes Second Edition, P. Biron, A. Malhotra, eds. W3C, 28 October 2004 (Recommendation). Latest version available at http://www.w3.org/TR/xmlschema-2/. See also Processing XML 1.1 documents with XML Schema 1.0 processors.

[SVGT12]

Scalable Vector Graphics (SVG) Tiny 1.2 Specification, O. Andersson, R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso, V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack, A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers, A. Shellshear, editors. W3C, 22 December 2008 (Recommendation). See http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/

8.2. Informative References

[SVGTransformsReqs]

SVG Transforms Requirements, Jun Fujisawa, Anthony Grasso, Canon Inc., (Working Draft). Seehttp://dev.w3.org/SVG/modules/transforms/SVGTransformsReqs.html

[OpenVG11]

OpenVG 1.1 Specification, Daniel Rice, Google Inc. Seehttp://www.khronos.org/registry/vg/specs/openvg_1_0_1.pdf

9. Acknowledgements

The members of the SVG Working Group who contributed to this document include:

• Anthony Grasso, Canon Inc.
• Jun Fujisawa, Canon Inc.
• Cameron McCormack, Invited Expert (Working Group Co-Chair)
• Doug Schepers, W3C (W3C Team Contact)

The editor would also like to thank the following people for contributing to this document: Shinya Takeichi, Richard Ling, Dean Jackson, Zack Rusin.