Scalable Vector Graphics

50 %
50 %
Information about Scalable Vector Graphics

Published on January 13, 2009

Author: fjbehr

Source: slideshare.net

Description

Introduction and step by step tutorial

Scalable Vector Graphics - SVG Prof. Dr.-Ing. Franz-Josef Behr Tim Berners-Lee cited by Opera, http://www.opera.com/features/svg/index.dml

Outline Introduction: Technological context Examples Document structure Geometry elements – implementation of an won SVG mapping examples Conclusions Introduction Document Geoemtry Résumée Examples

Introduction: Technological context

Examples

Document structure

Geometry elements – implementation of an won SVG mapping examples

Conclusions

Context SVG XLink XSL Client-Side- Technologies Internet-Mapping / GIS CIV Data exchange formats GML WMS / WFS Server-Side- Technologies Data base systems Java Internet Technology CSS DOM Dokument Geoemtrie Résumée Examples Introduction

Delivering SVG Documents in the Internet Internet http Webserver http CGI protocol Document root Static SVG Documents Server side Programs Dynamic Generation of SVG documents Introduction Dokument Geoemtrie Résumée Examples Client "User Agent" SVG Viewer

Examples Vienna Campus Singapore Polytechnic Campus TU Dresden Tuerlersee ... Dokument Geoemtrie Résumée Examples Introduction

Vienna

Campus Singapore Polytechnic

Campus TU Dresden

Tuerlersee

...

The famous Vienna Example http://www.karto.ethz.ch/neumann/cartography/vienna/ Dokument Geoemtrie Résumée Examples Introduction

Campus Singapore Polytechnic (Master Thesis 2004)

Campus Dresden University http://www.carto.net/papers/svg/campus_dresden/ Einleitung Dokument Geoemtrie Résumée Beispiele Introduction

Tuerlersee: Interactivity http://www.carto.net/papers/svg/tuerlersee/ Einleitung Dokument Geoemtrie Résumée Beispiele

Hill shading Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/

Tuerlersee: Height profile Einleitung Dokument Geoemtrie Résumée Beispiele http://www.carto.net/papers/svg/tuerlersee/

Dynamic process of the Gruben glacier, Switzerland http://www.carto.net/papers/svg/gruben_glacier/ Introduction Dokument Geoemtrie Résumée Beispiele

Mouse over-Effects onmouseover="mouseover('Biotope_2_125','fill','red')" onmouseout="mouseout ('Biotope_2_125','fill')"  dynamic display of attributes http://www.gis-news.de/svg/samples/bio/bio.htm Introduction Dokument Geoemtrie Résumée Examples

onmouseover="mouseover('Biotope_2_125','fill','red')" onmouseout="mouseout ('Biotope_2_125','fill')"  dynamic display of attributes

Integration of Raster data Integration of remotely sensed data Example at http://www.microimages.com/svg/newzealand.svgz Resampling  enhanced quality Zoom in 4x Introduction Document Geoemtry Résumée Examples

Integration of remotely sensed data Example at http://www.microimages.com/svg/newzealand.svgz

Resampling  enhanced quality

SVG-Document Structure coordinate system Canvas, Viewport Basic struktur Descriptive elements Document Geoemtrie Résumée Introduction Beispiele Examples

coordinate system

Canvas, Viewport

Basic struktur

Descriptive elements

Coordinate systems in SVG, Canvas and Viewport +x +y Canvas View- port Dokument Geoemtry Résumée Introduction Beispiele Examples

SVG-Fragment as part of a XML document <?xml version=&quot;1.0&quot; standalone=&quot;yes&quot;?> <parent xmlns=&quot;http://example.org&quot; xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;> <!-- parent contents here --> <svg:svg width=&quot;4cm&quot; height=&quot;8cm&quot;> <svg:ellipse cx=&quot;2cm&quot; cy=&quot;4cm&quot; rx=&quot;2cm&quot; ry=&quot;1cm&quot; /> </svg:svg> <!-- ... --> </parent> Source: http://www.w3.org/TR/SVG11/struct.html#NewDocumentOverview Document Geoemtry Résumée Introduction Beispiele Examples

Implementation of your own SVG map Geoemtry Résumée Introduction Beispiele Examples Document <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0 0 240 160&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> ... </svg>

