Das technische und strategische Potential von SVG als standardisierte Grafik-Technologie für grafikorientierte Browseranwendungen

Inhaltsverzeichnis

Abkürzungsverzeichnis

1 Einführung

2 Webgrafiken
2.1 Grafiken im Internet
2.2 Anforderungen an Dateiformate im Internet
2.3 Pixelgrafikformate
2.4 Vektorgrafikformate
2.5 Vektorgrafikformat von Flash
2.6 Vektorgrafik vs. Pixelgrafik

3 Skalierbare Vektor Grafik - SVG
3.1 Freier Standard
3.2 Terminologie
3.3 Entstehungsgeschichte
3.4 Bezug zu XML und XSLT
3.5 Aufbau eines SVG- Dokuments
3.6 Einsatzschwerpunkte im Web
3.7 Schwesterentwicklungen von SVG
3.8 Vergleich SVG als Alternative zu Flash

4 Technische Leistungen und Funktionen von SVG
4.1 Pfade und Formen
4.2 Textuelle Leistungen
4.3 Qualität der Grafik bei Skalierung
4.4 Farben
4.5 CSS- Unterstützung
4.6 Document Object Model (DOM)
4.7 Animationen
4.8 Dynamik und Interaktivität
4.9 Multimedia
4.10 Komprimierung
4.11 (Derzeitige) Grenzen von SVG

5 Software für SVG
5.1 Marktbetrachtungen, Trends, Entwicklungen
5.2 Zeichenprogramme
5.3 Autorenwerkzeuge
5.4 Viewer
5.5 Konverter

6 Einbindung von SVG in Entwicklungswerkzeuge der DEKRA
6.1 Einbindung von SVG in HTML
6.2 Einbindung von PHP
6.3 Einbindung von Java/JSP
6.4 SVG und Lotus Notes

7 Einsatzpotential von SVG für Produktion und Marketing bei DEKRA
7.1 Gegenwärtiger Zustand
7.2 Potentialbewertung und Perspektiven

8 Zusammenfassung und Ausblick

Anhang

Literatur

Abkürzungsverzeichnis

Abbildung in dieser Leseprobe nicht enthalten

Abbildungsverzeichnis

Abb. 1: Unterscheidungsmerkmale von Vektorgrafik und Pixelgrafik

Abb. 2: Qualitätsunterschiede bei Vergrößerungen von Vektorgrafiken und Pixelgrafiken

Abb. 3: SVG Spezifikation 1.1

Abb. 4: SVG Tiny Implementierung in Mobiltelefonen der Firmen Nokia und Ericsson

Abb. 5: Gegenüberstellung von Flash und SVG

Abb. 6: Linearer und radialer Verlauf

Abb. 7: Document Object Model

Abb. 8: Unterschied einer Pixelgrafik und einer konvertierten SVG

Abb. 9: Vektorgrafik eines Fahrzeugs bei DEKRA

Abb. 10: Manuell programmiertes DEKRA- Logo

1 Einführung

Das Internet vermochte in jüngster Vergangenheit wie kein anderes Medium zuvor die Kommunikations- und Informationsstrukturen zu revolutionieren. Basierend auf dem rasanten, technologischen Fortschritt entwickelte sich das Internet zu einem unverzichtbaren Bestandteil der modernen Informationsgesellschaft. Die fortwährenden, technologischen Neuerungen führten zu maßgeblichen Veränderungen im Erscheinungsbild des World Wide Webs. Präsentierte es sich vor einigen Jahren rein textbasiert und statisch, so stellt es heute ein Sammelsurium unterschiedlicher, multimedialer Inhalte mit einem wesentlich höheren Maß an Dynamik und Lebendigkeit dar. Diese immense Vielfalt an Formaten und Werkzeugen machen die Erstellung und Wiederverwendung der elektronischen Grafiken aufwendig und teuer. Bisher mangelte es daher im Web an einem offenen, standardisierten Vektorgrafikformat, das dieses Problem lösen könnte. Aus diesem Grunde verabschiedete das World Wide Web Consortium im Jahre 2001 einen XML- basierten Standard namens Scalable Vector Graphics (SVG).

Laut einigen Ideologen, handelt es sich bei diesem vektorbasierten, zweidimensionalen Grafikformatstandard um The Next Big Thing. Dabei stellt sich die Frage: Entwickelt sich SVG in Zukunft zum Killer von Macromedia Flash oder zur Totgeburt? Gemäß dem Motto Ein Bild sagt mehr als 1000 Worte eröffnen SVG- Dokumente aufgrund ihrer vielfältigen Funktionen und Leistungen vollkommen neuartige Möglichkeiten.

Ziel der vorliegenden Diplomarbeit ist es, einen Gesamtüberblick über die SVGTechnologie aufzuzeigen. Die Darstellung erfüllt die Aufgabe, im Rahmen der permanenten Überarbeitung der IT- Architektur der DEKRA AG, eine Antwort auf die Frage zu finden, inwieweit die SVG- Technologie geeignet ist, die steigenden Anforderungen hinsichtlich anspruchsvoller Grafik in browsergestützten Applikationen als Standard- Technik abzudecken.

