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

carto.net SVG tutorial, example and demonstration site

These samples of cartographic applications shall help you getting started with SVG ("Basic examples"). The basic examples come with commented source code. The more complex examples should showcase and demonstrate the usefulness of SVG for webmapping purposes. Please understand and apologize that we can't afford the time to comment the more complex, javascript driven examples.

Please inform the editors (emails given on the bottom of the respective pages) about typos, mistakes or alternative, more elegant methods to do similar things. If you want to add a tutorial, provide a related example or would like to see one particular topic addressed here, please contact the editor of this content page, André M. Winter. Also please see the technical notes below regarding the viewing of these examples. We try to keep our examples platform and viewer independent. Please understand that some of the older examples aren't under active development any more and were only tested in the older Adobe SVG viewer. As time permits we want to update the one or the other. Additional help is always welcome.

Content

Basic examples

  1. Layer and Canvas, switching them on and off, zooming und panning. (ASV3, Moz1.5+, Op9+, Wk3+, Saf, Chr, IE9+)
  2. Coordinate Transformations (ASV3, Bk, Moz1.5+, Op9+, Wk3+, Saf, Chr, IE9+).
  3. Viewbox, switch to predefined views. (ASV3, Moz1.5+, Op9+, Wk3+, Saf, Chr, IE9+)
  4. Use of CSS-Stylesheets that support both HTML and SVG files, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+)
  5. Basic Shapes (ASV3, ASV6, Bk, Moz1.5+, Op8+, Wk3+).
  6. Clipping and Masking (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+).
  7. Text, Fonts, with various styling options and effects, (ASV3, ASV6, Bk, (Op9+), (Moz1.5+), (Wk3+))
  8. Colours, Fills and Transparency (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+).
  9. Stroking: dashes and other styles (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+) - example provided by Georg Held.
  10. Fill rules on polygons (ASV3, ASV6, Bk, Moz1.5+, Op8+, Wk3+).
  11. Using (cartographic) symbols (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+).
  12. (Cartographic) patterns, (ASV3, ASV6, Bk, Op9+, Wk3+, Moz3+) - example provided by Georg Held.
  13. Publishing SVG within HTML pages (ASV3, ASV6, Moz1.5+, Op8+, Wk3+).