Create a SVG-Document I Open empty ASCII file in notepad Insert XML-Prolog <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> Insert DTD <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd > <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0cm 0cm 240cm 160cm&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> </svg> Insert SVG-”Container” with size specifications Document Geoemtry Résumée Introduction Beispiele Examples

Open empty ASCII file in notepad

Insert XML-Prolog

Insert DTD

Insert SVG-”Container” with size specifications

Create a SVG-Document II Insert descriptional elements <svg ...> <title>Map Example</title> <desc> Map which shows use of different SVG-elements and functionalitites. </desc> Save as “.svg” file, i. e. mapexample.svg Open in SVG-Viewer (i. e. Adobe-SVG-Plugin in Internet Explorer) , testing... Document Geoemtry Résumée Introduction Beispiele Examples

Insert descriptional elements

Save as “.svg” file, i. e. mapexample.svg

Open in SVG-Viewer (i. e. Adobe-SVG-Plugin in Internet Explorer) , testing...

<title>, <desc> <title> Title of a document </title> <desc>This is a description</desc> not „rendered“ Additional informationen, i.e. for „tool tip“ http://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements Document Geoemtry Résumée Introduction Beispiele Examples

<title> Title of a document </title>

<desc>This is a description</desc>

not „rendered“

Additional informationen, i.e. for „tool tip“

Our Example... <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0 0 240 160&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> <title>Map Example</title> <desc> Map which shows use of different SVG-elements and functionalitites. </desc> </svg> Insert 2 Document Geoemtry Résumée Introduction Beispiele Examples

Stylesheets ... <svg width=&quot;440&quot; height=&quot;300&quot;> <style type=&quot;text/css&quot;><![CDATA[ text { fill:red;font-family:Arial,Helvetica; font-size:14px;font-stretch:ultra-expanded; font-weight:bold} ]]> </style> <text x=&quot;2px&quot; y=&quot;20px&quot;>This Text is rendered with StyleSheets.</text> </svg> Introduction Document Geoemtry Résumée Beispiele Examples Insert 1c The styling will be applied later on after inserting a text element.

...

<svg width=&quot;440&quot; height=&quot;300&quot;>

<style type=&quot;text/css&quot;><![CDATA[

text { fill:red;font-family:Arial,Helvetica;

font-size:14px;font-stretch:ultra-expanded;

font-weight:bold}

]]>

</style>

<text x=&quot;2px&quot; y=&quot;20px&quot;>This Text is rendered with StyleSheets.</text>

</svg>

SVG DTD <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> System Identifier f o r SVG 1.1 Public Identifier for SVG 1.1: Name of the DTD Dovument Geoemtry Résumée Introduction Beispiele Examples

Entities „ Placeholder“ Known from HTML and XML Any entity can be re-used (i.e. &quot;instanced&quot;) in the SVG document: <!ENTITY mapTitle &quot;SVG Map&quot;> < text x=&quot;15&quot; y=&quot;135 &quot;>&mapTitle; </text> Document Geoemtry Résumée The entity maptitle is defined. Introduction Beispiele Examples

„ Placeholder“

Known from HTML and XML

Any entity can be re-used (i.e. &quot;instanced&quot;) in the SVG document:

Our Example... <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot; http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd &quot; [ <!ENTITY mapTitle &quot;SVG Map&quot;> <!ENTITY animDuration &quot;10s&quot;> ]> Document Geoemtry Résumée Introduction Beispiele Examples

Geometrical Shapes <rect>, <circle>, <line>, ... SVG Example Style properties Filters Gradients Animations Document Geoemtry Résumée Introduction Beispiele Examples

<rect>, <circle>, <line>, ...

SVG Example

Style properties

Filters

Gradients

Animations

Geometri cal E lement s rectangle <rect ... circle : <circle ... ellipse: <ellipse cx=&quot;200&quot; cy=&quot;135&quot; rx=&quot;50&quot; ry=&quot;20&quot; /> Lin e : <line ... Polyline : <polyline points=&quot;160,200 180,230 200,210 234,220&quot; /> Polygon: <polygon points=&quot;350,75 379,161 569,111 397,215 423,301 350,250 277,301&quot; /> Path: <path... Text: <text... Document Geoemtry Résumée Introduction Beispiele Examples

