Scalable Vector Graphics for webmapping
-
Upload
itc-university-of-twente-faculty-of-geo-information-science-and-earth-observation -
Category
Technology
-
view
1.438 -
download
0
description
Transcript of Scalable Vector Graphics for webmapping
Department of Geo-information Processing
Scalable Vector GraphicsScalable Vector GraphicsBarend Köbben
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