SVG 1 Prof. Franz-Josef Behr XML-basierte Visualisierung von Geodaten mittels SVG Prof. Dr.-Ing. Franz-Josef Behr

Prof. Franz-Josef Behr

SVG

1

XML-basierte Visualisierung XML-basierte Visualisierung von Geodaten mittels SVGvon Geodaten mittels SVGProf. Dr.-Ing. Franz-Josef Behr


SVG

2

GliederungGliederung

• Einleitung: Entwicklung, Übersicht• einige Grundlagen• Beispiele• Dokumentstruktur, Aufbau einer einfachen SVG-

basierten Karte• Zusammenfassung


SVG

3 EntwicklungEntwicklung

1970

1986

1992

1998

SGML

GML

2000

Internet

World Wide WebHTML

XML

XSL XHTML SVG

Sprachfamilie Sprache

IBM:Charles GoldfarbEdward MosherRaymond Lorie

Quelle: unbekannt


SVG

4 World Wide Web ConsortiumWorld Wide Web Consortium

http://w3.org


SVG

5 Grundsätze von XMLGrundsätze von XML

• eXtensible Markup Language

• Dient der Definition von Sprachen (Grammatik und Vokabular) -> Auszeichnungselemente selbst schaffen

• Sätze von Auszeichnungen wiederverwendbar• Strenge Syntaxregeln

• Trennung der Präsentation vom Inhalt-> GML / SVG


SVG

6 Die Basis: ElementeDie Basis: Elemente

<person>Franz-Josef Behr</person>

Start-Tag End-TagElementinhalt

Elementname, frei wählbar

<person wohnort="Karlsruhe">Franz-Josef Behr</person>

Start-Tag mit Attribut End-TagElementinhalt

Elementname Attributname Attributwert


SVG

7

Dokumententyp-Deklaration

