SVG - Scalable Vector Graphic

Präsentation zum Thema: "SVG - Scalable Vector Graphic"—  Präsentation transkript:

1 SVG - Scalable Vector Graphic
Webgrafiken mit XML

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

3 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

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

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

6 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)

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

8 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

9 Vektorgrafikformat - Beispiel
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <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

10 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

11 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

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

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

14 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..)

15 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 ( Corel Draw 10 ( QuarkXPress 5 ... Eine vollständige Liste der derzeitigen Programme um SVG findet sich auf der Seite des W3-Consortiums

16 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 Karte von Karlsruhe Karte mit laufender Animation

17 SVG - Grafik für Computerspiele?
Ein Beispiel für ein anderes Einsatzgebiet von SVG-Grafik:

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

19 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: