Prof. Franz-Josef Behr
SVG
1
XML-basierte Visualisierung XML-basierte Visualisierung von Geodaten mittels SVGvon Geodaten mittels SVGProf. Dr.-Ing. Franz-Josef Behr
Prof. Franz-Josef Behr
SVG
2
GliederungGliederung
• Einleitung: Entwicklung, Übersicht• einige Grundlagen• Beispiele• Dokumentstruktur, Aufbau einer einfachen SVG-
basierten Karte• Zusammenfassung
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
4 World Wide Web ConsortiumWorld Wide Web Consortium
http://w3.org
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
8
punkt
x y
Document Object Model (DOM) Document Object Model (DOM)
punktliste
punkt
x y
datumDTD
id id
Knotentypen:DocumentDocumentFragmentDocumentTypeEntityReferenceElementAttrProcessingInstructionCommentTextCDATASectionEntityNotation
Prof. Franz-Josef Behr
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.
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
11
GML-Visualisierung mittels Scalable GML-Visualisierung mittels Scalable Vector Graphics (SVG)Vector Graphics (SVG)
GML XSLT-Prozessor
XSL
SVG
Prof. Franz-Josef Behr
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.
Prof. Franz-Josef Behr
SVG
13
Beispiele (offline)Beispiele (offline)
• Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten
• Tuerlersee
Prof. Franz-Josef Behr
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.
Prof. Franz-Josef Behr
SVG
15
Landesvermessungsamt Baden-Landesvermessungsamt Baden-Württemberg:Württemberg:Thematische KartenfachdatenThematische Kartenfachdaten in SVG in SVG
Prof. Franz-Josef Behr
SVG
16 TuerlerseeTuerlersee
http
://ww
w.ca
rto.n
et/p
aper
s/sv
g/tu
erle
rsee
/
Prof. Franz-Josef Behr
SVG
17 SchummerungSchummerung
http
://ww
w.ca
rto.n
et/p
aper
s/sv
g/tu
erle
rsee
/
Prof. Franz-Josef Behr
SVG
18
Tuerlersee: HöhenprofilTuerlersee: Höhenprofil
http
://ww
w.ca
rto.n
et/p
aper
s/sv
g/tu
erle
rsee
/
Prof. Franz-Josef Behr
SVG
19
SVG-DokumentaufbauSVG-Dokumentaufbau
• Koordinatensystem, Canvas, Viewport• Wurzelelement, Grundstruktur• Aufbau eines Beispiels aus Geometrieelemente• Effekte
Prof. Franz-Josef Behr
SVG
20
Koordinatensystem, Canvas und Koordinatensystem, Canvas und ViewportViewport
+x
+y
Canvas
View-port
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
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...
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
24 LinieLinie
<line x1="10" y1="120" x2="50" y2="80"/>
Koordinaten Anfangspunkt
Koordinaten Endspunkt
Prof. Franz-Josef Behr
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>
Prof. Franz-Josef Behr
SVG
26 KreiseKreise
<circle cx="30" cy="30" r="3"/>
Koordinaten Mittelpunkt
Radius
Prof. Franz-Josef Behr
SVG
27 Unser Beispiel...Unser Beispiel...
• 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>
Prof. Franz-Josef Behr
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"/>
Prof. Franz-Josef Behr
SVG
29 Unser Beispiel...Unser Beispiel...
• 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"/>
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
32 Unser Beispiel...Unser Beispiel...
...<text x="15" y="135" style="font-family:Arial;font-size:6">SVG Map</text>...
Prof. Franz-Josef Behr
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>
Prof. Franz-Josef Behr
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" />
!
Prof. Franz-Josef Behr
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).
Prof. Franz-Josef Behr
SVG
36 Unser Beispiel...Unser Beispiel...
• Reihenfolge der Transformationen beachten!<!-- bottom left road, left side --> <g transform="translate(65,90)"> <use xlink:href="#house" x="0" y="0„ transform="scale(1.5)"/></g>
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
38 FilterFilter
Quelle: w3.org
Prof. Franz-Josef Behr
SVG
39 Unser Beispiel...Unser Beispiel...
<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'„ />
Prof. Franz-Josef Behr
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.
Prof. Franz-Josef Behr
SVG
41 Unser Beispiel...Unser Beispiel...
• 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>
Prof. Franz-Josef Behr
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>
Prof. Franz-Josef Behr
SVG
43
ZusammenfassungZusammenfassung
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
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)• …
Prof. Franz-Josef Behr
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
Prof. Franz-Josef Behr
SVG
49 SVGSVG
<message>Viel Spaß!</message>