Um das Ziel zu erreichen, wird der Unterschied von Pixel- und Vektorgrafik herausgearbeitet und das SVG- Konzept vorgestellt. Eine Markt- und Softwareanalyse sowie eine Trend- und Entwicklungsabschätzung erweitern die bislang rein technische Betrachtung. Die Darstellung der Einbindungsmöglichkeiten in die Entwicklungsumgebungen bei DEKRA sowie der Potentiale des SVG- Einsatzes in den DEKRA-Dienstleistungen runden das Bild ab und liefern ein aussagefähiges Kriterienbündel für die Bewertung dieses modernen, technologischen Ansatzes.

2 Webgrafiken

2.1 Grafiken im Internet

Grafische und fotografische Darstellungen transportieren Informationen meist um ein Vielfaches schneller und genauer als textliche Beschreibungen. Sie rufen einen höheren Aufmerksamkeitswert hervor und werden somit vorrangig der kognitiven¹ Verarbeitung zugeführt. Bei parallelem Einsatz zu Textinformationen verdoppeln sie den Informationsfluss und steigern somit die Speicherfähigkeit im menschlichen Gedächtnis signifikant.²

Durch die verstärkt kommerziellen Interessen im Internet kommt dort der Grafik eine immens wachsende Bedeutung zu. Sie dienen nicht mehr nur der Informationsvermittlung, sondern auch dem Wecken von Emotionen und Assoziationen, um dem Benutzer eine Atmosphäre und eine Corporate Identity³ zu vermitteln. Auch die Wahrnehmungs- und Farbpsychologie wirkt längst richtungsweisend auf die Gestaltungsregeln des Webdesigns ein.⁴ Die Grafik ist ein wichtiges Kompositionselement und wird gezielt eingesetzt, um unterbewusst Botschaften zu suggerieren. Letztlich wird die Grafik zum Instrument des Marketing, um den Kunden für sich zu gewinnen und an sich zu binden. Da das Angebot der Web-Sites proportional stärker zunimmt als die Anzahl der Benutzer im Web, sind die Anbieter noch mehr auf das Urteil der Verbraucher angewiesen.⁵ Somit steigen die Anforderungen an das verbraucherorientierte Web-Design.

Eine Grafik wird in einem Datenformat bzw. Dateiformat gespeichert. Unter einem Dateiformat wird die Art der Sicherung auf einem Speichermedium verstanden.⁶ Werden die Dateiformate nicht nur lokal auf dem eigenen Rechner verwendet, sondern werden sie weltweit zugänglich gemacht und verbreitet, so sind an solche Formate weitergehende Anforderungen zu stellen.

2.2 Anforderungen an Dateiformate im Internet

Einige wichtige Anforderungen an Dateiformate werden nun aufgeführt und erläutert.⁷

Flexibilität und Erweiterbarkeit

Durch die Schnelllebigkeit der Computer- und Internetbranche ist es für ein Datenformat bedeutend, erweiterbar zu sein, um sich nicht vorhersehbaren Änderungen anpassen zu können.

Standardisierung

Durch die Standardisierung eines Datenformats durch das W3C⁸ oder die ISO⁹ wird eine schnellere Verbreitung der Akzeptanz erlangt. Die öffentlich spezifizierten Formate sind herstellerunabhängig, lizenzfrei, damit kostenlos und im Gegensatz zu den proprietären Formaten sind Mitwirkungsmöglichkeiten bei Änderungswünschen möglich.¹⁰

Schnelligkeit

Empirischen Untersuchungen zu Folge ist ein Benutzer nur bereit, wenige Sekunden auf das Erscheinen der Grafik zu warten.¹¹ Folglich sollte ein Format schnellstmöglich über das Internet übertragen werden können. Geeignete Techniken sind zum Beispiel diverse Komprimierungsverfahren.

Indizierbarkeit

Das Internet wächst unaufhaltsam, das Wissen der Menschen wächst mit. Der aus den Medien bekannte Redakteur, Reporter, Moderator und Geschichtswissenschaftler Franz Alt hat eindrucksvoll dargestellt, dass sich in den letzten 100 Jahren das Wissen der Menschheit verzehnfacht hat.¹² Da das Internet als Informationsmedium diese Datenmenge repräsentiert, spielt die Indizierbarkeit und damit die Möglichkeit der Recherchierbarkeit von Wissen im Internet die tragende Rolle.

Lesbarkeit für den Menschen

Bei Einführung eines Formats stehen meist nicht die entsprechend hochwertigen Editorenprogramme zur Verfügung. Im Gegensatz zu Binärcode ermöglicht eine textbasierte Sprache im alphanumerischen Format dem Benutzer den Klartext ohne viel Aufwand lesen und verstehen zu können.

Diese Anforderungen sollte ein Grafikformat erfüllen, um den Sprung in die verteilte Welt des Internets zu schaffen.¹³

Grafiken lassen sich hinsichtlich ihres modularen Aufbaus in zwei Arten klassifizieren: Pixelgrafiken (Rastergrafiken) und Vektorgrafiken.

2.3 Pixelgrafikformate