Wurzelelement / Dokument-inhalt

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?><!DOCTYPE punktliste [<!ELEMENT punktliste (datum,punkt)><!ELEMENT datum(#PCDATA)><!ELEMENT punkt (x,y)><!ELEMENT x (#PCDATA)><!ELEMENT y (#PCDATA)>]><punktliste> <datum>18.03.2005</datum> <punkt id='1000'> <x>3500000.0</x> <y>5400000.0</y> </punkt> <punkt id='1001'> <x>3500001.0</x> <y>5400001.0</y> </punkt></punktliste>

Kind-elemente

XML-Deklaration

Aufbau eines XML-DokumentsAufbau eines XML-Dokuments


SVG

8

punkt

x y

Document Object Model (DOM) Document Object Model (DOM)

punktliste

punkt

x y

datumDTD

id id

Knotentypen:DocumentDocumentFragmentDocumentTypeEntityReferenceElementAttrProcessingInstructionCommentTextCDATASectionEntityNotation


SVG

9 Document Object Model (DOM) Document Object Model (DOM)

• Strukturierung von XML-Dokumenten• Sprach- und plattformneutrale Schnittstelle

var Knoten = punktliste.getElementById(1000);...var Kinderknoten = Knoten.getChildNodes();

In SVG: Unterstützung DOM Grafiken können per JavaScript und anderen Programmiersprache manipuliert werden.


SVG

10

<TKFD xmlns:tkfd="http://www.lv-bw.de/tkfd" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.lv-bw.de/tkfd"><tkfd:Bahnhof> <tkfd:oar tkfd:id="EZ00VPK">9201</tkfd:oar> <gml:centerOf> <gml:Point> <gml:pos>3515955.37 5409276.28</gml:pos> </gml:Point> </gml:centerOf></tkfd:Bahnhof>

XML-NamensräumeXML-Namensräume

• Eindeutige Benennung von Elementnamen• Namensräumen, durch URI-Verweise

identifiziert

GML


SVG

11

GML-Visualisierung mittels Scalable GML-Visualisierung mittels Scalable Vector Graphics (SVG)Vector Graphics (SVG)

GML XSLT-Prozessor

XSL

SVG


SVG

12 SVGSVG

• XML-Sprache, lesbar• Dateien oft sehr klein, da reiner Text. • Hochauflösende Grafiken möglich, die auch bei

Skalierung nicht an Qualität verlieren.• Gute Qualität bei Rasterdaten (Resampling)• hohe Farbtiefe • Animationen ohne signifikanten Overhead• Unterstützung DOM (Document Object Model)

Grafiken können per JavaScript und anderen Programmiersprache manipuliert werden.

• Filter und Schatten.


SVG

13

Beispiele (offline)Beispiele (offline)

• Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten

• Tuerlersee


SVG

14

Landesvermessungsamt Baden-Landesvermessungsamt Baden-Württemberg:Württemberg:Thematische KartenfachdatenThematische Kartenfachdaten ( (TKFD)TKFD)

• Zielsystem: Adobe Illustrator, geringfügige Änderungen / Aktualisierungen, dann Ausgabe

• Mit SVG: neuer Workflow• Vorteil: wesentlich schneller• "in letzter Sekunde" Änderungen im Vektordatensatz• Keine Einschränkung wie bei der Bearbeitung von

Rasterdaten.


SVG

15

Landesvermessungsamt Baden-Landesvermessungsamt Baden-Württemberg:Württemberg:Thematische KartenfachdatenThematische Kartenfachdaten in SVG in SVG


SVG

16 TuerlerseeTuerlersee

http

://ww

w.ca

rto.n

et/p

aper

s/sv

g/tu

erle

rsee

/


SVG

17 SchummerungSchummerung

http

://ww

w.ca

rto.n

et/p

aper

s/sv

g/tu

erle

rsee

/


SVG

18

Tuerlersee: HöhenprofilTuerlersee: Höhenprofil

http

://ww

w.ca

rto.n

et/p

aper

s/sv

g/tu

erle

rsee

/


SVG

19

SVG-DokumentaufbauSVG-Dokumentaufbau

• Koordinatensystem, Canvas, Viewport• Wurzelelement, Grundstruktur• Aufbau eines Beispiels aus Geometrieelemente• Effekte


SVG

20

Koordinatensystem, Canvas und Koordinatensystem, Canvas und ViewportViewport

+x

+y

Canvas

View-port


SVG

21 Erstellung eines SVG-DokumentsErstellung eines SVG-Dokuments

• XML-Prolog

<?xml version="1.0" standalone="no"?>

• DTD einfügen

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd>

<svg id="map" width="600px" height="400px" viewBox="0cm 0cm 240cm 160cm" >

</svg>

• SVG-Wurzelelement mit Größenangaben einfügen

<rect>, <circle>, <line>, ...StileigenschaftenFilterVerläufeAnimation


SVG

22 Geometrische GrundelementeGeometrische Grundelemente

• Rechteck <rect ...

• Kreis: <circle ...• Ellipse: <ellipse cx="200" cy="135" rx="50"

ry="20" /> • Linie: <line ... • Polyline : <polyline points="160,200 180,230

200,210 234,220" /> • Polygon: <polygon points="350,75 379,161

569,111 397,215 423,301 350,250 277,301" />• Path: <path...• Text <text...


SVG

23 Rechteck als KartenrahmenRechteck als Kartenrahmen

<rect x="10" y="20" width="150" height="120"/>

<rect ... fill="#eeeeff" stroke="red" stroke-width="1" />

Koordinaten linke obere

Ecke

Breite Höhe

Füllfarbe Farbe Umrandung

Linienbreite Umrandung


SVG

24 LinieLinie

<line x1="10" y1="120" x2="50" y2="80"/>

Koordinaten Anfangspunkt

Koordinaten Endspunkt


SVG

25 Unser Beispiel...Unser Beispiel...

• Gruppe von Straßen<g id="streets" stroke="yellow" stroke-width="0.9">

<line x1="10" y1="120" x2="50" y2="80"/> <line x1="50" y1="80" x2="150" y2="80"/>

<line x1="60" y1="40" x2="60" y2="80"/> <line x1="100" y1="40" x2="100" y2="80"/> <line x1="140" y1="40" x2="140" y2="80"/>

<line x1="80" y1="80" x2="80" y2="130"/> <line x1="135" y1="80" x2="135" y2="130"/>

<line x1="40" y1="90" x2="20" y2="70"/></g>


SVG

26 KreiseKreise

<circle cx="30" cy="30" r="3"/>

Koordinaten Mittelpunkt

Radius


SVG


• Gruppe von Bäumen

<g id="trees" stroke="#009900" fill="#99FF99" stroke-width="0.4"> <circle cx="30" cy="30" r="3"/> <circle cx="40" cy="30" r="3"/> <circle cx="50" cy="30" r="3"/> <circle cx="60" cy="30" r="3"/> <circle cx="70" cy="30" r="3"/> <circle cx="80" cy="30" r="3"/></g>


SVG

28 PfadePfade

• Parameter:– moveto(m,M) + x,y– lineto (l,L) + x,y – horizontalLineTo(h,H) + x, verticalLineTo(v,V) + y – closePath(z,Z), beendet die Darstellung des Pfades,

mit m kann an einer anderen Stelle nach Unterbrechung fortgesetzt werden.

– kubische Bezierkurven (c,C; s,S), übernimmt je nach Kurventyp sechs oder vier Parameter

– quadratische Bezierkurven (q,Q; t,T) übernimmt je nach Kurventyp vier oder zwei Parameter

– elliptische Kurven (a,A), zeichnet eine Ausschnitt einer Ellipse, inklusive der Rotation: sieben Parameter

<path d="M 120,130L 130,120L 130,110 125,105 115,100 110,115 110,125 z"/>


SVG


• Vielleicht ein See ... Farbe folgt später!

<path d="M 120,130L 130,120L 130,110 125,105 115,100 110,115 110,125 z"/>


SVG

30 TextText

<text x="15" y="135">AbcDef</text>

<text ... style="font-family:Arial;font-size:6>...</text>

Position Textinhalt

Schriftart Größe

End-TagStart-Tag


SVG

31 Text: Text: Weitere Weitere MöglickeitenMöglickeiten

• gedrehter Text: <text x="32" y="66" transform="rotate(20)">Strasse</text>

• Mehrzeiliger Text und Untergrupen <text x="140" y="73">Mehrzeilig: <tspan x="140" y="98">erste Zeile</tspan> <tspan x="140" y="123">zweite Zeile</tspan> </text>

• Farben: Wechselnde tspan-Elemente werden mit unterschiedlichen Farben belegt: <text class="cafl">Die Farbe <tspan class="yel">gelb</tspan>, schlecht!</text>

• Zeichenabstand und -versetzung <text x="44" y="255" class="cafl"> Ein <tspan dy="-9"> hohes </tspan> <tspan rotate="10 35 50 65 80" dx="0 5 9 9 12"> Wort! </tspan> </text>

• Text längs Linie


SVG


...<text x="15" y="135" style="font-family:Arial;font-size:6">SVG Map</text>...


SVG

33 Definitionen: das <defs>-ElementDefinitionen: das <defs>-Element

• Container-Element• Darin: Definitionen von Objekten, die in der Grafik von

anderen Objekten referenziert (verwendet) werden können (einzelne Elemente, Gruppen, Symbole, Farbverläufe oder Filtereffekte).

• Elemente nur sichtbar, wenn sie innerhalb der Grafik von anderen Elementen referenziert werden.

Elemente, die Referenzen darstellen, immer innerhalb des defs-Container platzieren!

<defs> <rect id="house" width="5" height="5"/></defs>


SVG

34 Das <use>-ElementDas <use>-Element

• Mit dem use-Element wird eine Instanz einer bereits bestehenden Vorlage erzeugt, d.h. sie können mit dem Element use andere Elemente bzw. Objekte referenzieren.

• Die Attribute x und y verlegen den Standort der Instanz, dabei ist der Nullpunkt der Nullpunkt des Elements und nicht der gesamten SVG-Grafik.

<use xlink:href="#house" x="105" y="50" />

!


SVG

35 TransformationenTransformationen

• Allgemeine Syntax:

<g transform=command (parameter)">

• scale (zum Skalieren)• rotate (zum Rotieren)• translate (zum Verschieben)• skewX | skewY (zum Neigen in x- oder y-

Richtung) • matrix (zum allgemeinen Verzerren

einschließlich Skalieren, Rotieren, Verschieben und Neigen).


SVG


• Reihenfolge der Transformationen beachten! <g transform="translate(65,90)"> <use xlink:href="#house" x="0" y="0„ transform="scale(1.5)"/></g>


SVG

37 HyperlinksHyperlinks

• Anchor-Tag, vergleichbar HTML,• Jedoch: href entstammt hier dem xlink-Namensraum.

<a xlink:href="http://www.fewo-wuerzburg.de/">... </a>

Nam

ensr

aum

xl

ink

‘a‘-E

lem

ent

href

-Attr

ibut URL


SVG

38 FilterFilter

Quelle: w3.org


SVG


<defs><rect id="house" width="5" height="5"/><filter id="schatten"> <feGaussianBlur stdDeviation="5" /></filter>

<rect x="10" y="20" width="150" height="120„ transform="translate(3, 3)„ style="filter:url(#schatten); fill='#999999' stroke='#999999‚ stroke-width='1'„ />


SVG

40 Verlauf (Gradienten)Verlauf (Gradienten)

• gleichmässige Abstufung von einer Quell- hin zu einer Zielfarbe.

• Unterscheidung– lineare Verläufe– radiale Verläufe

• jeweils durch Form und Richtung des Verlaufsmusters charakterisiert.


SVG


• Im ‚defs‘-Abschnitt<radialGradient id="radial" cx="50%" cy="90%" r="60%" fx="60%" fy="80%"> <stop offset="0%" style="stop-color:rgb(0,15,150);stop-opacity:1"/> <stop offset="1%" style="stop-color:rgb(128,128,255);stop-opacity:1"/> <stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient>• Um den "See" herum:<g id="lake" stroke="#0000FF" fill="url(#radial)" stroke-width="0.4"><path d="M 120 130L 130 120L 130 110 125 105 115 100 110 115 110 125z"/></g>


SVG

42 AnimationAnimation

• Im defs-Abschnitt <symbol id="car" overflow="visible"> <rect x="-1" y="-1" width="4" height="2" style="fill: rgb(240,65,25); fill-opacity: 0.8; stroke: rgb(55,0,0); stroke-width:0.1" /> </symbol> <path id="carpath" d="M 10 120 50 80 150 80" />

<g id="AnimationPaths"> <use xlink:href="#car"> <animateMotion id="animMotionCar" dur="10s;" repeatCount="indefinite" rotate="auto-reverse"> <mpath xlink:href="#carpath"/> </animateMotion> </use> </g>


SVG

43

ZusammenfassungZusammenfassung


SVG

44 ZusammenfassungZusammenfassung

• XML: Metasprache• Grundlage einer Vielzahl von Sprachen und

Einsatzmöglichkeiten in allen Bereichen der IT• Von Mensch und Maschine gleichermaßen gut lesbar• International und plattformunabhängig einsetzbar


SVG

45 Relevanz von XML im GI-BereichRelevanz von XML im GI-Bereich

• Geography Markup Language (GML)• NAS – künftiges Austauschformat der AdV• häufig zur Beschreibung von Metadaten genutzt• XML-based messaging: WMS GetCapabilities,

GetFeature...• für GetMap-Ergebnisse ist SVG optionales Ausgabeformat

• LandXML.org• ESRI: Arc Extensible Markup Language (ArcXML), the file

format ArcIMS uses for communication between ArcIMS components

• Scalable Vector Graphics (SVG)• …


SVG

46 Résumée SVGRésumée SVG

• Integration von vektor- und rasterbasierten raumbezogenen Daten einschließlich Sachdaten,

• exzellente Darstellung,• hohes Maß an Interaktivität (Zoom, Verschieben des

Bildaussschnittes, …),• Kopplung zwischen verschiedenen Elementen bzw.

Gruppen (Übersichtskarte / Detailkarte, Karte / Attribute),

• interaktive Analyse / Abfrage der Daten


SVG

49 SVGSVG

<message>Viel Spaß!</message>

Documents

SVG 1 Prof. Franz-Josef Behr XML-basierte Visualisierung von Geodaten mittels SVG Prof. Dr.-Ing. Franz-Josef Behr