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

II

  Abkürzungsverzeichnis  IV

1  Einführung  1

2  Webgrafiken  2

2.1  Grafiken im Internet  2

2.2  Anforderungen an Dateiformate im Internet  3

2.3  Pixelgrafikformate  4

2.4  Vektorgrafikformate  6

2.5  Vektorgrafikformat von Flash  6

2.6  Vektorgrafik vs Pixelgrafik  7

3  Skalierbare Vektor Grafik SVG  8

3.1  Freier Standard  8

3.2  Terminologie  9

3.3  Entstehungsgeschichte  10

3.4  Bezug zu XML und XSLT  11

3.5  Aufbau eines SVG- Dokuments  13

3.6  Einsatzschwerpunkte im Web  14

3.7  Schwesterentwicklungen von SVG  15

3.8  Vergleich SVG als Alternative zu Flash  17

4  Technische Leistungen und Funktionen von SVG  18

4.1  Pfade und Formen  18

4.2  Textuelle Leistungen  20

4.3  Qualität der Grafik bei Skalierung  21

4.4  Farben  21

4.5  CSS- Unterstützung  22

4.6  Document Object Model (DOM)  23

4.7  Animationen  24

III

4.8  Dynamik und Interaktivität  25

4.9  Multimedia  26

4.10  Komprimierung  27

4.11  (Derzeitige) Grenzen von SVG  27

5  Software für SVG  29

5.1  Marktbetrachtungen Trends Entwicklungen  29

5.2  Zeichenprogramme  31

5.3  Autorenwerkzeuge  31

5.4  Viewer  32

5.5  Konverter  33

6  Einbindung von SVG in Entwicklungswerkzeuge der DEKRA  34

6.1  Einbindung von SVG in HTML  34

6.2  Einbindung von PHP  35

6.3  Einbindung von Java JSP  36

6.4  SVG und Lotus Notes  38

7  Einsatzpotential von SVG für Produktion und Marketing bei DEKRA  38

7.1  Gegenwärtiger Zustand  38

7.2  Potentialbewertung und Perspektiven  39

8  Zusammenfassung und Ausblick  42

Anhang ...................................................................................................................................43   

  Literatur  61

IV

Abkürzungsverzeichnis

API BMP CAD CSS DOM dxf dpi DTD ECMA European Computer Manufacturers Association EPS GIF GPS HGML ISO International Organization for Standardization IRIS Internes Recherche und InformationsSystem IT J2EE JPEG JSP kb MB MIME PDF PGML PHP PHP Hypertext Preprocessor (früher: Personal Homepage Tools)

PNG PS RGB SMIL Synchronized Multimedia Integration Language SVG Scalable Vector Graphic / Skalierbare Vektorgrafik SVGB SVGT

V

SW SWF TIFF u.a.

UN URL VML W3C WebCGM WVG WYSIWYG XBL XLink XML XSL XSLT eXtensible Stylesheet Language Transformations

VI

  Abbildungsverzeichnis  

  Abb 1: Unterscheidungsmerkmale von Vektorgrafik und Pixelgrafik  7

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

  Abb 3: SVG Spezifikation 1 1  15

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

  Abb 5: Gegenüberstellung von Flash und SVG  18

  Abb 6: Linearer und radialer Verlauf  22

  Abb 7: Document Object Model  23

  Abb 8: Unterschied einer Pixelgrafik und einer konvertierten SVG  34

  Abb 9: Vektorgrafik eines Fahrzeugs bei DEKRA  39

  Abb 10: Manuell programmiertes DEKRA- Logo  41

1

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 SVG- Technologie 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

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 1 Verarbeitung zugeführt. Bei parallelem Einsatz zu Textinformationen verdoppeln sie den Informationsfluss und steigern somit die Speicherfähigkeit im menschlichen Gedächtnis signifikant. 2 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 3 zu vermitteln. Auch die Wahrnehmungs- und Farbpsychologie wirkt längst richtungsweisend auf die Gestaltungsregeln des Webdesigns ein. 4 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. 5 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. 6 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.

