SVG - Scalable Vector Graphic Webgrafiken mit XML

Übersicht Was ist SVG ? Was ist möglich mit SVG ? Unterschiede zwischen Vektorgrafik und Rastergrafik Anwendungsbeispiele Nachteile? Literatur

Was ist SVG? SVG steht für Scalable Vector Graphic und stellt ein Vektorgrafikformat für das Internet auf XML-Basis dar. Durch XML-Tags werden Vektoren und Grafikelemente definiert. Mit SVG können 2-dimensionale Grafiken in XML dargestellt werden. Drei Arten von Grafik-Elementen sind möglich: Vektor-Formen Bilder Text

SVG - Webstandard Das World-Wide-Web-Consortium (W3C) ist für die Entwicklung von Standards für das WWW zuständig. www.W3C.org Durch das World-Wide-Web-Consortium wurde SVG 1.0 zum Webstandard erklärt. (04.September 2001 W3C Recommendation) Quelle: http://www.w3.org/TR/2001/REC-SVG-20010904/ Zur Zeit läuft die Entwicklung von SVG 1.1/1.2 und MobileSVG (30.April 2002 W3C Candidate Recommendation)

Darstellung von SVG in Browsern Mit Hilfe eines Plug-In können ältere Browser-Versionen SVG-Grafiken darstellen. Zur Zeit : SVG-Viewer 2.0 Download: www.adobe.de (SVG-Zone) Trifft der Browser auf eine SVG-Grafik, wird das Plug-In gestartet, um die Grafik zu rendern und darzustellen. Aufgrund der Empfehlung des World-Wide-Web-Consortiums (W3C) haben die führenden Browserhersteller (Netscape, Microsoft..) angekündigt, dass die nächste Browser-Generation SVG-Formate unterstützen wird.

Was ist möglich mit SVG? Animationen: Farbänderungen, Bewegungen von Objekten auf einer sichtbaren oder unsichtbaren Linie, Drehen und Kippen von Elementen Reaktion auf Benutzeraktionen: Durch ein integriertes DOM (Document Object Model) ist die Steuerung einer Grafik per Skript möglich. Dadurch kann z.B. auf einen Mausklick des Benutzers eine bestimmte Aktion ausgeführt werden. (statische Grafik / interaktive Grafik) Schatten, Farbverläufe und Lichteffekte (Bisher nur Rastergrafiken vorbehalten)

Was ist möglich mit SVG? Hyperlinks in SVG-Grafiken Einzelne Elemente der Grafik können mit einem Hyperlink versehen werden. Dadurch entfallen clientseitge Image-Maps die bei Aufruf einer Webseite erst noch geladen werden müssen. Zoomen ohne Qualitätsverlust Interessant für Landkarten oder andere Grafiken, die größere Flächen mit vielen Details darstellen. (Zoom bei Rastergrafiken ist mit Qualitätsverlust behaftet.)

SVG - Vektorgrafikformat SVG-Grafiken bestehen aus verschiedenen Vektoren. (Vektor: Linie zwischen zwei Punkten) In der Grafikdatei werden die Vektoren gespeichert; nicht binär sondern als Text in Form eines XML-Code. Vorteile: Erstellung von Grafiken mit einfachem ASCII-Editor Änderungen sind ohne großen Aufwand möglich Grafiken können ohne spezielle Programme gelesen und geschrieben werden

Vektorgrafikformat - Beispiel <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="500" height="500"> <circle cx="100" cy="100" r="20"/> <circle cx="220" cy="220" r="20"/> <text x="100" y="160" style="font-family:Arial Black;fill:rgb(0,0,255)"> SVG - das ultimative Grafikformat </text> </svg> Größe der Grafik in Pixel-Angabe Angabe der verwendeten XML-Version Doctype-Angabe: Information für den Browser, dass es sich um eine SVG-Datei handelt

SVG vs. Raster-Grafik(Jpeg, Gif..) Bei Raster-Grafiken werden die einzelnen Bildpunkte in der Grafikdatei abgespeichert, bei SVG nur die Vektoren. Vektoren-Speicherung benötigt viel weniger Platz als die Speicherung einzelner Bildpunkte. Vergleich: Beispiel der vorigen Folie in verschiedenen Grafikformaten SVG vs. GIF / SVG vs. JPEG Ergebiss: JPEG 8,7KB GIF 3,0KB SVG 0,4KB

SVG vs. Raster-Grafik (der Vergleich geht weiter..) SVG-Grafiken bieten ein Zusatzmenue (rechte Maustaste auf Grafik). Zoom-Funktion Auch PAN-Funktion möglich! (ALT-Taste gehalten) Quellcode anzeigen / Grafik speichern

Quellcode Quellcode ist öffentlich einsehbar. Lerneffekt bei Einsteigern und Anfängern Ideen und Konzepte für aufwendige Grafiken verbreiten sich schnell; Qualität der SVG-Grafiken steigt stetig.

Zoom - Vergleich JPEG-Zoom Perfekter SVG-Zoom GIF-Zoom

SVG/Raster-Grafiken-Übersicht Zoom-Funktion bei SVG-Grafiken ohne Qualitätsverlust ! Interessant für Karten und Stadtpläne im Internet SVG-Grafiken brauch erheblich weniger Platz SVG-Grafiken bieten einige Features (Quellcode-Anzeige..)

Aufwendige Grafiken mit Text-Editor? Einfache Grafiken lassen sich schnell per Editor erstellen. Speicherung von bestehender Rastergrafik als SVG-Grafik für größere und aufwendigere Grafiken möglich Adobe Illustrator 9.0 (http://www.adobe.de) Corel Draw 10 (http://www.corel.com) QuarkXPress 5 ... Eine vollständige Liste der derzeitigen Programme um SVG findet sich auf der Seite des W3-Consortiums http://www.w3c.org

Vom einfachen Beispiel zur interaktiven Grafik Die Aktualität von SVG 1.0 zeigt sich in der geringen Quantität von Beispielen für GIS-Projekte. GIS-Projekte nur als Demo-Version mit einfachen Layer-Funktionen. GIS und Multimedia: Verschiedene SVG-Demo-Karten www.dbxgeomatics.com/svg.asp Karte von Karlsruhe www.gis-news.de/svg/samples/karlsruhe Karte mit laufender Animation www.academy-computing.com/svgal/svg-tiger.htm

SVG - Grafik für Computerspiele? Ein Beispiel für ein anderes Einsatzgebiet von SVG-Grafik: www.BattleBots.com

SVG - Nachteile? Die Grafikdaten liegen im Textformat vor und müssen jeweils vom Browser gerendert werden. Diese Berechnung der Daten ist bei einfachen Grafiken nicht sonderlich aufwendig. Bei größeren Projekten jedoch wird eine längere Ladezeit deutlich. Mit den neuen Computer-Generationen und der damit nach oben geschraubten Rechnergeschwindigkeit (>2GHZ?) werden die Ladezeiten jedoch gering gehalten.

Literatur Deutsch Helma Spona „SVG - Webgraphiken mit XML“ Markt-Technik „SVG - Scalable Vector Graphics: für prof. Einsteiger“ Markt-Technik „SVG - Praxiswegweiser und Referenz für den neuen Vektorgrafikstandard“ Englisch J.David Eisenberg „SVG - Essentials“ Internetadressen: www.helma-spona.de www.adobe.de www.w3c.org www.s-v-g.net