rectangle <rect ...

circle : <circle ...

ellipse: <ellipse cx=&quot;200&quot; cy=&quot;135&quot; rx=&quot;50&quot; ry=&quot;20&quot; />

Lin e : <line ...

Polyline : <polyline points=&quot;160,200 180,230 200,210 234,220&quot; />

Polygon: <polygon points=&quot;350,75 379,161 569,111 397,215 423,301 350,250 277,301&quot; />

Path: <path...

Text: <text...

Rectangle <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120&quot;/> <rect ... fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot; /> Coordinates left upper corner width height Fill color Border color Line width of border Document Geoemtry Résumée Introduction Beispiele Examples

Our Example... ... <desc> Map which shows use of different SVG-elements and functionalitites. </desc> <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120&quot; fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot;/> </svg> Document Geoemtry Résumée Introduction Beispiele Examples

Rounded rect Not used in our example. <svg width=&quot;440&quot; height=&quot;300&quot;> <rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;60&quot; height=&quot;30&quot; rx=&quot;20&quot; ry=&quot;50&quot; style=&quot;stroke:blue;fill:none&quot;/> </svg> Document Geoemtry Résumée Introduction Beispiele Examples

Not used in our example.

Polyline Not used in our example <polyline fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot; points=&quot;50,375 150,375 150,325 250,325 250,375 ... 950,375 950,25 1050,25 1050,375 1150,375&quot; />

Not used in our example

polygon Not used in our example <polygon points=&quot;223.5,123.034 276,213.966 171,213.966&quot; style=&quot;fill:rgb(126,14,83); stroke:rgb(0,0,128); stroke-width:1&quot;/>

Not used in our example

Line <line x1=&quot;10&quot; y1=&quot;120&quot; x2=&quot;50&quot; y2=&quot;80&quot;/> Coordinates starting point Coordinates end point Document Geoemtry Résumée Introduction Beispiele Examples

Our Example... Group of streets, created by line-elements <g id=&quot;streets&quot; stroke=&quot;yellow&quot; stroke-width=&quot;0.9&quot;> <line x1=&quot;10&quot; y1=&quot;120&quot; x2=&quot;50&quot; y2=&quot;80&quot;/> <line x1=&quot;50&quot; y1=&quot;80&quot; x2=&quot;150&quot; y2=&quot;80&quot;/> <line x1=&quot;60&quot; y1=&quot;40&quot; x2=&quot;60&quot; y2=&quot;80&quot;/> <line x1=&quot;100&quot; y1=&quot;40&quot; x2=&quot;100&quot; y2=&quot;80&quot;/> <line x1=&quot;140&quot; y1=&quot;40&quot; x2=&quot;140&quot; y2=&quot;80&quot;/> <line x1=&quot;80&quot; y1=&quot;80&quot; x2=&quot;80&quot; y2=&quot;130&quot;/> <line x1=&quot;135&quot; y1=&quot;80&quot; x2=&quot;135&quot; y2=&quot;130&quot;/> <line x1=&quot;40&quot; y1=&quot;90&quot; x2=&quot;20&quot; y2=&quot;70&quot;/> </g> Document Geoemtry Résumée Insert 3 Introduction Beispiele Examples

Group of streets, created by line-elements

Circles <circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;3&quot;/> Coordinates center point Radius Document Geoemtry Résumée Introduction Beispiele Examples

Our Example... Group of trees, composed by circles <g id=&quot;trees&quot; stroke=&quot;#009900&quot; fill=&quot;#99FF99&quot; stroke-width=&quot;0.4&quot;> <circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;40&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;50&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;60&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;70&quot; cy=&quot;30&quot; r=&quot;3&quot;/> <circle cx=&quot;80&quot; cy=&quot;30&quot; r=&quot;3&quot;/> </g> Document Geoemtry Résumée Introduction Beispiele Examples

Group of trees, composed by circles

