Files used

Right-click, save ...

• matrix.shtml
• matrix.svg

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 Bézier-curves.

  </g>
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.