Files used

Right-click, save ...

• canvas.shtml
• canvas.svg
• x_austria_relief.png

Technical Details

The entire source code of the SVG-File can be viewed using the context-menu (CTRL-Key and Button on the Mac). The file consists of a header, style definitions, and the geometric description of the viewed objects. We will explain the most important elements below:

Just after the header, that contains definitions, version infos etc. the SVG-Elements start:

<svg xml:space="preserve" width="350px" height="176px" ... viewBox="-2361 0 4625 2336">
With this code one defines the viewing parameters, the extent of the plugin area within the html-page (in this case in pixels) and the viewBox, that defines the visible extent. The difference between the width and height coordinates and the viewBox implicitly defines the coordinate transformation: instructions can be used with different units (cm, mm, pixel, inches, etc.). The parameters in this example are derived from the internal coordinate system of the graphics software that exported the data.

Removing the width and height attributes and loading the SVG in the full window (without html around) gives us a graphic fitted to this window: larger extent. You may resize this browser window and see the map adjusting to its new canvas.

The style definitions are embedded within the SVG file (in our case):

<style type="text/css">
Classical CSS-Syntax
    ...
    .str7 {stroke:#1F1A17;stroke-width:3}
Definition of the format str7 describing an individual stroke-color and stroke-width.
    ...
    .fnt1 {font-weight:normal;font-size:125;font-family:'Helvetica'}
Definition of a font-type named fnt1. The font-size refers to the internal coordinate system and is in this case 125.
    ...

Geometry is following:

<g id="bundesland">
The <g></g> tag builds a group object. Using a unique name id one can refer to the group element, change its attributes or switch it on and off.

  <path class="fil0 str6" d="M93 1085l-21 -1"/>
The description of a border section using a path-element: we assign two style attributes within the class property (fill-type and stroke-type). Following are the coordinates of the line: M means "moveTo", because it is uppercase it means absolute coordinates, l, means "lineTo" (lower case refers to relative coordinates). In this case we therefore deal with a line-segment with two vertices.

  <path class="fil0 str6" d="M113 1084c2,9 14,23 4,29 ... -8,21 -12,31
This path-element shares the same style attributes but has more vertices. Here we not only connect the vertices, the c statement forms together with the following coordinate pairs (tangents) a cubic Bézier curve.

After additional group-elements the SVG-file is closed with:

</svg>