Die überwiegende Anzahl der digitalen Bilder im Internet setzt sich aus einzelnen Punkten (Pixel¹⁴ ) zusammen. Ihnen liegt ein Raster zugrunde, welches mit x Pixeln für die Breite und y Pixel für die Höhe gefüllt wird. In den Pixelformaten entsteht nur dann eine Linie, wenn jedes Pixel darauf wirklich gesetzt ist. In den einzelnen Pixeln wird der Farbwert, (Farbtiefe) gespeichert. Die Dateigröße eines Bildes hängt proportional von der Größe des Bildes und der Farbtiefe ab. Die Auflösung des Bildes ist ein weiterer wichtiger Faktor der Dateigröße. In der Auflösung wird definiert, wie viele Pixel auf einer physikalisch bestimmten Fläche abgebildet werden können.¹⁵ Vergrößerungsoperationen bedingen einen merklichen Qualitätsverlust.

Die gängigsten Grafikformate im Internet sind GIF und JPEG, auch die nicht so verbreiteten Formate PNG und JPEG2000 werden kurz erwähnt. In Anlage 1 befindet sich eine Vergleichsübersicht von GIF, JPEG und PNG. Vorrausgreifend kann gesagt werden, dass es das ideale Format nicht gibt. Jedes Format hat in Bezug auf die Lizenzgebundenheit, das Motiv und das Verhältnis von Qualität und Dateigröße Vor- und Nachteile.

GIF (Graphics Interchange Format)

Die überwältigende Mehrzahl der Bilder im Web steht im GIF- Format. Praktisch alle Web- Browser, die Grafiken unterstützen, unterstützen auch das allgegenwärtige GIF- Format.¹⁶ Das GIF- Format beinhaltet ein Komprimierungssystem, mit dem die Größe der Dateien verlustfrei komprimiert wird. Wesentliche Vorteile des GIF- Formats sind die Fähigkeiten, relativ leicht Animationen zu generieren und Bildteile transparent zu gestalten. Die Darstellung ist dagegen auf 256 Farben beschränkt. Ein weiterer Nachteil ist die Lizenzgebühr für kommerzielle Anbieter, die dieses Format nutzen. Die Firma Unisys beansprucht nämlich das Patent auf das zugrunde liegende Komprimierungsverfahren.¹⁷

JPEG (Joint Photographic Expert Group)

Ein anderes weit verbreitetes und sehr praktisches Format für Grafikdateien wird JPEG genannt. Es bezeichnet eigentlich kein Dateiformat sondern ein verlustbehaftete Komprimierungsverfahren¹⁸ und wird dafür verwendet, die Größe der Grafikdateien auf ein Minimum zu beschränken.¹⁹ Im Gegensatz zu GIF- sind JPEG- Bilder Vollfarbbilder (24-Bit oder True Color) und erzielen so bei den meisten Fotos und Bildern exzellente Ergebnisse. Durch die enormen Komprimierungsraten sind sehr hohe Ladegeschwindigkeiten möglich.

PNG (Portable Network Graphics)

Das PNG²⁰ wurde als Nachfolger des GIF- Formats entworfen und vom W3C abgesegnet. Neben dem verlustfreien Kompressionsverfahren unterstützt das PNG- Format Bilder mit einer Farbtiefe von 24 Bit.²¹ Jedoch kämpft dieses Format noch um die Browserunterstützung und die Aufmerksamkeit des Publikums²² obwohl es als kostenlose GIF- Alternative auch ohne Animationsmöglichkeit langsam auf dem Vormarsch ist.²³

JPEG 2000

JPEG 2000 ist ein neuer Standard, der durch eine verlustbehaftete Kompression das Bild bei gleicher Qualität um etwa 20 bis 30 Prozent stärker komprimiert als das alte JPEG.²⁴,²⁵

Es erlaubt unterschiedliche Komprimierungsfaktoren innerhalb einer Datei und einen Passwortschutz.

2.4 Vektorgrafikformate

Eine Vektorgrafik wird durch ihre geometrischen Charakteristika definiert und als Menge geometrischer Objekte gespeichert. Es wird nicht jedes Pixel einer Grafik gespeichert, sondern nur die Punkte, die für die mathematische Beschreibung notwendig sind. Bei einer geraden Linie wäre das nur der Anfangs- und der Endpunkt und idealerweise die Dicke und Farbe der Linie.²⁶ In einer vektororientierten Datei werden alle diese Informationen quasi als Rechenvorschrift gespeichert²⁷ und verbrauchen daher nur einen Bruchteil des Speicherplatzes der Pixelbilder. Da die Grafik für jede Ansicht neu berechnet wird, erlaubt sie die Darstellung eines beliebigen, stufenlosen Zoomgrades ohne das Qualitätseinbußen auftreten.

Ein Nachteil ist jedoch der Einsatz bei Fotos, da dort jede einzelne Grau- und Farbabstufung aufwändig beschrieben werden muss.²⁸

Als bedeutende Vektorgrafikformate sind das Flash- Format der Firma Macromedia und die XML basierten und vom W3C als Standard empfohlenen Scalable Vector Graphics zu nennen.

2.5 Vektorgrafikformat von Flash

