Introduction and step by step tutorial

1. Scalable Vector Graphics - SVG Prof. Dr.-Ing. Franz-Josef Behr Tim Berners-Lee cited by Opera, http://www.opera.com/features/svg/index.dml

3. Context SVG XLink XSL Client-Side- Technologies Internet-Mapping / GIS CIV Data exchange formats GML WMS / WFS Server-Side- Technologies Data base systems Java Internet Technology CSS DOM Dokument Geoemtrie Résumée Examples Introduction

4. Delivering SVG Documents in the Internet Internet http Webserver http CGI protocol Document root Static SVG Documents Server side Programs Dynamic Generation of SVG documents Introduction Dokument Geoemtrie Résumée Examples Client "User Agent" SVG Viewer

6. The famous Vienna Example http://www.karto.ethz.ch/neumann/cartography/vienna/ Dokument Geoemtrie Résumée Examples Introduction

7. Campus Singapore Polytechnic (Master Thesis 2004)

8. Campus Dresden University http://www.carto.net/papers/svg/campus_dresden/ Einleitung Dokument Geoemtrie Résumée Beispiele Introduction

9. Tuerlersee: Interactivity http://www.carto.net/papers/svg/tuerlersee/ Einleitung Dokument Geoemtrie Résumée Beispiele

10. Hill shading Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/

11. Tuerlersee: Height profile Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/

12. Dynamic process of the Gruben glacier, Switzerland http://www.carto.net/papers/svg/gruben_glacier/ Introduction Dokument Geoemtrie Résumée Beispiele

16. Coordinate systems in SVG, Canvas and Viewport +x +y Canvas View- port Dokument Geoemtry Résumée Introduction Beispiele Examples

17. SVG-Fragment as part of a XML document <?xml version=&quot;1.0&quot; standalone=&quot;yes&quot;?> <parent xmlns=&quot;http://example.org&quot; xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;> <!-- parent contents here --> <svg:svg width=&quot;4cm&quot; height=&quot;8cm&quot;> <svg:ellipse cx=&quot;2cm&quot; cy=&quot;4cm&quot; rx=&quot;2cm&quot; ry=&quot;1cm&quot; /> </svg:svg> <!-- ... --> </parent> Source: http://www.w3.org/TR/SVG11/struct.html#NewDocumentOverview Document Geoemtry Résumée Introduction Beispiele Examples

18. Implementation of your own SVG map Geoemtry Résumée Introduction Beispiele Examples Document <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0 0 240 160&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> ... </svg>

22. Our Example... <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0 0 240 160&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> <title>Map Example</title> <desc> Map which shows use of different SVG-elements and functionalitites. </desc> </svg> Insert 2 Document Geoemtry Résumée Introduction Beispiele Examples

24. SVG DTD <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> System Identifier f o r SVG 1.1 Public Identifier for SVG 1.1: Name of the DTD Dovument Geoemtry Résumée Introduction Beispiele Examples

26. Our Example... <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot; http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd &quot; [ <!ENTITY mapTitle &quot;SVG Map&quot;> <!ENTITY animDuration &quot;10s&quot;> ]> Document Geoemtry Résumée Introduction Beispiele Examples

29. Rectangle <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120&quot;/> <rect ... fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot; /> Coordinates left upper corner width height Fill color Border color Line width of border Document Geoemtry Résumée Introduction Beispiele Examples

30. Our Example... ... <desc> Map which shows use of different SVG-elements and functionalitites. </desc> <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120&quot; fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot;/> </svg> Document Geoemtry Résumée Introduction Beispiele Examples

34. Line <line x1=&quot;10&quot; y1=&quot;120&quot; x2=&quot;50&quot; y2=&quot;80&quot;/> Coordinates starting point Coordinates end point Document Geoemtry Résumée Introduction Beispiele Examples

36. Circles <circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;3&quot;/> Coordinates center point Radius Document Geoemtry Résumée Introduction Beispiele Examples

41. Text elements <text x=&quot;15&quot; y=&quot;135&quot; >AbcDef </text> <text ... style=&quot;font-family:Arial;font-size:6 >... </text> Position Content Font size Document Geoemtry Résumée End-Tag Start-Tag Introduction Beispiele Examples Style property

51. Result Document Geoemtry Résumée Introduction Beispiele Examples

53. Our Example... <a xlink:href=&quot;http://www.fewo-wuerzburg.de/&quot;> <g transform=&quot;translate(65,110)&quot;> <use xlink:href=&quot;#house&quot; x=&quot;0&quot; y=&quot;0&quot; transform=&quot;scale(1.5)&quot;/> </g> </a> Insert 9 Introduction Document Geoemtry Résumée Examples

54. Filter Introduction Document Geoemtry Résumée Examples

55. Filter effects Introduction Document Geoemtry Résumée Examples

56. Our Example... <defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> <filter id=&quot;schatten&quot;> <feGaussianBlur stdDeviation=&quot;5&quot; /> </filter> … <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120„ transform=&quot;translate(3, 3)„ style=&quot;filter:url(#schatten); fill='#999999' stroke='#999999‚ stroke-width='1'„ /> Insert 10 Introduction Document Geoemtry Résumée Examples

57. Result Introduction Document Geoemtry Résumée Examples

60. Result Document Geoemtry Résumée Introduction Beispiele Examples

63. Result Document Geoemtry Résumée Introduction Beispiele Examples

66. Switching Layer (groups) on and off <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;> var svgmap; //global variable function initializeMap() { svgmap = document.main_map.getSVGDocument(); } function layerOnOff (checkbox,layer_name) { var svg_layer; svg_layer = svgmap.getElementById(layer_name); if (checkbox.checked) { svg_layer.setAttribute(&quot;visibility&quot;, &quot;visible&quot;); //Show layer. } else { svg_layer.setAttribute(&quot;visibility&quot;, &quot;hidden&quot;); //Hide layer. } }</script> Dokcment Geoemtry Résumée Accessing the DOM Introduction Examples

68. Result Einleitung Document Geoemtry Résumée Beispiele Introduction Examples