main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda


Example for Coordinate Transformations

SVG allows different transformations: translation, rotation, scaling and skewing. The different transformations can be combined and nested. The matrix transformation is able to describe several transformations in one step, by using a 3x3 matrix from which actually only 6 values are used.

In the example on the left side we deal with the same graphics: one object - defined once - with different transformations. Each object instance is translated to a new position.

  • In the first row we used scaling with one or two independent factors. The latter leads to distortion in one dimension.
  • In the second row we used skewing with one or two independent factors. One has to use decimal degrees.
  • In the last row we used rotations. The last example shows an alternative syntax: all statements can be written by using a transformation matrix. Combinations can be accumulated using the rules of matrix calculations. Graphics software often exports SVG-code in this way, resulting in shorter code fragments - however manual interpretation might get more difficult by using this approach.

Files used

Right-click, save ...

Technical Details

Zooming and panning has been disabled for this example. One can interactively try different transformation parameters in the SVG tutorial from Adobe (Internet Explorer and ASV3 on Windows only). Another option to transform the whole content of a graphics is to use the viewBox attribute on the <svg /> element as described in the W3C SVG specification, chapter "Coordinate Systems, Transformations and Units or demonstrated at Peter Schonefelds viewBox and coordinate system tutorial. The viewBox approach is also used in our Navigation Tools Tutorial.

Unique definition of the map

<!DOCTYPE svg PUBLIC ... [
In the DOCTYPE section, even before the official SVG-section one can define reusable objects for later use.

<!ENTITY Austria "
An entity (object) with the name Austria is created.

<g transform='translate(-6000,500),scale(0.35)'>
For the following objects we use a group node. This is not necessary, but simplifies maintenance because transformation parameters need to be specified only once for the use on the whole group of objects.

<rect fill='#F5C592' stroke='#1F1A17' stroke-width='3' x='-5614' y='2' width='11036' height='5979'/>
A background rectangle.

<path fill='#7CC5A1' stroke='#604F5E' stroke-width='28' d='M589 1050c19,-85 ... 82,-120z'/>
The polygon defining the shape of Austria, consists partly of Bzier-curves.

Closing of the SVG Group element.

The DOCTYPE (entity defintion) of the embedded object is closed.

The object defined above is presented without transformations:

<g id="norm">&Austria;</g>
The syntax to get an instance of a predefined object is &entityName;.

We use transformations on the objects instance:

<g id="sc05" transform="scale(0.5)">&Austria;</g>
The transformation parameters are attached to the object (element or parent group). Subsequent transformation parameters are separated by , kommas.

<g id="sc09" transform="translate(6000,5400),scale(0.7),skewX(-40),skewY(20)">&Austria;</g>
Parameters can be combined individually. The right sequence is crucial to get predictable results due to the mathematical matrix calculations involved.

<g id="sc02" transform="matrix(.707 .707 -.707 .707 0 0)">&Austria;</g>
The parameters of a simple rotation -45 degrees. We deal with a 3x3 matrix, from which we use only the first 6 values. The last 3 ones must not be specified for geometric operations (2D transformations).

See also W3C-SPEC, chapter 7.6, "The transform attribute" for additional, more detailed remarks on geometric transformations in SVG.

Last modified: Wednesday, 28-Feb-2007 14:13:26 CET
© carto:net (andré m. winter & andreas neumann)
original URL for reference: Add this page to