Scalable Vector Graphics for webmapping

Scalable Vector Graphics Barend Köbben kobben@itc.nlDepartment of Geo-information Processing

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

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

SVG: graphic quality (2) •clipping, masking •filter operationsDepartment of Geo-information Processing

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

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

SVG: animated & dynamic mapsdeclarative animation:  dynamic change of object attributes  declarative syntax (limited file size)  animation client-sideDepartment of Geo-information Processing

SVG implementation: format development Department of Geo-information Processing

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

Implementation: Authoring  Export from (drawing)software (Illustrator, OpenOffice.org, 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

SVG in WebGIS clients: OpenLayersDepartment of Geo-information Processing

Mapping moving objects: IcebergsDepartment of Geo-information Processing

r g .o e n o p v g sDepartment of Geo-information Processing

linkssvgopen.orgwww.w3.org/standards/techs/svg#w3c_allwww.tutorialspoint.com/html5/html5_svg.htmsvg-wow.orgDepartment of Geo-information Processing

Scalable Vector Graphics for webmapping

by ITC – University of Twente, Faculty of Geo-Information Science and Earth Observation on Mar 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Scalable Vector Graphics for webmapping — Presentation Transcript