Diplomarbeit

Das technische und strategische Potential
von SVG als standardisierte Grafik- Technologie
für grafikorientierte Browser- Anwendungen bei DEKRA

Ausbildungsbereich: Wirtschaft
Fachrichtung: Wirtschaftsinformatik
Studienhalbjahr: 6. Semester

vorgelegt am 10. Mai 2004

von

Niko Mahle

Ausbildungsstätte:
DEKRA Automobil GmbH
Handwerkstraße 15
70565 Stuttgart

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

Abkürzungsverzeichnis
API Application Programming Interface
BMP Bitmap
CAD Computer Aided Design
CSS Cascading Stylesheet
DOM Document Object Model
dxf Drawing Exchange Format
dpi dots per inch
DTD Document Type Definition
ECMA European Computer Manufacturers Association
EPS Encapsulated Postscript
GIF Graphics Interchange Format
GPS Global Positioning System
HGML Hyper Graphics Markup Language
ISO International Organization for Standardization
IRIS Internes Recherche und InformationsSystem
IT Informationstechnologie
J2EE Java 2 Enterprise Edition
JPEG Joint Photographic Experts Group
JSP Java Server Pages
kb kilobyte
MB megabyte
MIME Multipurpose Internet Mail Extension
PDF Portable Document Format
PGML Precision Graphics Markup Language
PHP PHP Hypertext Preprocessor (früher: Personal Homepage Tools)
PNG Portable Network Graphic
PS Postscript
RGB Rot Grün Blau
SMIL Synchronized Multimedia Integration Language
SVG Scalable Vector Graphic / Skalierbare Vektorgrafik
SVGB Scalable Vector Graphics Basic
SVGT Scalable Vector Graphics Tiny
SW Software
SWF ShockWaveFlash
TIFF Tag Image File Format
u.a. unter anderem
UN Unternehmen
URL Uniform Resource Locator
VML Vector Markup Language
W3C World Wide Web Consortium
WebCGM Web Computer Graphics Metafile
WVG Windows Vector Graphic
WYSIWYG what you see is what you get
XBL eXtensible Binding Language
XLink XML Linking Language
XML eXtensible Markup Language
XSL eXtensible Stylesheet Language
XSLT eXtensible Stylesheet Language Transformations

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

[....]

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