Das Programm Flash der Firma Macromedia wird von vielen Gestaltern verwendet um professionelle Firmenpräsentationen, Menüs oder Spiele im Web anzufertigen.²⁹ Die kreativen Möglichkeiten dieses Animationsprogramms sind nahezu grenzenlos.³⁰ Flash ist ein proprietäres Autorensystem, mit dem Objekte, wie z.B. Zeichnungen, erstellt und Aktionen und damit Interaktivität hinzugefügt werden können.³¹ Eine wesentliche Neuerung, die Flash mit sich brachte, war die Ausrichtung auf Vektorgrafiken. Durch die Stärke der freien Skalierbarkeit und der klaren Darstellung der Grafiken wird Flash heutzutage so häufig wie möglich eingesetzt.³² Die animierten Flash- Filme implizieren ein junges, modernes und dynamisches Image und das ist heutzutage oft einziges Unterscheidungskriterium von Konkurrenzprodukten. Der Einsatz von Flash hat Film- und Multimediacharakter und erleichtert somit die Produktpositionierung und -werbung im Internet.³³

Die Dateinamenerweiterung des Flash- Formats lautet .fla oder bei starker Komprimierung, Unveränderlichkeit und Veröffentlichung .swf. Die Dateien sind streamingfähig³⁴ und binär kodiert. Als Interpreter wird ein Flash Plugin namens Flash Player benötigt, der mittlerweile bei über 98% aller Browser installiert ist.³⁵

2.6 Vektorgrafik vs. Pixelgrafik

Das nachfolgende Schaubild zeigt wichtige Unterscheidungsmerkmale von Vektor- und Pixelgrafiken im direkten Vergleich³⁶:

Abbildung in dieser Leseprobe nicht enthalten^{37 38}

Abb. 1: Unterscheidungsmerkmale von Vektorgrafik und Pixelgrafik

Die folgende Abbildung zeigt die Qualitätsunterschiede der Grafikformate bei Vergrößerungen. Bei der Pixelgrafik (links zu sehen) setzt beim Zoomen die Pixelwirkung ein. D.h. die Pixel sind nun einzeln erkennbar und das Bild wirkt verschwommen und unscharf. Dagegen ist bei der Vektorgrafik (rechts zu sehen) kein Qualitätsverlust zu erkennen.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 2: Qualitätsunterschiede bei Vergrößerungen von Vektorgrafiken und Pixelgrafiken

3 Skalierbare Vektor Grafik - SVG

3.1 Freier Standard

Der Begriff Standard bedeutet Richtschnur oder Norm.³⁹ Die internationale Standardisierungsorganisation ISO definiert den Begriff Standard als dokumentierte Vereinbarung, die gewährleistet, dass Material, Produkte, Prozesse und Dienstleistungen ihren Zweck unterstützen.⁴⁰ Grundsätzlich lassen sich Standards hinsichtlich zwei Verbreitungsarten unterscheiden. Der De-facto-Standard, der aufgrund seiner Verbreitung in der Öffentlichkeit zu einem Standard erhoben wird und der De-jure-Standard, der durch Zustimmung von einem offiziellen Standardisierungsgremium beschlossen wird.⁴¹ Bezüglich der Zugänglichkeit wird in proprietäre und freie Standards differenziert. Proprietäre Standards werden von Firmen entwickelt und vermarktet. Jedoch verlieren sie an Durchschlagskraft, wenn sie von den Anwendern durch hohe Lizenzkosten erkauft werden müssen. Ein gutes Beispiel hierfür sind die UMTS-Kosten oder Softwarepatente. Freie Standards hingegen können kostenlos verwendet werden. Meist zeichnen sich die freien Standards durch folgende Eigenschaften aus:

- Viele Interessierte erarbeiten einen Standard, dadurch werden Fehler eher aufgedeckt und beseitigt.
- Der Code kann aus anderen oder für andere Projekte genutzt werden.
- Sie haben meist internationalen und branchenübergreifenden Charakter, um die breite Masse der Benutzer anzusprechen.
- Es gibt eine frei zugängliche Dokumentation.
- Die Offenheit bringt Diskussionsmöglichkeiten für Verbesserungsvorschläge mit sich.

Ein freier Standard des World Wide Web Consortium (W3C) ist SVG, die Scalable Vector Graphics.

3.2 Terminologie

Was sind Skalierbare Vektor Grafiken ?

SVG stellt einen XML- basierten Vektorgrafikstandard dar, der vom W3C in Leben gerufen wurde.⁴² Dabei repräsentiert es eine Sprache, die das Potential hat, die Gestaltung im Web zu revolutionieren.⁴³ Es ist hauptsächlich für den Einsatz im Internet gedacht und kann sowohl als Ersatz von Pixelgrafiken wie GIF, JPEG oder PNG, als auch von proprietären Vektorgrafiken wie FLA bzw. SWF von Flash für eine Webseite verwendet werden. SVG stellt nicht nur Vektorgrafiken da. Es kann über das Tag <image> auf Rastergrafiken referenzieren. So lässt SVG eine strukturierte Beschreibung von Vektorgrafiken und gemischten Vektor-/Rastergrafiken zu.

Skalierbar

Der Begriff Skalierbar bedeutet, dass keine Beschränkung auf eine feste Pixelgröße besteht. Ist eine Grafik skalierbar, kann sie in unterschiedlichen Größen in eine Internetseite eingebettet werden. Sie kann somit beliebig vergrößert werden, z.B. um Details anzuzeigen oder Menschen mit Sehbehinderungen zu unterstützen.