1 wahrnehmend, vorstellend, denkend, erinnernd

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

3 einheitliches Erscheinungsbild eines Unternehmens 4 Vgl. Baier, S. / Pollak, C. (2003), S.6 5 Vgl. Kentie, P. (2000), S.151 f.

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

3

2.2 Anforderungen an Dateiformate im Internet

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

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 8 oder die ISO 9 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. 10

Schnelligkeit

Empirischen Untersuchungen zu Folge ist ein Benutzer nur bereit, wenige Sekunden auf das Erscheinen der Grafik zu warten. 11 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. 12 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.

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

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

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

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

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

12 Vgl. Alt, F. (2003)

4

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. 13 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 14 ) 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. 15 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. 16 Das GIF- Format beinhaltet ein Komprimierungssystem, mit dem die Größe der

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

14 Kunstwort aus den englischen Worten picture und element.

15 Die Auflösung wird in dpi (dots per inch) oder in ppi (pixel per inch) gemessen. Üblich sind 72 dpi. 16 Vgl. Baier, S. / Pollak, C. (2003), S.27

5

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

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 18 und wird dafür verwendet, die Größe der Grafikdateien auf ein Minimum zu beschränken. 19 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 20 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. 21 Jedoch kämpft dieses Format noch um die Browserunterstützung und die Aufmerksamkeit des Publikums 22 obwohl es als kostenlose GIF- Alternative auch ohne Animationsmöglichkeit langsam auf dem Vormarsch ist. 23

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. 24 T T T T T Q , 25 Es erlaubt unterschiedliche Komprimierungsfaktoren innerhalb einer Datei und einen Passwortschutz.

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

18 Vgl. o.V. (1999)

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

20 ausgesprochen: PING

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

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

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

24 Vgl. Neumeyer, H. (2001), S.23

25 Vgl. Menn, R. (2000)

6

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. 26 In einer vektororientierten Datei werden alle diese Informationen quasi als Rechenvorschrift gespeichert 27 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. 28 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. 29 Die kreativen Möglichkeiten dieses Animationsprogramms sind nahezu grenzenlos. 30 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. 31 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. 32 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. 33

26 Vgl. o.V. (o.J.a)

27 Vgl. Olbirch, G. / Quick, M. / Schweickart, J. (2002), S.129 28 Vgl. Fibinger, I. (2002), S.68 29 Vgl. o.V. (o.J.b) 30 Vgl. Kentie, P. (2000), S.305 31 Vgl. Busche, N. (2002), S.15 32 Vgl. ebenda, S.22 33 Eine sehr gute Beispielseite für den Einsatz von Flash ist: www.pixelpharmacy.com

7

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

2.6 Vektorgrafik vs. Pixelgrafik

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

Abb. 1: Unterscheidungsmerkmale von Vektorgrafik und Pixelgrafik

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

35 Vgl. Macromedia Inc. (2004) 36 Vgl. o.V. (1998), S.40 ff.

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

38 Vector Markup Language ist ein Vektorgrafikformat der Firma Microsoft.

8

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.

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. 39 Die internationale Standardisierungsorganisation ISO definiert den Begriff Standard als dokumentierte Vereinbarung, die gewährleistet, dass Material, Produkte, Prozesse und Dienstleistungen ihren Zweck unterstützen. 40 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

39 Vgl. o.V. (o.J.c)

40 Vgl. ISO (2004)

9

Zustimmung von einem offiziellen Standardisierungsgremium beschlossen wird. 41 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. 42 Dabei repräsentiert es eine Sprache, die das Potential hat, die Gestaltung im Web zu revolutionieren. 43 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 auf Rastergrafiken referenzieren. So lässt SVG eine strukturierte Beschreibung von Vektorgrafiken und gemischten Vektor-/Rastergrafiken zu.

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

42 Vgl. Lilley, C. (2004a)

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