Scalable Vector Graphics

1,315 views
1,271 views

Published on

Introduction and step by step tutorial

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,315
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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>

    ×