Vektor

Ein Vektor dient einer mathematischen Wegbeschreibung. Vektorgrafiken enthalten geometrische Objekte wie Linien und Kurven. Sie sind flexibler als Pixelgrafiken, da nicht jedes Pixel, sondern nur die mathematischen Formeln separat abgespeichert werden. Die Vektorgrafiken werden erst vom Client gerastert bzw. berechnet, so müssen viel weniger Informationen über das Netzwerk übertragen werden.

Grafik

Grafiken sind visuell strukturierte Informationsträger.⁴⁴ In der Medientechnik wird der Begriff Grafik verwendet, wenn es sich um eine Abbildung basierend auf geometrischen Grundformen handelt, z.B. Firmenlogos. Dagegen werden Abbildungen, die nicht aus geometrischen Grundformen bestehen, z.B. Fotos, als Bilder bezeichnet.⁴⁵

3.3 Entstehungsgeschichte

Im April 1998 reichten die Firmen Adobe, IBM, Netscape und Sun einen Spezifikationsvorschlag bei der W3C über die Precision Graphics Markup Language (PGML) ein. Einen Monat später machten die Firmen Hewlett Packard, Microsoft, Macromedia und Visio dem W3C einen Vorschlag zur Vector Markup Language (VML). Ein weiterer Vorschlag kam von den Firmen PRP und PCSL mit der Hyper Graphics Markup Language (HGML). Fast alle Vorteile dieser Sprachen wurden schließlich von einer neue gegründeten W3C- Arbeitsgruppe im Oktober 1998 zusammengefasst, optimiert und ergänzt und als SVG veröffentlicht.⁴⁶ Die Arbeitsgruppe setzt sich aus 29 führenden Firmen aus der Computerbranche zusammen, darunter Adobe Systems, AOL, Apple, IBM, Nokia, Corel, Sun Microsystems.⁴⁷

Am 4. September 2001 wurde die Version 1.0 von SVG veröffentlicht und ist seitdem offizieller Standard, auch Recommendation⁴⁸ genannt. Am 14. Januar 2003 folgte Version 1.1 mit den Mobilprofilen von SVG und mit zahlreichen kleinen Veränderungen, meist bestehend aus Grammatikkorrekturen, um den modularen Aufbau weiterzuentwickeln⁴⁹,⁵⁰ Hinsichtlich Version 1.2 wurde vom W3C am 18.03.2004 das sechste Working Draft angekündigt. D.h. diese Version ist noch kein offizieller Standard sondern durchläuft gerade den festgeschriebenen Weg bis zur Recommendation.⁵¹ Die Version 1.2 soll das relative Schattendasein von SVG mit mehreren Hundert Änderungen beenden. Es werden u.a. Änderungen im Bereich der Namensraumflexibilität hinsichtlich XML erwartet.⁵² Zusätzlich beinhaltet es ein Audio- und ein Video- Element und wird damit multimediatauglich.⁵³ Gleichzeitig wird das Rendering Custom Content (RCC) Modell eingeführt, das zu den bedeutendsten Neuerungen gehört und später näher erläutert wird. SVG 1.2 sollte im März 2004 als Recommendation verabschiedet werden⁵⁴, liegt momentan aber immer noch nur als Working Draft vor (Stand 10.05.2004).

3.4 Bezug zu XML und XSLT

XML

Die Extensible Markup Language (XML)⁵⁵ ist eine Metasprache⁵⁶ zur Beschreibung von strukturierten Daten. Da HTML voller Einschränkungen ist und ein flexibles, erweiterbares und dennoch einfaches grammatisches System für die Entwicklung neuer Auszeichnungssprachen benötigt wird,⁵⁷ führte das W3C am 10. Februar 1998 XML als Standard zur Dokumentenauszeichnung ein.⁵⁸ Mit Hilfe einer Document Type Definition (DTD) oder alternativ eines XML- Schemas wird die Struktur von XML- Dokumenten verbindlich und zentral festgelegt.

Ein Beispiel für den grundlegenden Aufbau eines XML- Dokuments, einer DTD und eines XML- Schemas wird in Anlage 3 verdeutlicht.

Als Folge der unabhängigen Datenstruktur und dem Aufbau aus reinem Text einer XML- Datei hat sich XML inzwischen zu einem immer wichtiger werdenden Austauschformat für elektronische Daten entwickelt. Da es sich beim W3C um ein sehr gewichtiges Gremium handelt, ist davon auszugehen, dass XML auch in Zukunft eine bedeutende Rolle im Internet spielen wird. Es ist lizenzfrei, plattformunabhängig und nicht proprietär.⁵⁹

SVG und XML

In XML werden Namensräume festgelegt, die innerhalb ihres Bereichs bestimmte Befehle definieren. So wird die eindeutige Identifizierung einer Gruppe von Elementen und Attributen möglich.⁶⁰ Für SVG wurde eine spezielle DTD erstellt, die alle Namensräume von SVG enthält. In diesen Namensräumen sind z.B. alle Standardformen wie Rechteck, Kreis und Pfad genauestens beschrieben.⁶¹

