Nutzung von SVG zur Erzeugung von Internetkarten

1. Web-GIS und Multimedia Nutzung von SVG zur Erzeugung von Internetkarten Thomas Henkel

2. 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.

3. 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.

4. Einschub: Standards • - de-jure Standard: De-jure Standards sind dokumentierte • Vereinbarungen, die technische Spezifikationen • oder 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) • - de-facto Standard: Dies sind jenen, die zwar nicht durch eine • anerkannte Standardisierungsorganisation • offiziell verabschiedet wurden, die aber durch ihre • Verbreitung allgemein akzeptiert sind.Man spricht • also nicht von einer Norm, es zählt allein die praktische • Verbreitung. Software-Firmen können und wollen aus • technischer Sicht nicht alle de-jure Standards einhalten, • andererseits möchten sie aus Konkurrenzgründen • firmeneigene Standards aufstellen – mit dem Ziel sie • zum de-facto Standard zu erheben.

5. 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.

6. Einbindung in XML Beispiel für die Einbindung einer SVG-Graphik in ein XML-Dokument <?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> ►svg x, y, width, height / allowZoomAndPan Das Element svg definiert die Größe des Bereichs, in dem die Graphik erscheint. x,y geben die Koordinaten der Zielposition an. Das Attribut allowZoomAnd Pan (default:true) erlaubt Zoomen und Schwenken.

7. Die SVG-Objekte SVG kennt drei Arten von Objekten: - Vektorbasierte Geometrie - Rasterbilder -Texte SVG-Viewer stellen die Graphik üblicherweise in hoher Qualität dar, unter Zuhilfenahme von Antialiasing-Techniken. Dabei wird intern eine hierarchische DOM-Struktur aufgebaut, die einen Zugriff auf die einzelnen Elemente und deren Attribute erlaubt. Elemente können hinzugefügt, gelöscht und neu innerhalb der Hierarchie angeordnet werden. DOM – Document Object Model Plattform- 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 Standardset von Objeten zur Repräsentation von HTML und XML Dokumenten und ein Standardmodell, das für die Kombination dieser Objekte zuständig ist.

8. 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 Objektmodifikationen wie Farbverläufe, Transparenz oder Beschneidungspfade. Rechteck ►rect x, y, width, height (Optional rx, ry für gerundete Rechtecke) Kreis ►circle cx, cy, r Die Parameter definieren Zentrum und Radius des Kreises

9. Vektorbasierte Geometrie Ellipse ►ellipse cx, cy, rx, ry Hier werden Zentrum sowie der x/y Achsenradius definiert Linie ►line x1, y1 x2, y2 x1, x2, y1, y2 geben den Start- und Endpunkt von Linien an Polylinie ► polyline x1,y1 x2,y2 xn,yn Mehrgliedrige Linie, nicht geschlossen, x/y Koordinatenpaare, durch Leerzeichen getrennt (Bsp.: „40,40 40,80 90,200 74,210“) Polygon ►polygon Wie bei Polylinie, die Figur wird automatisch geschlossen

10. Text in SVG Texte nehmen in SVG eine ähnliche Stellung ein, wie die Geometrietypen. So kann er beschnitten werden oder als Beschneidungspfad dienen. Auch kann er transformiert und animiert werden. Desweiteren werden alle gebräuchlichen Formatierungs- möglichkeiten unterstützt. Text ►text x, y, style Bei Text werden x und y Koordinate angegeben, sowie der Schriftstil, d.h. Schriftart und Schriftgröße.

11. 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, height x und y bezeichnen auch hier die Koordinaten des Bildes. widht und height die Größe des Bildes.

12. Quelle: Winter, Prototyp für einen thematischen Atlas (2000) 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.

13. Quelle: Neumann, Example for Animation along a path (2001) Animation Jedes 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 Interessant ist vorallem auch die Möglichkeit, Objekte entlang eines Pfades zu bewegen. Alle Animationen können kombiniert und verschachtelt werden.

14. 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 Arten lassen sich kombinieren. Server Client Maus-, Keybord-, Status-Events, um schnell auf Anfragen des Benutzers zu reagieren. Datenbanken und Applikationen zum Selektieren und Berechnen von Daten.

15. Internetkarten mit SVG Wieso 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.

16. Internetkarten mit SVG Weitere 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

17. 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.

18. 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. 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ß. Dieses Problem kann aber bei den meisten Karten im Internet vernachlässigt werden, da es sich meist um thematische Darstellungen handelt.

19. Beispiel für eine SVG-Karte www.stadtteilplan.de

20. 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/

21. Vielen Dank für die Aufmerksamkeit