Scalable Vector Graphics for webmapping

Department of Geo-information Processing

Scalable Vector GraphicsScalable Vector GraphicsBarend Köbben

kobben@itc.nl

Department of Geo-information Processing

Scalable Vector Graphics (SVG)Scalable Vector Graphics (SVG)

SVG is the XML for Graphics (W3C standard)

It offers: graphic quality scalability interactivity animated & dynamic maps

Department of Geo-information Processing

SVG: graphic quality (1) 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-aliased

Department of Geo-information Processing

SVG: graphic quality (2)SVG: graphic quality (2)

•clipping, masking

•filter operations

Department of Geo-information Processing

SVG: scalabilitySVG: scalability

visualisation depending on users needs and possibilities use of CSS

(cascading style sheets)

vector elements are resolution-independent zoom, pan

transformable, user defined ‘coordinate-spaces’ everything can be transformed (rotated,

skewed, translated, etc) separately

Department of Geo-information Processing

SVG: interactivitySVG: interactivity

Declarative (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 mapsSVG: animated & dynamic maps

declarative animation: dynamic change of object attributes declarative syntax (limited file size) animation client-side

Department of Geo-information Processing

SVG implementation: format developmentSVG implementation: format development

Department of Geo-information Processing

Implementation: ViewersImplementation: 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 Adobe's SVGviewer plugin (EOL)

growing and largely stable

Department of Geo-information Processing

Implementation: AuthoringImplementation: Authoring

Export from (drawing)software (Illustrator, OpenOffice.org, etc…)

Export from GIS & conversion tools

easy, limited in possibilities

BATIK project (Java subclass for Java's 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” solution

Department of Geo-information Processing

SVG in WebGIS clients: OpenLayersSVG in WebGIS clients: OpenLayers

Department of Geo-information Processing

Mapping moving objects: IcebergsMapping moving objects: Icebergs

Department of Geo-information Processing

svgopen.org

Department of Geo-information Processing

linkslinks

svgopen.org

www.w3.org/standards/techs/svg#w3c_all

www.tutorialspoint.com/html5/html5_svg.htm

svg-wow.org