Da SVG eine Untermenge von XML ist, lässt sich SVG nicht nur für attraktive Web- Oberflächen einsetzen, sondern vor allem für den anwendungsorientierten Einsatz in Business-Lösungen. Die Basisdaten liegen bereits in modernen E-Business- Anwendungen in XML- Form vor.⁶² So wird sich sicherlich SVG einen festen Platz in der XML- Welt erobern.⁶³ Bereits auf der XML- Europe 2002 in Barcelona, einer sehr anerkannten XML- Konferenz, erwies sich SVG als eine der Killer- Applikationen von XML.⁶⁴

XSLT

XSLT ist eine XML- Anwendung, die definiert, wie ein XML- Dokument in ein anderes transformiert wird, um den Inhalt des XML- Dokuments sichtbar zu machen. Da ein einfaches Cascading Stylesheet (CSS) den Anforderungen von XML nicht gerecht wird, wurde mit XSLT ein Stylesheet- Modell geschaffen, das genauso leistungsstark, flexibel und einfach wie XML ist.⁶⁵ Dabei ist XSLT weniger ein Stylesheet, sondern mehr eine beliebte Sprache für die Verarbeitung und Anzeige von XML- Daten.⁶⁶

SVG und XSLT

XML- Daten werden als Quelle genutzt und in SVG- Code verarbeitet. Dadurch wird eine Scalable Vector Graphic erzeugt. So lassen sich z.B. Wahlergebnisse automatisch in eine Scalable Vector Graphic umwandeln und als animierte Charts darstellen. Prinzipiell genügt als Arbeitsschritt eine Transformation. Sehr viele Navigationselemente sind heutzutage Grafiken, die bei einer Navigation oft neu erzeugt werden müssen. Da SVG auch Benutzereingaben mittels Javascript verarbeitet, liegt hier ein hohes Potential. XSLT kann bei einer Automation der Erzeugung von Text und Grafik dabei eine große Hilfe sein.⁶⁷ Die neueste Version XSLT 2.0 liegt seit November 2003 als Working Draft vor⁶⁸ und unterstützt die Darstellung von SVG noch effizienter.⁶⁹

3.5 Aufbau eines SVG- Dokuments

Das Grundgerüst eines einfachen SVG- Dokuments sieht folgendermaßen aus:

Abbildung in dieser Leseprobe nicht enthalten

Erläuterung

#1: Hier steht der Dokument- Typ XML. Der nächste Parameter beschreibt die Sprache, die hier mit der Angabe iso-8859-1 Umlaute in der deutschen Sprache verarbeiten kann. Der letzte Parameter in dieser Zeile gibt an, ob es sich um ein eigenständiges Dokument handelt oder auf externe Quellen zu greift.

#2/ Es erfolgt die Angabe der DTD, damit die SVG- Tags erkannt werden können und auf #3: die svg10.dtd referenziert, die mit kompletter URL angegeben wird. #4: Es beginnt die eigentliche Grafik. Sie startet mit dem Root- Element <svg> und mit zwei Parametern width und height, der Breite und Höhe der Canvas (Zeichnungsfläche).

#4/#5:Daraufhin werden zwei Namensraum- Deklarationen vorgenommen, deren Funktionalitäten in diesem Fall schon in der DTD implementiert sind und deren Einsatz daher optional ist.

#6: Ein Kreis wird gezeichnet (circle). Der Parameter cx gibt die horizontale Position des Kreismittelpunktes, der Parameter cy die vertikale Position des Kreismittelpunktes und r den Radius des Kreises an.

#7: Mit dem Parameter style wird die Formatierung des Kreises festgelegt. Durch den Parameter fill wird der Kreis mit einer Farbe, angegeben in RGB- Werten, gefüllt. Der Parameter stroke gibt die Linienfarbe um den Kreis, stroke-width die Dicke der Linie an.

#8: Die Grafik wird mit dem End- Tag </svg> geschlossen.

3.6 Einsatzschwerpunkte im Web

Da der SVG- Viewer mit seinen derzeit 2,3 MB, im Vergleich zum Flash- Player mit weniger als 400 kb, relativ groß und damit die Downloadzeit hoch ist, kommen momentan folgende Einsatzschwerpunkte im Web für SVG in Frage:

Im Bereich der Kartografie gibt es mittlerweile zahlreiche SVG- Projekte und -Systeme. Ein Beispiel für eine SVG- Map ist das Canyoning- Forum Österreich⁷⁰, auf der eine interaktive Übersichtskarte von Österreich mit SVG erstellt wurde. Hier lässt sich die interaktive Karte ohne Qualitätsverlust vergrößern und zahlreiche Filter ein- und ausschalten.

Im Bereich der Infografik lassen sich zahlreiche Seiten aufführen. Ob Theaterplatzreservierungen, Fahrplanauskünfte, animierte Charts als Datenvisualisierung oder Spiele, die Zahl der SVG- Projekte steigt immer weiter an. Gute Beispiele dazu sind in der Adobe SVG- Zone⁷¹ zu sehen.