Path Parameter: moveto (m,M) + x,y lineto (l,L) + x,y horizontalLineTo(h,H) + x , verticalLineTo(v,V) + y closePath (z,Z : ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath . If a &quot;closepath&quot; is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath. Uppercase commands -> absolute coordinates Lowercase commands -> relative coordinates <path d=&quot;M 120 , 130L 130 , 120L 130 , 110 125 , 105 115 , 100 110 , 115 110 , 125 z&quot;/> Document Geoemtry Résumée Introduction Beispiele Examples

Parameter:

moveto (m,M) + x,y

lineto (l,L) + x,y

horizontalLineTo(h,H) + x , verticalLineTo(v,V) + y

closePath (z,Z : ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath . If a &quot;closepath&quot; is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.

Uppercase commands -> absolute coordinates

Lowercase commands -> relative coordinates

Cubic Bézier : (c,C; s,S) quadrati c Bezier s (q,Q; t,T) Elliptic al arcs (a,A) Not used in our example

Cubic Bézier : (c,C; s,S)

quadrati c Bezier s (q,Q; t,T)

Elliptic al arcs (a,A)

Not used in our example

Our Example... Perhaps a lake ... Color will defined later! Dokument Geoemtry Résumée <circle cx=&quot;80&quot; cy=&quot;30&quot; r=&quot;3&quot;/> </g> <path d=&quot;M 120 , 130L 130 , 120L 130 , 110 125 , 105 115 , 100 110 , 115 110 , 125 z&quot;/> </svg> Introduction Beispiele Examples Insert 5

Perhaps a lake ... Color will defined later!

Text elements <text x=&quot;15&quot; y=&quot;135&quot; >AbcDef </text> <text ... style=&quot;font-family:Arial;font-size:6 >... </text> Position Content Font size Document Geoemtry Résumée End-Tag Start-Tag Introduction Beispiele Examples Style property

Text: Additional possibilities Rotated Text: <text x=&quot;32&quot; y=&quot;66&quot; transform=&quot;rotate(20)&quot;>Strasse</text> Multiline Text a nd Sub groups <text x=&quot;140&quot; y=&quot;73&quot;>Mehrzeilig: <tspan x=&quot;140&quot; y=&quot;98&quot;>erste Zeile</tspan> <tspan x=&quot;140&quot; y=&quot;123&quot;>zweite Zeile</tspan> </text> Colors: tspan-Elemente with different color : <text class=&quot;cafl&quot;> The color <tspan class=&quot;yel&quot;> yellow </tspan>!</text> Character spacing <text x=&quot;44&quot; y=&quot;255&quot; class=&quot;cafl&quot;> A <tspan dy=&quot;-9&quot;> h igh </tspan> <tspan rotate=&quot;10 35 50 65 80&quot; dx=&quot;0 5 9 9 12&quot;> word ! </tspan> </text> Dokument Geoemtrie Résumée Introduction Beispiele Examples

Rotated Text: <text x=&quot;32&quot; y=&quot;66&quot; transform=&quot;rotate(20)&quot;>Strasse</text>

Multiline Text a nd Sub groups <text x=&quot;140&quot; y=&quot;73&quot;>Mehrzeilig: <tspan x=&quot;140&quot; y=&quot;98&quot;>erste Zeile</tspan> <tspan x=&quot;140&quot; y=&quot;123&quot;>zweite Zeile</tspan> </text>

Colors: tspan-Elemente with different color : <text class=&quot;cafl&quot;> The color <tspan class=&quot;yel&quot;> yellow </tspan>!</text>

Character spacing <text x=&quot;44&quot; y=&quot;255&quot; class=&quot;cafl&quot;> A <tspan dy=&quot;-9&quot;> h igh </tspan> <tspan rotate=&quot;10 35 50 65 80&quot; dx=&quot;0 5 9 9 12&quot;> word ! </tspan> </text>

Text on Paths: <path id=&quot; LabelPath &quot; style=&quot;display:none&quot; d=&quot;M1744 -439 Q1889 -171 2034 97&quot;/> <text style=&quot;fill:rgb(0,0,0);stroke-width:0.015em;stroke:rgb(255,255,255); font-family:'Arial';text-anchor:middle;font-size:40;letter-spacing:0.15em&quot;> <textPath xlink:href=&quot;#LabelPath&quot; startOffset=&quot;50%&quot;><tspan dy=&quot;0.35em&quot; dx=&quot;0&quot;>KENYON CRES</tspan></textPath> </text> Source: http://www.dbxgeomatics.com/SVGMapMakerSamples.asp?Language= Document Geoemtry Résumée Introduction Beispiele Examples

<path id=&quot; LabelPath &quot; style=&quot;display:none&quot; d=&quot;M1744 -439 Q1889 -171 2034 97&quot;/>

<text style=&quot;fill:rgb(0,0,0);stroke-width:0.015em;stroke:rgb(255,255,255); font-family:'Arial';text-anchor:middle;font-size:40;letter-spacing:0.15em&quot;> <textPath xlink:href=&quot;#LabelPath&quot; startOffset=&quot;50%&quot;><tspan dy=&quot;0.35em&quot; dx=&quot;0&quot;>KENYON CRES</tspan></textPath> </text>

text element: Our Example... We add a simple text using one of our entities. ... <text x=&quot;15&quot; y=&quot;135&quot; style=&quot;font-family:Arial;font-size:6&quot;>&mapTitle;</text> </svg> Insert 6 Document Geoemtry Résumée Introduction Beispiele Examples

We add a simple text using one of our entities.

Definitions: The <defs> element Container-Element contains definitions of Objects, which can be used (referenced) by other objects (single elements, groups, symbols, gradients or filters). Elements only visible, if referenced in the SVG document.  Elements, which are references, must be placed always in the defs container! <defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> </defs> Document Geoemtry Résumée Introduction Beispiele Examples

Container-Element

contains definitions of Objects, which can be used (referenced) by other objects (single elements, groups, symbols, gradients or filters).

Elements only visible, if referenced in the SVG document.

 Elements, which are references, must be placed always in the defs container!

The <use>-Element template object that can be re-used (i.e., &quot;instanced&quot;) in the SVG document via a 'use' element . The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system. <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> Document Geoemtry Résumée Introduction Beispiele Examples Application of the xlink standard The referenced document fragment is inserted, not hyperlinked!

template object that can be re-used (i.e., &quot;instanced&quot;) in the SVG document via a 'use' element .

The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

Our Example... Definition... <svg id=&quot;map&quot; width=&quot;600px&quot; height=&quot;400px&quot; viewBox=&quot;0cm 0cm 240cm 160cm&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;> <title>Map Example</title> <desc> Rectangle with red border and light blue interior, with gray shadow rectangle. </desc> <defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> </defs> <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120„ fill=&quot;#eeeeff&quot; stroke=&quot;red&quot; stroke-width=&quot;1&quot; /> Insert 7 , 1. Part Document Geoemtry Résumée Introduction Beispiele Examples

Definition...

Our Example... ... and use. <g id=&quot;buildings&quot; stroke=&quot;#FF5500&quot; fill=&quot;#FF9999&quot; stroke-width=&quot;0.4&quot;> <rect x=&quot;65&quot; y=&quot;70&quot; width=&quot;5&quot; height=&quot;5&quot;/> <rect x=&quot;65&quot; y=&quot;60&quot; width=&quot;5&quot; height=&quot;5&quot;/> <use xlink:href=&quot;#house&quot; x=&quot;65&quot; y=&quot;50&quot; /> <!-- left side --> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;50&quot; y=&quot;70&quot; /> <!-- left side --> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;70&quot; /> <!-- right side --> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;60&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;70&quot; /> <!-- right side --> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;90&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;90&quot; y=&quot;110&quot; /> <use xlink:href=&quot;#house&quot; x=&quot;105&quot; y=&quot;50&quot; /> </g> Insert 7 , 2. Part Document Geoemtrie Résumée Introduction Beispiele Examples

... and use.

Transformations General Syntax: <g transform=command ( parameter )&quot;> scale rotate translate skewX | skewY matrix ( general transformation ). Document Geoemtry Résumée Introduction Beispiele Examples

General Syntax: <g transform=command ( parameter )&quot;>

scale

rotate

translate

skewX | skewY

matrix ( general transformation ).

Our Example... Mind the order of transformations! <!-- bottom left road, left side --> <g transform=&quot;translate(65,90)&quot;> <use xlink:href=&quot;#house&quot; x=&quot;0&quot; y=&quot;0„ transform=&quot;scale(1.5)&quot;/> </g> Insert 8 Document Geoemtry Résumée Exercise: Change the order of the transformations! How is the position of the house affected? Introduction Beispiele Examples

Mind the order of transformations!

Exercise: Change the order of the transformations! How is the position of the house affected?

Result Document Geoemtry Résumée Introduction Beispiele Examples

Hyperlinks Anchor tag, comparable to HTML, However: href is part of the xlink name space. <a xlink:href=&quot;http://www.fewo-wuerzburg.de/&quot;> ... </a> Name spcae xlink ‘ a‘-Element href-Attribut URL Document Geoemtry Résumée Introduction Beispiele Examples

Anchor tag, comparable to HTML,

However: href is part of the xlink name space.

Our Example... <a xlink:href=&quot;http://www.fewo-wuerzburg.de/&quot;> <g transform=&quot;translate(65,110)&quot;> <use xlink:href=&quot;#house&quot; x=&quot;0&quot; y=&quot;0&quot; transform=&quot;scale(1.5)&quot;/> </g> </a> Insert 9 Introduction Document Geoemtry Résumée Examples

Filter Introduction Document Geoemtry Résumée Examples

Filter effects Introduction Document Geoemtry Résumée Examples

Our Example... <defs> <rect id=&quot;house&quot; width=&quot;5&quot; height=&quot;5&quot;/> <filter id=&quot;schatten&quot;> <feGaussianBlur stdDeviation=&quot;5&quot; /> </filter> … <rect x=&quot;10&quot; y=&quot;20&quot; width=&quot;150&quot; height=&quot;120„ transform=&quot;translate(3, 3)„ style=&quot;filter:url(#schatten); fill='#999999' stroke='#999999‚ stroke-width='1'„ /> Insert 10 Introduction Document Geoemtry Résumée Examples

Result Introduction Document Geoemtry Résumée Examples

Gradients … consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. Types Linear gradients Radial gradients Introduction Document Geoemtry Résumée Examples

… consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors.

Types

Linear gradients

Radial gradients

Our Example... In the defs section Insert 11 Introduction Document Geoemtry Résumée Examples <radialGradient id=&quot;radial&quot; cx=&quot;50%&quot; cy=&quot;90%&quot; r=&quot;60%&quot; fx=&quot;60%&quot; fy=&quot;80%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(0,15,150);stop-opacity:1&quot;/> <stop offset=&quot;1%&quot; style=&quot;stop-color:rgb(128,128,255);stop-opacity:1&quot;/> <stop offset=&quot;50%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> Around our lake: <g id=&quot;lake&quot; stroke=&quot;#0000FF&quot; fill=&quot;url(#radial)&quot; stroke-width=&quot;0.4&quot;> <path d=&quot;M 120 130L 130 120L 130 110 125 105 115 100 110 115 110 125z&quot;/> </g>

In the defs section

Around our lake:

Result Document Geoemtry Résumée Introduction Beispiele Examples

Animation SVG supports the ability to change vector graphics over time. You can animate nearly whatever you want: Positions, colors, gradients, sizes, … Document Geoemtry Résumée Introduction Beispiele Examples

SVG supports the ability to change vector graphics over time.

You can animate nearly whatever you want: Positions, colors, gradients, sizes, …

Our Example... In defs section Before </svg>: Insert 12 Docment Geoemtry Résumée Introduction Beispiele Examples <symbol id=&quot;car&quot; overflow=&quot;visible&quot;> <rect x=&quot;-1&quot; y=&quot;-1&quot; width=&quot;4&quot; height=&quot;2&quot; style=&quot;fill: rgb(240,65,25); fill-opacity: 0.8; stroke: rgb(55,0,0); stroke-width:0.1&quot; /> </symbol> <path id=&quot;carpath&quot; d=&quot;M 10 120 50 80 150 80&quot; /> <g id=&quot;AnimationPaths&quot;> <use xlink:href=&quot;#car&quot;> <animateMotion id=&quot;animMotionCar&quot; dur=&quot;10s;&quot; repeatCount=&quot;indefinite&quot; rotate=&quot;auto-reverse&quot;> <mpath xlink:href=&quot;#carpath&quot;/> </animateMotion> </use> </g>

In defs section

Before </svg>:

Result Document Geoemtry Résumée Introduction Beispiele Examples

Exercise Add four wheels to the car!

Add four wheels to the car!

SVG in HTML embed (deprecated, but supported by most browsers) <embed src=&quot;canvas.svg&quot; width=&quot;350&quot; height=&quot;176&quot; type=&quot;image/svg+xml&quot; name=&quot;emap&quot;> o bject ( HTML 4 Strict standard ): <object type=&quot;image/svg+xml&quot; name=&quot;omap&quot; data=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot;></object> Iframe (only HTML 4 Transitional standard): <iframe src=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot; name=&quot;imap&quot;></iframe>  http:// www.carto.net/papers/svg/samples/svg_html.shtml Document Geoemtry Résumée Introduction Beispiele Examples

embed (deprecated, but supported by most browsers) <embed src=&quot;canvas.svg&quot; width=&quot;350&quot; height=&quot;176&quot; type=&quot;image/svg+xml&quot; name=&quot;emap&quot;>

o bject ( HTML 4 Strict standard ): <object type=&quot;image/svg+xml&quot; name=&quot;omap&quot; data=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot;></object>

Iframe (only HTML 4 Transitional standard): <iframe src=&quot;canvas_norelief.svg&quot; width=&quot;350&quot; height=&quot;176&quot; name=&quot;imap&quot;></iframe>

Switching Layer (groups) on and off <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;> var svgmap; //global variable function initializeMap() { svgmap = document.main_map.getSVGDocument(); } function layerOnOff (checkbox,layer_name) { var svg_layer; svg_layer = svgmap.getElementById(layer_name); if (checkbox.checked) { svg_layer.setAttribute(&quot;visibility&quot;, &quot;visible&quot;); //Show layer. } else { svg_layer.setAttribute(&quot;visibility&quot;, &quot;hidden&quot;); //Hide layer. } }</script> Dokcment Geoemtry Résumée Accessing the DOM Introduction Examples

Our Example... See file mapexample.html <embed name=&quot;main_map&quot; width=&quot;800&quot; height=&quot;400&quot; src=&quot;mapexample.svg&quot; type=&quot;image/svg+xml&quot; pluginspage=&quot;http://www.adobe.com/svg/viewer/install/&quot;> <form name=&quot;onoff&quot;> <input type=checkbox checked value=&quot;true&quot; onClick= &quot;layerOnOff(this,'buildings');&quot; >Layer Buildings <input type=checkbox checked value=&quot;true&quot; onClick= &quot;layerOnOff(this,'streets');&quot; >Layer Streets </form> Einleitung Document Geoemtry Résumée Introduction Examples

See file mapexample.html

Result Einleitung Document Geoemtry Résumée Beispiele Introduction Examples

Résumée Integration of vector and raster based geodata including attribute values , excellent visualization, high level of interactivity (zoom, pan, …), Relation between different elements / groups (overview map / detail map, map / attributes), interactive analyse / query of data. Einleitung Document Geoemtry Résumée Examples Introduction

Integration of vector and raster based geodata including attribute values ,

excellent visualization,

high level of interactivity (zoom, pan, …),

Relation between different elements / groups (overview map / detail map, map / attributes),

interactive analyse / query of data.

SVG XML-Language File size: often quite small, pute text. High resolution graphics, no quality loss by zoom. High colour Animations DOM (Document Object Model)  Graphics can modified using JavaScript (and other programming languages) Filter, shadow, ... Einleitung Document Geoemtry Résumée Beispiele

XML-Language

File size: often quite small, pute text.

High resolution graphics, no quality loss by zoom.

High colour

Animations

DOM (Document Object Model)  Graphics can modified using JavaScript (and other programming languages)

Filter, shadow, ...

GI-Systems and SVG Supported by: MicroImages TNTmips, http://www.microimages.com/documentation/SVG.htm Important for WMS and visualization of GML Creating SVG using Add-ons: ArcView ( Shape2SVG , ...) MapInfo ( Map2SVG , SVGMapMaker , ...) Manifold (Master Thesis P&GI) FME, http://www.safe.com/reader_writerPDF/svg.pdf

Supported by:

MicroImages TNTmips, http://www.microimages.com/documentation/SVG.htm

Important for WMS and visualization of GML

Creating SVG using Add-ons:

ArcView ( Shape2SVG , ...)

MapInfo ( Map2SVG , SVGMapMaker , ...)

Manifold (Master Thesis P&GI)

FME, http://www.safe.com/reader_writerPDF/svg.pdf

Links The SVG-Website for cartography / GIS: http:// www.carto.net / SVG-Tutorials: http:// svg.tutorial.aptico.de / http:// www.datenverdrahten.de / http://www.scale-a-vector.de/ http://www.s-v-g.net/faq.htm SVG / PDF, PostScript: http:// www.adobe.com/svg / http://www.siliconpublishing.org/svgfaq/Core.asp Link lists: http://www.carto.net/papers/svg/links/ http://www.gis-news.de/svg/svg.htm for students interest in games: http:// www.battlebots.com / Einleitung Dokument Geoemtrie Résumée Beispiele

The SVG-Website for cartography / GIS: http:// www.carto.net /

SVG-Tutorials: http:// svg.tutorial.aptico.de / http:// www.datenverdrahten.de / http://www.scale-a-vector.de/ http://www.s-v-g.net/faq.htm

SVG / PDF, PostScript: http:// www.adobe.com/svg /

http://www.siliconpublishing.org/svgfaq/Core.asp

Link lists: http://www.carto.net/papers/svg/links/ http://www.gis-news.de/svg/svg.htm

Mailinglisten http://lists.w3.org/Archives/Public/www-svg/ http:// groups.yahoo.com / group / svg-developers /

http://lists.w3.org/Archives/Public/www-svg/

http:// groups.yahoo.com / group / svg-developers /

Tools Viewer: Adobe’s Viewer: http:// www.adobe.com/svg/viewer/install/main.html Batik SVG Toolkit: http:// xml.apache.org /batik/ CSIRO SVG Toolkit: http:// sis.cmis.csiro.au/svg / Authoring tools: Adobe’s GoLive, http://www.adobe.com/products/golive/main.html ...

Viewer:

Adobe’s Viewer: http:// www.adobe.com/svg/viewer/install/main.html

Batik SVG Toolkit: http:// xml.apache.org /batik/

CSIRO SVG Toolkit: http:// sis.cmis.csiro.au/svg /

Authoring tools:

Adobe’s GoLive, http://www.adobe.com/products/golive/main.html

...

SVG <thank you> Have fun with SVG! </thank you>

<thank you>

Have fun with SVG!

</thank you>

Add a comment

Related presentations

Related pages

W3C SVG Working Group - Scalable Vector Graphics (SVG)

SVG is a markup language for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces. SVG 1.1 2nd ...
Read more

Scalable Vector Graphics - Wikipedia

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG ...
Read more

Scalable Vector Graphics – Wikipedia

Scalable Vector Graphics (SVG, englisch für skalierbare Vektorgrafik) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur ...
Read more

:: scale-a-vector.de :: Scalable Vector Graphics

Willkommen Ich möchte Sie gerne mit meiner Begeisterung für SVG Scalable Vector Graphics anstecken. Im April 2001 füllte ich eine Seite auf einer meiner ...
Read more

SVG (Scalable Vector Graphics) - w3schools.com

SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format.
Read more

about-svg.de - Basisinformationen (SVG)

Scalable Vector Graphics ist eine vom World-Wide-Web-Consortium (W3C) verabschiedete Spezifikation, mit der zweidimensionale Vektorgrafiken beschrieben ...
Read more

Scalable Vector Graphics (SVG) - Windows app development

Scalable Vector Graphics (SVG) is a language for describing two-dimensional vector and mixed vector/raster graphics in an XML format.
Read more

SVG Developer Center | Adobe Developer Connection

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG files ...
Read more

Scalable Vector Graphics (SVG) 1.1 (Second Edition)

Abstract. This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 1.1, a modularized language for describing two ...
Read more

Scalable Vector Graphics (SVG) 2 - SVG Working Group

Abstract. This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 2. SVG is a language based on XML for describing ...
Read more