Embed Size (px)
Citation preview
Nutzung von SVG
zur Erzeugung von Internetkarten
Web-GIS und Multimedia
Thomas Henkel
Was ist SVG ?
- SVG ist der Graphikstandard des W3C.
- seit dem 02.08.2000 existiert die 1.0 Version von SVG und bildet seitdem den de-jure Standard für Vektorgraphiken im WWW. Am 14.01.2003 wurde die Version 1.1 freigegeben. Neu sind in der aktuellen Version Verbesserungen zur Darstellung auf Handys und Handheld-Geräten.
- entwickelt wurde und wird er von einem Konsortium, das aus Mitgliedern des W3C, Forschungsinstituten und Firmen aus dem Graphik-, Multimedia-, und Netzwerk-Umfeld besteht. U.a. sind hier Microsoft, Adobe, Macromedia, Sun vertreten.
Motivation
- Vor SVG gab es keinen de-jure Standard bei Vektorgraphiken
- es gab nur zwei de-facto Standards:- Flash von Macromedia- WebCGM
- dadurch entstand Abhängigkeit von Anbieterfirmen - Weiterentwicklung nur auf Veranlassung der Herstellerfirma- teure Entwicklungsumgebung notwendig
Das neue Format SVG kombiniert die Vorteile beider Formate.
Einschub: Standards
- de-facto Standard: Dies sind jenen, die zwar nicht durch eineanerkannte Standardisierungsorganisationoffiziell verabschiedet wurden, die aber durch ihre Verbreitung allgemein akzeptiert sind.Man spricht also nicht von einer Norm, es zählt allein die praktischeVerbreitung. Software-Firmen können und wollen austechnischer Sicht nicht alle de-jure Standards einhalten,andererseits möchten sie aus Konkurrenzgründenfirmeneigene Standards aufstellen – mit dem Ziel siezum de-facto Standard zu erheben.
- de-jure Standard: De-jure Standards sind dokumentierte Vereinbarungen, die technische Spezifikationenoder andere exakte Merkmale wie Regeln,Richtlinien oder Definitionen von Eigenschaften liefern, um sicherzugehen, daß Materialien, Produkte, Prozesse und Dienstleistungen ihrem Zweck gerecht werden. (ISO, 1999)
Allgemein: SVG- SVG ist ein offener Standard
- herstellerunabhängig- plattformunabhängig- ständige Weiterentwicklung und sehr gute Dokumentation- eignet sich auch als Austauschformat zwischen den Produkten einzelner Hersteller
- SVG ist XML-basiert- einfache Verknüpfung mit anderen XML-Dokumenten- mit vorhandenen XML-Kenntnissen ist SVG nicht neu zu erlernen- SVG-Graphiken lassen sich auch mit einem einfachen Texteditor verändern und erstellen- da SVG-Dateien textbasiert sind zeichnen sie sich durch vergleichbar geringe Dateigrößen, vorallem im Vergleich zu Rasterdaten, aus
- zur Darstellung in einem Browser ist (noch) ein Plugin notwendig. In künftigen Browsergenerationen ist die SVG-Fähigkeit in Planung.
Einbindung in XML
<?xml version="1.0" standalone="no"?><!DOCTYPE svg SYSTEM "svg-19990812.dtd">
<svg width="14cm" height="8cm">
<rect x="6cm" y="1cm" width="6cm" height="4cm"style="fill:gray; stroke:yellow; stroke-width:0.2cm"/>
<circle cx="3cm" cy="3cm" r="2cm"style="fill:red;stroke:blue; stroke-width:0.2cm"/>
</svg>
Beispiel für die Einbindung einer SVG-Graphik in ein XML-Dokument
►svg x, y, width, height / allowZoomAndPanDas Element svg definiert die Größe des Bereichs, in dem die Graphikerscheint. x,y geben die Koordinaten der Zielposition an. Das AttributallowZoomAnd Pan (default:true) erlaubt Zoomen und Schwenken.
Die SVG-ObjekteSVG kennt drei Arten von Objekten:
- Vektorbasierte Geometrie- Rasterbilder-Texte
SVG-Viewer stellen die Graphik üblicherweise in hoher Qualitätdar, unter Zuhilfenahme von Antialiasing-Techniken. Dabei wird intern eine hierarchische DOM-Struktur aufgebaut, die einen Zugriffauf die einzelnen Elemente und deren Attribute erlaubt.Elemente können hinzugefügt, gelöscht und neu innerhalb der Hierarchie angeordnet werden.
DOM – Document Object ModelPlattform- und Sprachenneutrales Interface. Erlaubt Programmen und Scripten, dynamisch auf den Inhalt, die Struktur und die Stile von Dokumenten zuzugreifen und diese zu verändern. Das DOM unterstützt ein Standardsetvon Objeten zur Repräsentation von HTML und XML Dokumenten und ein Standardmodell, das für die Kombinationdieser Objekte zuständig ist.
Vektorbasierte Geometrie
Die Geometrie gliedert sich in folgende Basis-Typen:Bei diesen Elementen sind nur die wichtigsten Attribute angegeben.Ergänzungen sind in der Spezifikation des W3C weiter ausgeführt.SVG erlaubt die Anwendung von unterschiedlichen Objektmodifikationenwie Farbverläufe, Transparenz oder Beschneidungspfade.
Rechteck►rect x, y, width, height (Optional rx, ry für gerundete Rechtecke)
Kreis►circle cx, cy, rDie Parameter definieren Zentrum und Radius des Kreises
Vektorbasierte GeometrieEllipse►ellipse cx, cy, rx, ryHier werden Zentrum sowie der x/y Achsenradius definiert
Linie►line x1, y1 x2, y2x1, x2, y1, y2 geben den Start- und Endpunkt von Linien an
Polylinie► polyline x1,y1 x2,y2 xn,ynMehrgliedrige Linie, nicht geschlossen, x/y Koordinatenpaare, durchLeerzeichen getrennt (Bsp.: „40,40 40,80 90,200 74,210“)
Polygon►polygonWie bei Polylinie, die Figur wird automatisch geschlossen
Text in SVG
Texte nehmen in SVG eine ähnliche Stellung ein, wie dieGeometrietypen. So kann er beschnitten werden oder als Beschneidungspfad dienen. Auch kann er transformiert undanimiert werden.Desweiteren werden alle gebräuchlichen Formatierungs-möglichkeiten unterstützt.
Text►text x, y, styleBei Text werden x und y Koordinate angegeben, sowie der Schriftstil,d.h. Schriftart und Schriftgröße.
Rasterbilder in SVG
Obwohl die graphischen Möglichkeiten von SVG sehr umfassend sind, gibt es Fälle bei denen Rasterdaten eingefügt werden sollen oder müssen. Ein typisches Beispiel sind Photographien.
Rasterbilder►image x, y, width, heightx und y bezeichnen auch hier die Koordinaten des Bildes.widht und height die Größe des Bildes.
Transformationen
SVG kennt verschiedene Transformationsarten:- Skalierung- Translation- Rotation - Schrägstellen- Matrix-Operationen
Jedes einzelne Element oder Gruppe von Elementen kann sein eigenes lokales Koordinatensystem haben, das den jeweiligen Transformationsparameter entspricht.
Quelle: Winter, Prototyp für einen thematischen Atlas (2000)
AnimationJedes Element und vorallem dessen Attribute kann animiert werden. Hierbei werden Syntax und Spezifikation von SMIL übernommen. Auch Javascript kann integriert werden.
Animiert werden können u.a.:- Farbe- Geometrie- Lokalität- Transformation
Quelle: Neumann, Example for Animation along a path (2001)
Interessant ist vorallem auch die Möglichkeit, Objekte entlang eines Pfades zu bewegen. Alle Animationen können kombiniert undverschachtelt werden.
Interaktivität
Eine weitere Stärke, die SVG auszeichnet ist die Interaktivität.Interaktivität kann im Client-System und am Server implementiert werden. Unterschiedliche Antwortzeiten sind die Folge. Beide Artenlassen sich kombinieren.
Server Client
Datenbanken und Applikationen zum Selektieren und Berechnen von Daten.
Maus-, Keybord-, Status-Events,um schnell auf Anfragen des Benutzers zu reagieren.
Internetkarten mit SVGWieso SVG (Vektorformat) und nicht ein Pixelformat?
Nicht der einzige, aber ein entscheidender Vorteil: Die Skalierbarkeit.Bei Vergrößerung bleibt die Qualität erhalten, im Gegensatz zu Pixelgraphiken, die den bekannten Treppeneffekt zeigen.
Internetkarten mit SVGWeitere Vorteile von SVG gegenüber einer Pixelgraphik:
- einzelne Kartenelemente lassen sich als Teile eines Informations- systems ansprechen (einzelne Gebäude und Straßen). Diese können mit Links versehen werden und sind so interaktiv nutzbar.
- Größenveränderungen erfolgen ohne Qualitätsverlust, da nicht die komplette Graphik, sondern nur die entscheidenden Parameter verändert werden.
- durch die Basis XML umfasst die Graphik eine vergleichbar geringe Datenmenge und kann somit schneller über das Internet versendet werden.
- durch die open-source-Strategie ist SVG plattformunabhängig
Internetkarten mit SVG
Der Einsatz von Vektorgraphiken ergibt auch für die Kombination von Web und Druck interessante Möglichkeiten:
Aufgrund der eingeforderten Unterstützung von ICC-Profilen kann das neue Format dazu führen, dass die Farbqualität der Grafiken auf dem Bildschirm und die Qualität im Ausdruck sich einander annähern.
Das hat zur Folge, daß die am Bildschirm generierte Karte später im Druck das gleiche Aussehen hat, wie das Bild auf dem Bildschirm. Voraussetzung ist natürlich ein vorhandener Farbmanager.
Internetkarten mit SVG
An seine Grenzen gelangt das Format allerdings, wenn stark strukturierte Karten dargestellt werden sollen, wie das z.B. bei stark differenzierten topographischen Karten der Fall ist.
Dieses Problem kann aber bei den meisten Karten im Internetvernachlässigt werden, da es sich meist um thematische Darstellungen handelt.
Hier wird die Zahl der zu berechnenden Polygone schnell sehr groß und kann an die Grenzen der Rechenleistung führen.Zudem werden dann auch die zu übertragenden Textdateien sehr groß.
weitere Beispiele
weitere Beispiele für SVG-Karten:
- http://tirolatlas.uibk.ac.at/- http://www.carto.net- http://www.karto.ethz.ch/neumann/cartography/vienna/
Vielen Dank für die Aufmerksamkeit