Technische Zeichnungen können in SVG ideal dargestellt werden. In diesem Bereich sind Vektorgrafiken schon weit verbreitet.⁷² Da bei DEKRA sehr viele technische Abbildungen Verwendung finden, klingt dieses Thema natürlich besonders interessant. Auf der Seite der Firma in-integrierte Informationssysteme GmbH ist ein Beispiel zur technischen Illustration zu sehen.⁷³ Aktuelle Beispiel-Seiten werden in Anlage 5 aufgelistet.

3.7 Schwesterentwicklungen von SVG

Die Schwesterentwicklung SVG Print soll in Zukunft den Druckstandard im Internet darstellen. SVG Print befindet sich zwar gegenwärtig noch im Entwicklungsstadium, verspricht aber bereits jetzt wesentliche Verbesserungen im Druckbereich zu erzielen. So sollen neue Elemente und Funktionen in der Spezifikation dafür Sorge tragen, dass z.B. eine exakte, seitenbasierte Positionsbestimmung auch auf ausgedrucktem Papier gewährleistet werden kann. Die Elemente werden bei der Bildschirmausgabe ignoriert aber beim Drucken (beispielsweise zur exakten Positionsbestimmung) auf dem Papier umgesetzt.⁷⁴

Mit der Schwesterentwicklung Mobile SVG wurden die Grundlagen geschaffen, den Einsatz von SVG nicht nur auf das Internet zu begrenzen, sondern auch auf die mobile Kommunikation auszudehnen. Für unterschiedlich leistungsstarke Endgeräte wurden zwei Profile definiert, die eine Untermenge von SVG darstellen.

Zum Einen SVG Basic 1.2 (SVGB), welches für PDAs und Mini-Computer geeignet ist. Zum Andern SVG Tiny 1.2 (SVGT), das für so genannte low level- Geräte wie Mobiltelefone zurechtgeschnitten ist. Durch den geringen Speicher, die niedrige CPU- Leistung und begrenzte Darstellungsmöglichkeiten der mobilen Geräte, bringen die Mobile SVG- Profile Beschränkungen im Bezug auf den Inhalt, die Attributtypen, etc. mit sich.⁷⁵

Die nachstehende Abbildung liefert einen graphischen Überblick über die Zusammenhänge der vorgestellten Profile von SVG in der Spezifikation 1.1.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 3: SVG Spezifikation 1.1

Die Einsatzmöglichkeiten dieser beiden Co-Standards sind enorm: Sie reichen von Zusatzfeatures wie animierte Bildübertragung, Multimedia Messaging bei Mobiltelefonen und Entertainment über GPS bis hin zu industriellen Anwendungen wie Konstruktionsplänen oder grafischen Aktienverläufen für Aktien- Händler.

Es gibt bereits einige Implementierungen dieser Standards:

Das erste Mobiltelefon, basierend auf SVG Tiny, ist das V601SH der Firma Sharp, dass in Japan von Vodafone vertrieben wird.⁷⁶,⁷⁷ In Anlage 4 wird das Mobiltelefon V601SH und der technische Prozess vom elektronischen Dokument hin zur SVG- Anzeige auf dem Mobiltelefon abgebildet.⁷⁸

Bereits im Sommer 2002 belegte ein japanisches Projekt eine anschauliche Anwendung für den Einsatz von SVG Tiny. Es unterstützt die Navigation von Fußgängern in Großstädten mit einem Mobiltelefon als Endgerät.⁷⁹ Mittlerweile vermarkten Firmen wie z.B. BitFlash, CSIRO, Intesis, KDDI und ZOOMON Produkte mit SVG Unterstützung.⁸⁰ Auch Weltunternehmen wie Ericsson oder Nokia entwickeln bereits Produkte, die auf den SVG- Derivaten basieren. Die folgende Abbildung zeigt zwei Beispielanwendungen auf Mobiltelefonen der Firmen Nokia und Ericsson.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 4: SVG Tiny Implementierung in Mobiltelefonen der Firmen Nokia und Ericsson

[...]

---

¹ wahrnehmend, vorstellend, denkend, erinnernd

² Vgl. Hammer, N. / Ruske, J. (2002), S.12 ff.

³ einheitliches Erscheinungsbild eines Unternehmens

⁴ Vgl. Baier, S. / Pollak, C. (2003), S.6

⁵ Vgl. Kentie, P. (2000), S.151 f.

⁶ Vgl. Grabmeyer, F. / Schimmer, M. (2000), S.6

⁷ Vgl. Grabmeyer, F. / Schimmer, M. (2000), S.8 ff.

⁸ Das W3C, World Wide Web Consortium, ist eine internationale Mitgliedsorganisation, die es sich zur Aufgabe macht, das World Wide Web zu seinem vollen Potential zu führen, indem sie allgemeine Protokolle entwickelt, fördert und sicherstellt.

⁹ Die ISO, International Standard Organization, ist ein international tätiger Normenausschuss.

¹⁰ Vgl. Kurbel, K. / Twardoch, A. (2000), S.254

¹¹ Vgl. Matz, A. / Kilian, J. (1997), S.83

¹² Vgl. Alt, F. (2003)

¹³ Ein Beispiel für Dateiformate, die sich auf Grund zu geringer Komprimierung, trotz allgemeiner Nutzung, im Internet nicht durchsetzen konnten, ist das Bitmap, kurz BMP.

