Upload
itc-university-of-twente-faculty-of-geo-information-science-and-earth-observation
View
1.438
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
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