Scalable Vector Graphics for webmapping


Published on

Scalbale Vector Graphics, integrated with HTML5 and Canvas is the 'backbone' of the modern web-aplication. SVG is the Open Standaard for high-quality, interactive animated graphics on the Web, and therefore very suitable for Web cartography and Web mapping

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Scalable Vector Graphics for webmapping

    1. 1. Scalable Vector Graphics Barend Köbben kobben@itc.nlDepartment of Geo-information Processing
    2. 2. Scalable Vector Graphics (SVG)SVG is the XML for Graphics (W3C standard) It offers:  graphic quality  scalability  interactivity  animated & dynamic mapsDepartment of Geo-information Processing
    3. 3. SVG: graphic quality (1)  all usual operations of 2D vector graphics…  paths can be closed or open  paths can be filled with colour, gradients, patterns, etc.  attributes can control line style, dash, joining, miter, etc.  shortcuts for rectangles, arcs, circles, splines, etc. … + in-line raster (jpeg, gif, png)  text (as fonts, search/index, UNICODE)  all anti-aliasedDepartment of Geo-information Processing
    4. 4. SVG: graphic quality (2) •clipping, masking •filter operationsDepartment of Geo-information Processing
    5. 5. SVG: scalability  vector elements are resolution-independent  zoom, pan  transformable, user defined ‘coordinate-spaces’  everything can be transformed (rotated, skewed, translated, etc) separately  visualisation depending on users needs and possibilities  use of CSS (cascading style sheets)Department of Geo-information Processing
    6. 6. SVG: interactivityDeclarative (in SVG objects) <circle id="c1" cx="100" cy="100" r="50"> <animate id="c1" attributeName="r" from="50" to="100" dur="3s" begin="click"/> </circle>Procedural (scripting ECMAscript = Javascript) <script type="text/ecmascript"> function clickCircle(evt) { alert(“you clicked me!“); } </script>Department of Geo-information Processing
    7. 7. SVG: animated & dynamic mapsdeclarative animation:  dynamic change of object attributes  declarative syntax (limited file size)  animation client-sideDepartment of Geo-information Processing
    8. 8. SVG implementation: format development Department of Geo-information Processing
    9. 9. Implementation: Viewers  Opera, Webkit (Safari, Google Chrome), Mozilla Firefox  mobile viewers such as QuickOffice BitFlash, Ikivo, and the iPhone version of Safari,  Apache Batik for standalone viewer  Internet Explorer: have to use plugins/emulators  SVGweb (Google) – Javascript + Flash lib  Raphael (Dmitry Baranovskiy) – Javascript + VML lib  Adobes SVGviewer plugin (EOL)  growing and largely stableDepartment of Geo-information Processing
    10. 10. Implementation: Authoring  Export from (drawing)software (Illustrator,, etc…)  Export from GIS & conversion tools  easy, limited in possibilities  BATIK project (Java subclass for Javas Graphics2D plus direct SVG DOM implementation)  Server-side integration in XML solutions  Javascript frameworks (e.g. D3.js)  powerful, developers solutions  SVG authoring software:  Lacking: no “consumer” solutionDepartment of Geo-information Processing
    11. 11. SVG in WebGIS clients: OpenLayersDepartment of Geo-information Processing
    12. 12. Mapping moving objects: IcebergsDepartment of Geo-information Processing
    13. 13. r g .o e n o p v g sDepartment of Geo-information Processing
    14. 14. of Geo-information Processing