Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scalable Vector Graphics

Introduction and step by step tutorial

  • Login to see the comments

Scalable Vector Graphics

  1. 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
  2. 2. Outline <ul><li>Introduction: Technological context </li></ul><ul><li>Examples </li></ul><ul><li>Document structure </li></ul><ul><li>Geometry elements – implementation of an won SVG mapping examples </li></ul><ul><li>Conclusions </li></ul>Introduction Document Geoemtry Résumée Examples
  3. 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. 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 &quot;User Agent&quot; SVG Viewer
  5. 5. Examples <ul><li>Vienna </li></ul><ul><li>Campus Singapore Polytechnic </li></ul><ul><li>Campus TU Dresden </li></ul><ul><li>Tuerlersee </li></ul><ul><li>... </li></ul>Dokument Geoemtrie Résumée Examples Introduction
  6. 6. The famous Vienna Example http://www.karto.ethz.ch/neumann/cartography/vienna/ Dokument Geoemtrie Résumée Examples Introduction
  7. 7. Campus Singapore Polytechnic (Master Thesis 2004)
  8. 8. Campus Dresden University http://www.carto.net/papers/svg/campus_dresden/ Einleitung Dokument Geoemtrie Résumée Beispiele Introduction
  9. 9. Tuerlersee: Interactivity http://www.carto.net/papers/svg/tuerlersee/ Einleitung Dokument Geoemtrie Résumée Beispiele
  10. 10. Hill shading Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/
  11. 11. Tuerlersee: Height profile Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/
  12. 12. Dynamic process of the Gruben glacier, Switzerland http://www.carto.net/papers/svg/gruben_glacier/ Introduction Dokument Geoemtrie Résumée Beispiele
  13. 13. Mouse over-Effects <ul><li>onmouseover=&quot;mouseover('Biotope_2_125','fill','red')&quot; onmouseout=&quot;mouseout ('Biotope_2_125','fill')&quot;  dynamic display of attributes </li></ul>http://www.gis-news.de/svg/samples/bio/bio.htm Introduction Dokument Geoemtrie Résumée Examples
  14. 14. Integration of Raster data <ul><li>Integration of remotely sensed data Example at http://www.microimages.com/svg/newzealand.svgz </li></ul><ul><li>Resampling  enhanced quality </li></ul>Zoom in 4x Introduction Document Geoemtry Résumée Examples
  15. 15. SVG-Document Structure <ul><li>coordinate system </li></ul><ul><li>Canvas, Viewport </li></ul><ul><li>Basic struktur </li></ul><ul><li>Descriptive elements </li></ul>Document Geoemtrie Résumée Introduction Beispiele Examples
  16. 16. Coordinate systems in SVG, Canvas and Viewport +x +y Canvas View- port Dokument Geoemtry Résumée Introduction Beispiele Examples
  17. 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. 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>
  19. 19. Create a SVG-Document I <ul><li>Open empty ASCII file in notepad </li></ul><ul><li>Insert XML-Prolog </li></ul><?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <ul><li>Insert DTD </li></ul><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd > <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0cm 0cm 240cm 160cm&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> </svg> <ul><li>Insert SVG-”Container” with size specifications </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  20. 20. Create a SVG-Document II <ul><li>Insert descriptional elements </li></ul><svg ...> <title>Map Example</title> <desc> Map which shows use of different SVG-elements and functionalitites. </desc> <ul><li>Save as “.svg” file, i. e. mapexample.svg </li></ul><ul><li>Open in SVG-Viewer (i. e. Adobe-SVG-Plugin in Internet Explorer) , testing... </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  21. 21. <title>, <desc> <ul><li><title> Title of a document </title> </li></ul><ul><li><desc>This is a description</desc> </li></ul><ul><li>not „rendered“ </li></ul><ul><li>Additional informationen, i.e. for „tool tip“ </li></ul>http://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements Document Geoemtry Résumée Introduction Beispiele Examples
  22. 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
  23. 23. Stylesheets <ul><li>... </li></ul><ul><li><svg width=&quot;440&quot; height=&quot;300&quot;> </li></ul><ul><li><style type=&quot;text/css&quot;><![CDATA[ </li></ul><ul><li>text { fill:red;font-family:Arial,Helvetica; </li></ul><ul><li>font-size:14px;font-stretch:ultra-expanded; </li></ul><ul><li>font-weight:bold} </li></ul><ul><li>]]> </li></ul><ul><li></style> </li></ul><ul><li><text x=&quot;2px&quot; y=&quot;20px&quot;>This Text is rendered with StyleSheets.</text> </li></ul><ul><li></svg> </li></ul>Introduction Document Geoemtry Résumée Beispiele Examples Insert 1c The styling will be applied later on after inserting a text element.
  24. 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
  25. 25. Entities <ul><li>„ Placeholder“ </li></ul><ul><li>Known from HTML and XML </li></ul><ul><li>Any entity can be re-used (i.e. &quot;instanced&quot;) in the SVG document: </li></ul><!ENTITY mapTitle &quot;SVG Map&quot;> < text x=&quot;15&quot; y=&quot;135 &quot;>&mapTitle; </text> Document Geoemtry Résumée The entity maptitle is defined. Introduction Beispiele Examples
  26. 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
  27. 27. Geometrical Shapes <ul><li><rect>, <circle>, <line>, ... </li></ul><ul><li>SVG Example </li></ul><ul><li>Style properties </li></ul><ul><li>Filters </li></ul><ul><li>Gradients </li></ul><ul><li>Animations </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  28. 28. Geometri cal E lement s <ul><li>rectangle <rect ... </li></ul><ul><li>circle : <circle ... </li></ul><ul><li>ellipse: <ellipse cx=&quot;200&quot; cy=&quot;135&quot; rx=&quot;50&quot; ry=&quot;20&quot; /> </li></ul><ul><li>Lin e : <line ... </li></ul><ul><li>Polyline : <polyline points=&quot;160,200 180,230 200,210 234,220&quot; /> </li></ul><ul><li>Polygon: <polygon points=&quot;350,75 379,161 569,111 397,215 423,301 350,250 277,301&quot; /> </li></ul><ul><li>Path: <path... </li></ul><ul><li>Text: <text... </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  29. 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. 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
  31. 31. Rounded rect <ul><li>Not used in our example. </li></ul><svg width=&quot;440&quot; height=&quot;300&quot;> <rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;60&quot; height=&quot;30&quot; rx=&quot;20&quot; ry=&quot;50&quot; style=&quot;stroke:blue;fill:none&quot;/> </svg> Document Geoemtry Résumée Introduction Beispiele Examples
  32. 32. Polyline <ul><li>Not used in our example </li></ul><polyline fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot; points=&quot;50,375 150,375 150,325 250,325 250,375 ... 950,375 950,25 1050,25 1050,375 1150,375&quot; />
  33. 33. polygon <ul><li>Not used in our example </li></ul><polygon points=&quot;223.5,123.034 276,213.966 171,213.966&quot; style=&quot;fill:rgb(126,14,83); stroke:rgb(0,0,128); stroke-width:1&quot;/>
  34. 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
  35. 35. Our Example... <ul><li>Group of streets, created by line-elements </li></ul><g id=&quot;streets&quot; stroke=&quot;yellow&quot; stroke-width=&quot;0.9&quot;> <line x1=&quot;10&quot; y1=&quot;120&quot; x2=&quot;50&quot; y2=&quot;80&quot;/> <line x1=&quot;50&quot; y1=&quot;80&quot; x2=&quot;150&quot; y2=&quot;80&quot;/> <line x1=&quot;60&quot; y1=&quot;40&quot; x2=&quot;60&quot; y2=&quot;80&quot;/> <line x1=&quot;100&quot; y1=&quot;40&quot; x2=&quot;100&quot; y2=&quot;80&quot;/> <line x1=&quot;140&quot; y1=&quot;40&quot; x2=&quot;140&quot; y2=&quot;80&quot;/> <line x1=&quot;80&quot; y1=&quot;80&quot; x2=&quot;80&quot; y2=&quot;130&quot;/> <line x1=&quot;135&quot; y1=&quot;80&quot; x2=&quot;135&quot; y2=&quot;130&quot;/> <line x1=&quot;40&quot; y1=&quot;90&quot; x2=&quot;20&quot; y2=&quot;70&quot;/> </g> Document Geoemtry Résumée Insert 3 Introduction Beispiele Examples
  36. 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
  37. 37. Our Example... <ul><li>Group of trees, composed by circles </li></ul><g id=&quot;trees&quot; stroke=&quot;#009900&quot; fill=&quot;#99FF99&quot; stroke-width=&quot;0.4&quot;> <circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;40&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;50&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;60&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;70&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;80&quot; cy=&quot;30&quot; r=&quot;3&quot;/> </g> Document Geoemtry Résumée Introduction Beispiele Examples
  38. 38. Path <ul><li>Parameter: </li></ul><ul><ul><li>moveto (m,M) + x,y </li></ul></ul><ul><ul><li>lineto (l,L) + x,y </li></ul></ul><ul><ul><li>horizontalLineTo(h,H) + x , verticalLineTo(v,V) + y </li></ul></ul><ul><ul><li>closePath (z,Z : ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath . If a &quot;closepath&quot; is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath. </li></ul></ul><ul><ul><li>Uppercase commands -> absolute coordinates </li></ul></ul><ul><ul><li>Lowercase commands -> relative coordinates </li></ul></ul><path d=&quot;M 120 , 130L 130 , 120L 130 , 110 125 , 105 115 , 100 110 , 115 110 , 125 z&quot;/> Document Geoemtry Résumée Introduction Beispiele Examples
  39. 39. <ul><ul><li>Cubic Bézier : (c,C; s,S) </li></ul></ul><ul><ul><li>quadrati c Bezier s (q,Q; t,T) </li></ul></ul><ul><ul><li>Elliptic al arcs (a,A) </li></ul></ul><ul><li>Not used in our example </li></ul>
  40. 40. Our Example... <ul><li>Perhaps a lake ... Color will defined later! </li></ul>Dokument Geoemtry Résumée <circle cx=&quot;80&quot; cy=&quot;30&quot; r=&quot;3&quot;/> </g> <path d=&quot;M 120 , 130L 130 , 120L 130 , 110 125 , 105 115 , 100 110 , 115 110 , 125 z&quot;/> </svg> Introduction Beispiele Examples Insert 5
  41. 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
  42. 42. Text: Additional possibilities <ul><li>Rotated Text: <text x=&quot;32&quot; y=&quot;66&quot; transform=&quot;rotate(20)&quot;>Strasse</text> </li></ul><ul><li>Multiline Text a nd Sub groups <text x=&quot;140&quot; y=&quot;73&quot;>Mehrzeilig: <tspan x=&quot;140&quot; y=&quot;98&quot;>erste Zeile</tspan> <tspan x=&quot;140&quot; y=&quot;123&quot;>zweite Zeile</tspan> </text> </li></ul><ul><li>Colors: tspan-Elemente with different color : <text class=&quot;cafl&quot;> The color <tspan class=&quot;yel&quot;> yellow </tspan>!</text> </li></ul><ul><li>Character spacing <text x=&quot;44&quot; y=&quot;255&quot; class=&quot;cafl&quot;> A <tspan dy=&quot;-9&quot;> h igh </tspan> <tspan rotate=&quot;10 35 50 65 80&quot; dx=&quot;0 5 9 9 12&quot;> word ! </tspan> </text> </li></ul>Dokument Geoemtrie Résumée Introduction Beispiele Examples
  43. 43. Text on Paths: <ul><li><path id=&quot; LabelPath &quot; style=&quot;display:none&quot; d=&quot;M1744 -439 Q1889 -171 2034 97&quot;/> </li></ul><ul><li><text style=&quot;fill:rgb(0,0,0);stroke-width:0.015em;stroke:rgb(255,255,255); font-family:'Arial';text-anchor:middle;font-size:40;letter-spacing:0.15em&quot;> <textPath xlink:href=&quot;#LabelPath&quot; startOffset=&quot;50%&quot;><tspan dy=&quot;0.35em&quot; dx=&quot;0&quot;>KENYON CRES</tspan></textPath> </text> </li></ul>Source: http://www.dbxgeomatics.com/SVGMapMakerSamples.asp?Language= Document Geoemtry Résumée Introduction Beispiele Examples
  44. 44. text element: Our Example... <ul><li>We add a simple text using one of our entities. </li></ul>... <text x=&quot;15&quot; y=&quot;135&quot; style=&quot;font-family:Arial;font-size:6&quot;>&mapTitle;</text> </svg> Insert 6 Document Geoemtry Résumée Introduction Beispiele Examples
  45. 45. Definitions: The <defs> element <ul><li>Container-Element </li></ul><ul><li>contains definitions of Objects, which can be used (referenced) by other objects (single elements, groups, symbols, gradients or filters). </li></ul><ul><li>Elements only visible, if referenced in the SVG document. </li></ul><ul><li> Elements, which are references, must be placed always in the defs container! </li></ul><defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> </defs> Document Geoemtry Résumée Introduction Beispiele Examples
  46. 46. The <use>-Element <ul><li>template object that can be re-used (i.e., &quot;instanced&quot;) in the SVG document via a 'use' element . </li></ul><ul><li>The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system. </li></ul><use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> Document Geoemtry Résumée Introduction Beispiele Examples Application of the xlink standard The referenced document fragment is inserted, not hyperlinked!
  47. 47. Our Example... <ul><li>Definition... </li></ul><svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0cm 0cm 240cm 160cm&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> <title>Map Example</title> <desc> Rectangle with red border and light blue interior, with gray shadow rectangle. </desc> <defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> </defs> <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120„ fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot; /> Insert 7 , 1. Part Document Geoemtry Résumée Introduction Beispiele Examples
  48. 48. Our Example... <ul><li>... and use. </li></ul><g id=&quot;buildings&quot; stroke=&quot;#FF5500&quot; fill=&quot;#FF9999&quot; stroke-width=&quot;0.4&quot;> <rect x=&quot;65&quot; y=&quot;70&quot; width=&quot;5&quot; height=&quot;5&quot;/> <rect x=&quot;65&quot; y=&quot;60&quot; width=&quot;5&quot; height=&quot;5&quot;/> <use xlink:href=&quot;#house&quot; x=&quot;65&quot; y=&quot;50&quot; /> <!-- left side --> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;70&quot; /> <!-- left side --> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;70&quot; /> <!-- right side --> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;70&quot; /> <!-- right side --> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;90&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;110&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> </g> Insert 7 , 2. Part Document Geoemtrie Résumée Introduction Beispiele Examples
  49. 49. Transformations <ul><li>General Syntax: <g transform=command ( parameter )&quot;> </li></ul><ul><li>scale </li></ul><ul><li>rotate </li></ul><ul><li>translate </li></ul><ul><li>skewX | skewY </li></ul><ul><li>matrix ( general transformation ). </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  50. 50. Our Example... <ul><li>Mind the order of transformations! </li></ul><!-- bottom left road, left side --> <g transform=&quot;translate(65,90)&quot;> <use xlink:href=&quot;#house&quot; x=&quot;0&quot; y=&quot;0„ transform=&quot;scale(1.5)&quot;/> </g> Insert 8 Document Geoemtry Résumée <ul><li>Exercise: Change the order of the transformations! How is the position of the house affected? </li></ul>Introduction Beispiele Examples
  51. 51. Result Document Geoemtry Résumée Introduction Beispiele Examples
  52. 52. Hyperlinks <ul><li>Anchor tag, comparable to HTML, </li></ul><ul><li>However: href is part of the xlink name space. </li></ul><a xlink:href=&quot;http://www.fewo-wuerzburg.de/&quot;> ... </a> Name spcae xlink ‘ a‘-Element href-Attribut URL Document Geoemtry Résumée Introduction Beispiele Examples
  53. 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. 54. Filter Introduction Document Geoemtry Résumée Examples
  55. 55. Filter effects Introduction Document Geoemtry Résumée Examples
  56. 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. 57. Result Introduction Document Geoemtry Résumée Examples
  58. 58. Gradients <ul><li>… consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. </li></ul><ul><li>Types </li></ul><ul><ul><li>Linear gradients </li></ul></ul><ul><ul><li>Radial gradients </li></ul></ul>Introduction Document Geoemtry Résumée Examples
  59. 59. Our Example... <ul><li>In the defs section </li></ul>Insert 11 Introduction Document Geoemtry Résumée Examples <radialGradient id=&quot;radial&quot; cx=&quot;50%&quot; cy=&quot;90%&quot; r=&quot;60%&quot; fx=&quot;60%&quot; fy=&quot;80%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(0,15,150);stop-opacity:1&quot;/> <stop offset=&quot;1%&quot; style=&quot;stop-color:rgb(128,128,255);stop-opacity:1&quot;/> <stop offset=&quot;50%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> <ul><li>Around our lake: </li></ul><g id=&quot;lake&quot; stroke=&quot;#0000FF&quot; fill=&quot;url(#radial)&quot; stroke-width=&quot;0.4&quot;> <path d=&quot;M 120 130L 130 120L 130 110 125 105 115 100 110 115 110 125z&quot;/> </g>
  60. 60. Result Document Geoemtry Résumée Introduction Beispiele Examples
  61. 61. Animation <ul><li>SVG supports the ability to change vector graphics over time. </li></ul><ul><li>You can animate nearly whatever you want: Positions, colors, gradients, sizes, … </li></ul>Document Geoemtry Résumée Introduction Beispiele Examples
  62. 62. Our Example... <ul><li>In defs section </li></ul><ul><li>Before </svg>: </li></ul>Insert 12 Docment Geoemtry Résumée Introduction Beispiele Examples <symbol id=&quot;car&quot; overflow=&quot;visible&quot;> <rect x=&quot;-1&quot; y=&quot;-1&quot; width=&quot;4&quot; height=&quot;2&quot; style=&quot;fill: rgb(240,65,25); fill-opacity: 0.8; stroke: rgb(55,0,0); stroke-width:0.1&quot; /> </symbol> <path id=&quot;carpath&quot; d=&quot;M 10 120 50 80 150 80&quot; /> <g id=&quot;AnimationPaths&quot;> <use xlink:href=&quot;#car&quot;> <animateMotion id=&quot;animMotionCar&quot; dur=&quot;10s;&quot; repeatCount=&quot;indefinite&quot; rotate=&quot;auto-reverse&quot;> <mpath xlink:href=&quot;#carpath&quot;/> </animateMotion> </use> </g>
  63. 63. Result Document Geoemtry Résumée Introduction Beispiele Examples
  64. 64. Exercise <ul><li>Add four wheels to the car! </li></ul>
  65. 65. SVG in HTML <ul><li>embed (deprecated, but supported by most browsers) <embed src=&quot;canvas.svg&quot; width=&quot;350&quot; height=&quot;176&quot; type=&quot;image/svg+xml&quot; name=&quot;emap&quot;> </li></ul><ul><li>o bject ( HTML 4 Strict standard ): <object type=&quot;image/svg+xml&quot; name=&quot;omap&quot; data=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot;></object> </li></ul><ul><li>Iframe (only HTML 4 Transitional standard): <iframe src=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot; name=&quot;imap&quot;></iframe> </li></ul> http:// www.carto.net/papers/svg/samples/svg_html.shtml Document Geoemtry Résumée Introduction Beispiele Examples
  66. 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
  67. 67. Our Example... <ul><li>See file mapexample.html </li></ul><embed name=&quot;main_map&quot; width=&quot;800&quot; height=&quot;400&quot; src=&quot;mapexample.svg&quot; type=&quot;image/svg+xml&quot; pluginspage=&quot;http://www.adobe.com/svg/viewer/install/&quot;> <form name=&quot;onoff&quot;> <input type=checkbox checked value=&quot;true&quot; onClick= &quot;layerOnOff(this,'buildings');&quot; >Layer Buildings <input type=checkbox checked value=&quot;true&quot; onClick= &quot;layerOnOff(this,'streets');&quot; >Layer Streets </form> Einleitung Document Geoemtry Résumée Introduction Examples
  68. 68. Result Einleitung Document Geoemtry Résumée Beispiele Introduction Examples
  69. 69. Résumée <ul><li>Integration of vector and raster based geodata including attribute values , </li></ul><ul><li>excellent visualization, </li></ul><ul><li>high level of interactivity (zoom, pan, …), </li></ul><ul><li>Relation between different elements / groups (overview map / detail map, map / attributes), </li></ul><ul><li>interactive analyse / query of data. </li></ul>Einleitung Document Geoemtry Résumée Examples Introduction
  70. 70. SVG <ul><li>XML-Language </li></ul><ul><li>File size: often quite small, pute text. </li></ul><ul><li>High resolution graphics, no quality loss by zoom. </li></ul><ul><li>High colour </li></ul><ul><li>Animations </li></ul><ul><li>DOM (Document Object Model)  Graphics can modified using JavaScript (and other programming languages) </li></ul><ul><li>Filter, shadow, ... </li></ul>Einleitung Document Geoemtry Résumée Beispiele
  71. 71. GI-Systems and SVG <ul><li>Supported by: </li></ul><ul><ul><li>MicroImages TNTmips, http://www.microimages.com/documentation/SVG.htm </li></ul></ul><ul><li>Important for WMS and visualization of GML </li></ul><ul><li>Creating SVG using Add-ons: </li></ul><ul><ul><li>ArcView ( Shape2SVG , ...) </li></ul></ul><ul><ul><li>MapInfo ( Map2SVG , SVGMapMaker , ...) </li></ul></ul><ul><ul><li>Manifold (Master Thesis P&GI) </li></ul></ul><ul><ul><li>FME, http://www.safe.com/reader_writerPDF/svg.pdf </li></ul></ul>
  72. 72. Links <ul><li>The SVG-Website for cartography / GIS: http:// www.carto.net / </li></ul><ul><li>SVG-Tutorials: http:// svg.tutorial.aptico.de / http:// www.datenverdrahten.de / http://www.scale-a-vector.de/ http://www.s-v-g.net/faq.htm </li></ul><ul><li>SVG / PDF, PostScript: http:// www.adobe.com/svg / </li></ul><ul><li>http://www.siliconpublishing.org/svgfaq/Core.asp </li></ul><ul><li>Link lists: http://www.carto.net/papers/svg/links/ http://www.gis-news.de/svg/svg.htm </li></ul>for students interest in games: http:// www.battlebots.com / Einleitung Dokument Geoemtrie Résumée Beispiele
  73. 73. Mailinglisten <ul><li>http://lists.w3.org/Archives/Public/www-svg/ </li></ul><ul><li>http:// groups.yahoo.com / group / svg-developers / </li></ul>
  74. 74. Tools <ul><li>Viewer: </li></ul><ul><ul><li>Adobe’s Viewer: http:// www.adobe.com/svg/viewer/install/main.html </li></ul></ul><ul><ul><li>Batik SVG Toolkit: http:// xml.apache.org /batik/ </li></ul></ul><ul><ul><li>CSIRO SVG Toolkit: http:// sis.cmis.csiro.au/svg / </li></ul></ul><ul><li>Authoring tools: </li></ul><ul><ul><li>Adobe’s GoLive, http://www.adobe.com/products/golive/main.html </li></ul></ul><ul><ul><li>... </li></ul></ul>
  75. 75. SVG <ul><li><thank you> </li></ul><ul><li>Have fun with SVG! </li></ul><ul><li></thank you> </li></ul>

×