Interactivity and SVG GUI

  1. Manipulating the SVG Document with ECMAScript (Javascript) and the DOM (Document Object Model), (ASV3, Bk, Moz1.5+, Op9+, Wk3+, Saf, Chr, IE9+), tutorial and small examples provided by Juliana Williams and Andreas Neumann
  2. Event Handling Tutorial, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), tutorial and small examples provided by Andreas Neumann
  3. Using mouseover effects, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+).
  4. Scale Symbols on mouseover, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+).
  5. mapApp object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), required by all SVG GUI applications, can do coordinate transformations and tooltips, provided by Andreas Neumann
  6. SVG checkBox and radioButtonGroup object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  7. SVG Button object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  8. SVG selectionList object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  9. SVG combobox object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  10. SVG Window object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  11. SVG tabgroup object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  12. SVG textbox object, (ASV3, ASV6, Bk, (Moz1.5+), Op9+), provided by Andreas Neumann
  13. SVG slider object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  14. SVG scrollbar object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  15. Tooltips (part of the mapApp object), (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  16. SVG colourPicker object, (ASV3, ASV6, Bk, Moz1.5+, Op9+, Wk3+, IE9+), provided by Andreas Neumann
  17. Map Navigation Tools, (ASV3, ASV6, Bk, Moz1.5+, Op9+, (Wk3+)), tutorial and example provided by Juliana Williams and Andreas Neumann
  18. Text Flow (Rectangular), (ASV3, ASV6, (Bk), (Moz1.5+), Op9+, Wk3+, (IE9+)), tutorial and example provided by Andreas Neumann

Animation

  1. Declarative animation (Transform, Animation along a Path and Opacity), (ASV3, ASV6, Op9+, Bk1.7+, Moz4+, Wk3+).
  2. Scripted animation (Dock-Like Effect), (ASV3, ASV6, Op9+, Batik, Moz1.5+, Wk3+, IE9+), example originally from Dean Jackson.
  3. Animation along path, (ASV3, ASV6, Op9+, Bk1.7+, Moz5+).
  4. Morphing of path-elements, (ASV3, ASV6, Op9+, Wk3+, Moz5+)
  5. Animated bus track (Progressive drawing), (ASV3, ASV6, Op9+, Wk3+, Moz4+, Bk1.7+, Wk3+).
  6. Animated weather symbols (not live data), (ASV3, ASV6, Op9+, Moz5+, Wk3+).
  7. Animated Itinerary of Holidays in Japan (2004), (ASV3, ASV6, Op9+, Wk3+, Moz5+), Attention: contains sound when using ASV!
  8. Keyspline Animation Tool, (ASV3, ASV6, Op9+, Moz5+ (Wk3+)), Example provided by M. Hirtzler, published at pilat.free.fr/english/animer/keysplines.htm Pilat Informative Educative.
  9. Keytime/Value Animation Tool, (ASV3, ASV6, Op9+, Moz5+, (Wk3+)), Example provided by M. Hirtzler, published at pilat.free.fr/english/animer/keytimes.htm Pilat Informative Educative.
  10. Jumping Cubes, (ASV3, ASV6, Op9+, Bk1.7+, Wk3+, Moz5+), Example provided by A. Quint, published at www.xml.com/pub/a/2002/01/23/svg/index.html Column Sacré SVG.

Serverside SVG-Generation, Server-Client Communication

  1. Serverside SVG Generation with PHP (ASV3, ASV6, Bk, Moz1.5+, Op8+, Wk3+, IE9+)
  2. Wrapper function getData for network requests (ASV3, ASV6, Bk, Moz1.5+, Op8+, Wk3+, IE9+), builds on getURL()/postURL() and XMLHttpRequest()
  3. Integrating OGC WMS services with SVG mapping applications, by example of US terraserver and UMN map server, (ASV3, ASV6, Bk, Moz1.5+, Op9+), example provided by Juliana Williams and Andreas Neumann.
  4. Dynamic Loading of Vector Geodata for SVG Mapping Applications Using Postgis, PHP and getURL()/XMLHttpRequest(), (ASV3, ASV6, Bk, Moz1.5+, Op9+, (Wk3+)), tutorial and example provided by Juliana Williams and Andreas Neumann.

XSLT-based generation

  1. Using XSLT to create SVG content by Georg Held.

More complex JavaScript driven (carto-)graphic examples

  1. www.gpstracks.carto.net GPS Tracks in Switzerland, visualization of GPX files based on topographic maps in Switzerland (ASV3, Op9+, Moz3+, Wk3+), - example provided by O. Schnabel and M. Breitfeld, 2008
  2. www.carto.net/schnabel/mapsymbolbrewer Map Symbol Brewer, an interactive online tool to create map symbols (ASV3, ASV6, Op9+, Moz3+, Wk3+), - example provided by www.carto.net/schnabel/">O. Schnabel, 2006
  3. www.geofoto.ch/geophotomap Geofoto.ch - Geophotomap, an online browser for georeferenced photos in Switzerland (ASV3, ASV6, Op9+, Bk, Moz1.5+), - example provided by D. Meyer and A. Neumann, 2006
  4. Crime and Poverty in the USA, 2000 (ASV3, ASV6, Op9+, Bk, Moz1.5+), - example provided by Judith Gebauer and Christian Fremd, 2006, (example is slow in Firefox 1.5 and Opera 9 due to its large DOM size)
  5. Interactive Demonstration of the Dijkstra Shortest Path Algorithm (ASV3, ASV6, Op9+, Bk, Moz1.5+, Wk3+), - example provided by mcc.id.au Cameron McCormack, 2004, (mcc.id.au/2004/12/shortest-path.svg original)
  6. www.carto.net/williams/yosemite Interactive Hiking Map of the Yosemite National Park (ASV3, ASV6, Op9+, Bk, (Moz1.5+)), - example provided by Juliana Williams, 2005
  7. Zürich zieht um - Umzugsdynamik der Stadt Zürich (german user interface) (ASV3, ASV6, Bk), - example provided by Yvonne Isakowski and Corinna Heye, 2004
  8. US weather - using SOAP to show live weather data) (ASV3, ASV6), - example provided by Andreas Neumann, 2003 (description en français); Please note that this example relies on an external, free webservice that is not 100% reliable!
  9. US Population 2000: Ethnic structure and age distribution, using circles, piechart, stacked barchart and a pseudo population pyramid (ASV3, ASV6).
  10. Interactive and Animated Population Pyramids (ASV3, Op9+, MozSVG1.5+, (Wk3+)) - examples provided by Alan Smith, Michael Neutze, Klaus Förster, et.al, 2002-2006
  11. Interactive Glacier Animation (Gruben Glacier, Wallis, Switzerland) (ASV3) - example provided by Yvonne Isakowski, 2003
  12. Interactive Topographic Map Tuerlersee (ASV3,ASV6), with linked terrain model - example provided by Andreas Neumann, 2002-2003
  13. Interactive Campus-Map TU-Dresden (ASV3 in Internet Explorer Windows only), with mouse-over effects and animations. Direct link into SVG-project, example provided by Alexander Berger, 2002
  14. Map-Browser, Swiss 1:25.000 topographic maps (ASV3), interactive map-browser that shows metadata and preview about swiss topographic map-sheets - example provided by Yvonne Isakowski, 2002
  15. Vienna Choropleth Map (ASV3), interactive, with different variables and classes to choose, histogram function - example provided by Andreas Neumann, 1999-2003
  16. Thematic map of Europe with different diagrams (ASV3 on Internet Explorer Windows or Netscape 4.7x Windows and Mac), dynamically generated - example provided by André M. Winter, 2000