¹⁴ Kunstwort aus den englischen Worten picture und element.

¹⁵ Die Auflösung wird in dpi (dots per inch) oder in ppi (pixel per inch) gemessen. Üblich sind 72 dpi.

¹⁶ Vgl. Baier, S. / Pollak, C. (2003), S.27

¹⁷ Vgl. Olscha, T. / Stroisch, J. (2003), S.97 f.

¹⁸ Vgl. o.V. (1999)

¹⁹ Vgl. Baier, S. / Pollak, C. (2003), S.28

²⁰ ausgesprochen: PING

²¹ Vgl. Grabmeyer, F. / Schimmer, M. (2000), S.24

²² Vgl. Niederst, J. (2002), S.45 f.

²³ Vgl. Olscha, T. / Stroisch, J. (2003), S.122

²⁴ Vgl. Neumeyer, H. (2001), S.23

²⁵ Vgl. Menn, R. (2000)

²⁶ Vgl. o.V. (o.J.a)

²⁷ Vgl. Olbirch, G. / Quick, M. / Schweickart, J. (2002), S.129

²⁸ Vgl. Fibinger, I. (2002), S.68

²⁹ Vgl. o.V. (o.J.b)

³⁰ Vgl. Kentie, P. (2000), S.305

³¹ Vgl. Busche, N. (2002), S.15

³² Vgl. ebenda, S.22

³³ Eine sehr gute Beispielseite für den Einsatz von Flash ist: www.pixelpharmacy.com

³⁴ Mit der Streaming- Technologie ist es möglich, Medieninhalte abzuspielen, obwohl die Datei noch nicht komplett geladen ist.

³⁵ Vgl. Macromedia Inc. (2004)

³⁶ Vgl. o.V. (1998), S.40 ff.

³⁷ Web Computer Graphics Metafile ist ein Vektorgrafikformat für technische Grafiken mit langem Lebenszyklus und offizieller Standard des W3C.

³⁸ Vector Markup Language ist ein Vektorgrafikformat der Firma Microsoft.

³⁹ Vgl. o.V. (o.J.c)

⁴⁰ Vgl. ISO (2004)

⁴¹ Vgl. Vgl. Grabmeyer, F. / Schimmer, M. (2000), S.5

⁴² Vgl. Lilley, C. (2004a)

⁴³ Vgl. Brunner, A. / Knoch, P. / Sturb, G. (1999)

⁴⁴ Vgl. Fibinger, I. (2002), S.64

⁴⁵ Vgl. Fellner, D. (2004), S.112

⁴⁶ Vgl. Fibinger, I. (2002), S.80

⁴⁷ Vgl. Lilley, C. (o.J.)

⁴⁸ Eine Recommendation ist eine offizielle Empfehlung und damit Standard des W3C.

⁴⁹ Vgl. o.V. (2003a)

⁵⁰ Vgl. Schäfer, J / Maaß, O. (2003)

⁵¹ In Anlage 2 ist der fest vorgeschriebene und standardisierte Weg des W3C vom Vorschlag bis hin zur Empfehlung eines Standards zusehen.

⁵² Vgl. Quint, A. (2003)

⁵³ Mehr Informationen dazu im Kapitel 4.9 Multimedia

⁵⁴ Vgl. Adam, A. (2004), S.34 ff.

⁵⁵ offizielle Recommendation: http://www.w3.org/XML/

⁵⁶ Eine Sprache zur Definition von Sprachen nennt man Metasprache.

⁵⁷ Vgl. Kobert, T. (2001), S.35

⁵⁸ Vgl. Harold, E. / Means, S. (2001) , S.3

⁵⁹ Vgl. Salathé, M. (2001), S.12

⁶⁰ Vgl. Niedermair, E. & M. (2002), S.43

⁶¹ Vgl. Adam, A. (2002), S. 21

⁶² Vgl. Schäfer, J / Maaß, O. (2003), S.22

⁶³ Vgl. Krüger, J. / Märtin, C. (2000), S.148

⁶⁴ Vgl. Behme, H. (2002), S.16

⁶⁵ Vgl. Kobert, T. (2001), S.292

⁶⁶ Vgl. Leisegang, C. / Mintert, S. (2004), S.50

⁶⁷ Vgl. Bader, H. (2004), S.74 f.

⁶⁸ Vgl. Kay, M. (2003a)

⁶⁹ Vgl. Kay, M. (2003b)

⁷⁰ http://www.carto.net/ps/canyon/frames.htm

⁷¹ http://www.adobe.com/svg/demos/main.html

⁷² Vgl. Fibinger, I. (2002), S.28

⁷³ http://www.in-gmbh.de/de/Produkte/Visualisierung/sphinx%20SVG/SVG%20Demos.html

⁷⁴ Vgl. Klaß, C. / Ihlenfeld, J. (2004)

⁷⁵ Vgl. Capin, T. (2003)

⁷⁶ Vgl. Kaufmann, J. (2003)

⁷⁷ Vgl. Sharp Corporation (2003)

⁷⁸ Vgl. ebenda

⁷⁹ Vgl. Knobloch, M. (2002), S.16

⁸⁰ Vgl. o.V. (o.J.d)