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

carto:papers:svg:examples:basic:layers

Example for Canvas and Layers


Visible Layers
 Relief  Cities
 Rivers  Borders

Please try with the help of this simple SVG-example the elementary functions of the Viewer:

  • Zooming: with the help of the CTRL-Key (or Apple-Key) one can drag a rectangle above the area one wishes to zoom in.
    With the right mouse button (CTRL-Key + mouse click on the Mac) one gets a context menu, where you can choose step-by-step zooming and can go back to the original extent.
  • Zoom Out: like above, but with SHIFT-Key pressed.
  • Panning: Press the ALT-Key and move the mouse cursor while a "hand-icon" appears.
  • Anti-Aliasing: Maybe turned on and off with the help of the context menue. ("Higher Quality").
  • Layers can be turned on and off like in traditional GIS, Graphics and DTP software.

To see the higher quality and precision of this vector graphics compared to traditional raster graphics, you can see the same example with a larger extent. For returning to this page please use the "Back-Button" of your browser.

Files used

Right-click, save ...

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 Bzier curve.

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

</svg>




Last modified: Saturday, 30-May-2009 11:45:57 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/samples/canvas.shtml
del.icio.us Add this page to del.icio.us