Sample Data and Symbol Collections

  1. Cartographic Symbol Collection, (ASV3, ASV6, Bk)
  2. www.boehmwanderkarten.de/redaktion/is_zeichen_signaturen.html Rolf Böhms SVG Map Symbol Collection, (ASV3, ASV6, Bk, Op, MozSVG, Saf), external link, German explanations

Necessary Viewer/Browser for the examples

Please download a SVG-Viewer plugin or browser with native SVG support (if not done so far).

Remarks: we don't provide a javascript that is checking for the existence of a SVG-viewer plugin or native SVG capabilities within your browser. You are responsible to install it yourself. In case you can't see the SVG examples or you get alerts about missing plugins, please return to this page and install an appropriate SVG plugin or an SVG enabled browser, such as the Firefox 1.5 branch or Opera 9+. Please also check your SVG viewer version. Most examples only work with the newer plugin versions. Please update to the most recent one.

Abbreviations for SVG viewers: (if the abbreviation is listed between parentheses it means that while most of the example works, there are still limitations/bugs; a plus sign after the version number of a viewer means the version indicated, plus later versions.)

Windows-Users have several options for viewing SVG files. The preferred way is to get a browser with native SVG support, such as Opera or Firefox (see additional notes on native browser support below). The most popular and most complete browser plugin for Internet Explorer is probably the Adobe SVG viewer 3 (you may download it www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html Adobe SVG download area). Adobe has decided to https://www.adobe.com/svg/eol.html discontinue the development and support of their viewer, since SVG is now increasingly available as a native browser technology. The other reason is that Adobe wants to push their own proprietary Flash solution for interactive content on the web. Windows users can also use the Java based Batik viewer (see below).

Macintosh-Users should also use a browser with native SVG support, such as Opera or Firefox (see notes below). The next generation of Safari/Webkit will also feature native SVG support. PowerPC Mac users can still use the Adobe SVG 3 viewer, which works in all MacOSX browsers (tested in Opera, Mozilla, Safari, Internet Explorer and Firefox). The Adobe SVG viewer, however, doesn't support the Intel platform and due to limitations in javascript communication between the browsers and browser plugins we can't use most browsers for interactive mapping projects that rely on HTML to SVG communication. MacOSX users can also use the Java based Batik project (see below) or browsers with native SVG support, such as Mozilla Firefox ≥ 1.5 or Opera ≥ 9 or a recent developer version of the SVG enabled Safari/Webkit application.

Linux/Unix-Users should also install a browser with native SVG support, such as Opera 9.1 or higher, or Firefox. Alternatively, one can use the Apache Batik Squiggle viewer. The KSVG team and Apple collaborate on the KSVG viewer and Webkit browser component for Apple and KDE. Progress is steady and encouraging. Please test webkit and provide bug reports! It is also worth mentioning that many tools on Linux support SVG, e.g. as an export format (e.g. Inkscape).

Java users (all Java supported platforms) looking for a standalone SVG viewer or Java developers that want to integrate SVG support in their Java Applications should have a look at Batik. Batik is a collection of several SVG tools, a browser, a renderer, font-converter and many more. (download and more infos at xml.apache.org/batik/). The Batik SVG viewer component can be embedded into your own Java programs and Batik can also be used with Java servlets at a webserver. Finally, Batik-Squiggle (the viewing component) offers a DOM-tree viewer and a javascript debugger - both features are very useful for SVG developers generating dynamic content with ECMAScript. Batik is perhaps the most complete SVG viewer when it comes to scripting/DOM support. The latest developer branch, that can be checked out using SVN, already implements some of the new SVG 1.2 features and SMIL support! Be sure to check the latest https://xmlgraphics.apache.org/batik/download.cgi#svn SVN version or download at xmlgraphics.apache.org/batik/download.cgi#snapshot" a nightly snapshot.

Native SVG support is part of the www.opera.com Opera browser since version 8. Version 8 supported SMIL animation, but no CSS and no scripting. Opera 9 supports scripting, CSS and DOM manipulations, SVG fonts, filters, as well as XSLT processing. Be sure to update your browser regularly, as new updates always contain bug fixes and new features regarding SVG. If you want to test the latest releases (not always stable) download a developers version. As of 2007-01 Opera 9.1 is the most complete native SVG implementation in a web browser. Although Opera 9 targets SVG basic, the SVG support is actually closer to SVG full. Mozilla SVG supports scripting/DOM/XSLT but no SMIL animation since version 1.5. Firefox 2.0 containts minor improvements to SVG (e.g. the <textPath/> element or some improved DOM support). Firefox 3 (currently alpha), however contains numerous SVG improvements, because it is based on a newer version of the Gecko engine and Cairo. Work on native SVG support in Safari/Webkit is progressing fast. Its is a collaboration between KDE people and Apple and will appear in future versions of Safari and Konqueror. Major advantages of native SVG support in web browsers are: better integration with other webstandards, mixed HTML/SVG pages, use of SVG as a background image, HTML inside SVG as a foreign object, Scripting across HTML/SVG and other components, SVG as a component of a Opera widget or Apple Dashboard, etc. Interesting times ahead!



Last modified: Tuesday, 10-Dec-2019 21:40:11 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/index.shtml