Interaktive SVG-Lerneinheit

Inhaltsverzeichnis

Vorwort

1 Einleitung

2 Aufgabenbeschreibung

3 Was ist
3.1 Entstehungsgeschichte
3.2 Verwandtschaft zu
3.3 Einsatzschwerpunkte

4 Grafikformate im Internet
4.1 Anforderungen an Bildformate im Internet
4.2 Bitmap-basierte Grafikformate
4.2.1 GIF
4.2.2 JPEG
4.2.3 PNG
4.2.4 JPEG2000
4.3 Vektor-basierte Grafikformate
4.3.1 WebCGM
4.3.2 VML
4.3.3 Flash
4.4 Vergleich SVG und Flash

5 Software für
5.1 Zeichenprogramme
5.2 Autorenwerkzeuge
5.3 Viewer
5.4 Konverter

6 Was leistet
6.1 Leistungen
6.1.1 Strukturelle Leistungen
6.1.2 Grafische Leistungen
6.1.3 Textuelle Leistungen
6.1.4 Animationstechnische Leistungen
6.1.5 Interaktive Leistungen
6.1.6 Multimediale Leistungen
6.1.7 Integration in Webseiten
6.2 Erweiterungsmöglichkeiten
6.3 Was SVG noch nicht leistet
6.4 Pro und Kontra
6.5 Ausblick

7 Interaktive Lerneinheit SVG für die
7.1 Die virtuelle Fachhochschule (VFH)
7.2 Lernen in der Online-Umgebung der
7.3 Storyboarding in der VFH Berlin
7.4 Analyse des IST-Zustandes
7.5 Konzeptionelles Vorgehensmodell
7.5.1 Die verschiedenen Lernobjekte
7.5.1.1 Abbildungen
7.5.1.2 Rolloverbild
7.5.1.3 Animation
7.5.1.4 Diashow
7.5.1.5 Interaktion
7.5.2 Text
7.6 Was leistet SVG gegenüber Flash für die VFH?
7.7 Erweiterungsideen

8 Evaluation der Lerneinheit
8.1 Evaluationsmöglichkeiten
8.2 Durchführung
8.3 Ergebnisse

9 Zusammenfassung und Ausblick

Anhang

Liste aller SVG-Elemente

Eventnamen und Eventattributnamen für Interaktionen

Verzeichnisse

Abbildungen Tabellen

Literatur

Glossar

Internet-Ressourcen zu

Eidesstattliche Erklärung

Vorwort

Diese Diplomarbeit entstand im Rahmen des Fachbereichs Informatik an der Tech- nischen Fachhochschule Berlin in enger Zusammenarbeit mit der Virtuellen Fachhochschule. Diese Arbeit soll einen Einblick in internetkonforme Grafikstandards und die Konzeption und Erstellung einer interaktiven Lerneinheit für ein Online-Studium geben.

Ich möchte mich an dieser Stelle bei einigen Menschen bedanken.

Clarissa Richter

Während der ganzen Zeit stand mir Clarissa fest zur Seite und half mir, die Realität nicht zu vernachlässigen. Sie nahm mir viel Arbeit im Haushalt ab, war stets mit viel Liebe für mich da und half mir, die anstrengende Zeit so angenehm wie möglich zu gestalten.

Vielen Dank :-x

Die Familie

Meiner gesamten Familie sei herzlich dafür gedankt, dass sie mir Ämtergänge abnahm und viel Verständnis dafür zeigte, dass ich während des Diploms weniger Kontakt mit ihnen pfle- gen konnte als sonst.

Mitarbeiter der

Hier sei besonders Alexander Schmidt erwähnt, ohne den ich die vielen kleineren und weni- gen großen Probleme im Umgang mit XMetaL nie hätte lösen können. Er war es, der meine die Programmfunktionalität betreffenden Wünsche und Anregungen schnellstmöglich umsetzte, um mir so ein reibungsloses Arbeiten mit der Software zu ermöglichen.

Dank geht auch an Stefan Müller, den Projektleiter der VFH, der selbst zu den ungewöhnlichs- ten Fragen stets schnell, unkompliziert und fundiert per E-Mail oder Telefon antworten konnte und Aktualisierungen der Lerneinheit immer schnell und gewissenhaft veröffentlichte.

Beide Mitarbeiter waren immer sehr freundlich und die Zusammenarbeit stets äußerst pro- duktiv und angenehm.

Diese Arbeit ist Clarissa gewidmet.

1 Einleitung

Das weltweite Internet, wie wir es heute kennen, vollführte in nicht einmal einer Dekade einen gewaltigen Entwicklungssprung, revolutionierte die Kommunikation und avan- cierte zum größten und, den Zugriff betreffend, schnellsten Wissenspool der Menschheit. Es kann inzwischen vielgestaltige Medien schnell und unkompliziert zur Verfügung stellen, und der Umgang und der gewinnbringende Einsatz derselben werden in der sich dadurch entwi- ckelnden Informationsgesellschaft zur entscheidenden Schlüsselqualifikation für beruflichen Erfolg.

Die Neuen Medien stellen ständig steigende Anforderungen an den Einzelnen und verlangen ihm immer mehr Wissen um ihren Einsatz ab. Um diesen Anforderungen gerecht werden zu können, werden jedoch wiederum Medien eingesetzt, um Wissensentstehung für viele sich teilweise neu entwickelnde Bereiche zu ermöglichen. Dazu gehört Wissen durch ständige Weiterbildung zur Entwicklung und Förderung beruflicher Qualifikationen und Kompetenzen, gesellschaftliches, soziales, kulturelles und globales Wissen sowie Wissen, das selbstständiges Handeln und Eigenverantwortung erfordert. Wir leben längst in einer Wissensgesellschaft, die ein lebensbegleitendes Lernen aller Bevölkerungsschichten auch angesichts des demographi- schen Wandels notwendig macht und eine hohe Anforderung an Aus- und Weiterbildungsan- bieter stellt, um so Arbeitslosigkeit vorzubeugen und den Aufbruch in die Informationsgesell- schaft zu unterstützen.

Diesen Anforderungen stellen sich viele private Initiativen und überregionale, öffentliche Insti- tutionen, darunter die Virtuelle Fachhochschule, die, gefördert durch das Bundesministerium für Bildung und Forschung (bmb+f ), mit ihren Online-Studiengängen einen aktiven Beitrag zur Wissensgesellschaft leistet.

Diese hier vorliegende Arbeit beschäftigt sich mit der Untersuchung von internetkonformen Grafikformatstandards und der Konzeptualisierung, Entwicklung und dem webgerechten Pu- blizieren von Inhalten sowie der Auswertung einer interaktiven Lerneinheit für die Virtuelle Fachhochschule zum Thema „Skalierbare Vektorgrafiken nach dem offiziellen W3C-Standard SVG“. Sie soll ihrerseits einen Beitrag dazu leisten, eine nicht mehr ganz neue aber durch ihre fortdauernde und zügige Entwicklung schnell an Bedeutung wachsende Normierung publik zu machen und ihren Einsatz im Bildungsbereich exemplarisch vorzustellen.

2 Aufgabenbeschreibung

Die Aufgabe dieser Diplomarbeit ist die Erstellung einer Lerneinheit zum Thema „SVG“ im Modul „Autorensysteme“ der Virtuellen Fachhochschule, Arbeitsgruppe Berlin (nachfolgend VFH genannt). SVG ist ein internetfähiges Grafikformat. Daher wird zunächst untersucht, welche Grafikformate derzeit im Internet Verwendung finden und welche prinzipi- ellen Unterscheidungsmerkmale einen jeweiligen Einsatz rechtfertigen. Besondere Aufmerk- samkeit soll dabei dem Programm „Flash“, dem größten Konkurrenten von SVG, zukommen. Damit die Konzeption der Grafikobjekte in der Lerneinheit und die Ideen zur Umsetzung nicht an fehlenden Möglichkeiten der Sprache SVG scheitern, soll nachfolgend untersucht werden, welche Leistungen der Standard hinsichtlich verschiedener wichtiger Kriterien bietet und ob SVG dazu in der Lage ist, den hohen Anforderungen an (interaktive) Grafiken in einer Lernein- heit der VFH gerecht zu werden. Gleichzeitig soll festgestellt werden, welche Funktionalitäten noch nicht geleistet werden und welche auf absehbare Zeit zur Verfügung stehen. Für die Lerneinheit selbst ist anschließend ein Konzept zu entwerfen, das die Lerninhalte und die Art der Stoffvermittlung festlegt.

Das Thema ist der Standard SVG (Scalable Vector Graphics), der vom World Wide Web Consor- tium (W3C) verabschiedet wurde. Er soll problemorientiert durch viele Beispiele erläutert wer- den. Interaktive Flash-Übungen und eine an das Modul „Autorensysteme“ angepasste Projekt- aufgabe sollen erstellt werden. Ein Hauptaugenmerk wird auf die Konzeption und Erstellung der teilweise interaktiven SVG-Lernobjekte wie z.B. Animationen und Rolloverbilder gelegt. Die Typen sind bereits in den VFH-Lernmodulen von der Funktionalität und der Bedienung her vorgegeben und es soll versucht werden, möglichst viele von ihnen möglichst exakt in SVG nachzubauen. Dazu wird es notwendig werden, im Studium erworbenes Wissen in der Pro- grammierung einzusetzen, um interaktive Elemente über JavaScripte zu realisieren. Weiterhin sollen „normale“ SVG-Grafiken helfen die Möglichkeiten und verschiedenen Funktionalitäten von SVG aufzuzeigen. Sowohl den Lernobjekten und den Beispielen, als auch den Übungen ist besondere Aufmerksamkeit zu widmen. Der Lernende soll dabei angehalten werden, die ver- schiedenen Lernobjekte und SVG-Grafiken (beides zusammenfassend nachfolgend Lernobjekt genannt) sowohl interaktiv durch Verwendung zu erkunden, um den jeweils zu vermittelnden Stoff aufzunehmen, als auch das jeweilige Lernobjekt selbst als Lernstoff wahrzunehmen und zu nutzen. Durch die Textbasiertheit des SVG-Standards sind alle Quelltexte der Lernobjekte einfach und direkt über das Kontextmenü des Adobe SVG Viewers zugänglich und der Student soll darauf hingewiesen werden, diese als Ergänzung der eigenen Umsetzungsideen für Grafi- kobjekte zu verwenden.

Um die zu erstellende Lerneinheit gemäß den Strukturvorgaben der VFH zu entwerfen und an das konzeptionell bereits fertig gestellte Modul „Autorensysteme“ anzupassen, ist eine Ana- lyse des allgemeinen Aufbaus von Lerneinheiten der VFH durchzuführen, gefolgt von einer weiteren Untersuchung des Aufbaus des speziellen Moduls „Autorensysteme“.

Das Storyboarding als Grundlage für die Strukturumsetzung soll im VFH-eigenen XML-ba- sierten Storyboarding-Verfahren erfolgen. Dazu ist eine Einarbeitung in das XML-Programm XMetaL notwendig, das für dieses Verfahren in der VFH eingesetzt wird. Da bislang einerseits keine Lerneinheiten mit SVG-Grafikobjekten erstellt wurden und andererseits noch keine XML-basierte Sprache als Lernstoff in einer Einheit vermittelt wurde, wird voraussichtlich eine Erweiterung der Programm-Funktionalität notwendig werden.

Bei SVG handelt es sich um einen kompletten, breit gefächerten und komplexen Grafikstan- dard und dieser bedarf daher ausführlicher Erklärungen und besonders vieler Beispiele. Es ist also zu erwarten, dass die Anzahl der Abschnittsseiten dieser Lerneinheit am oberen Ende der sonst üblichen Menge liegt und ein erhöhter Arbeitsaufwand für die Erstellung der Lernein- heit notwendig wird.

Es ist anzustreben, die entwickelte Lerneinheit durch Studenten evaluieren zu lassen, bevor sie als regulärer Bestandteil eines Moduls eingesetzt wird. Dazu ist eine Form der Evaluation zu finden, die an die Besonderheiten des Online-Studiums angepasst ist. Die Auswertung soll Aufschluss darüber geben, inwieweit die Lerneinheit ihrem Ziel nahe kommt, grundlegendes und weiterführendes Wissen zum Thema SVG zu vermitteln. Die Form der Fragestellung soll Raum lassen für eigene Anmerkungen und Verbesserungsvorschläge im Rahmen verschiede- ner zu untersuchender Kriterien. Um diese und weitere Anforderungen zu erfüllen, ist ein ent- sprechender Fragebogen zu entwickeln. Die Lernenden sollen darin besonders zu Bereichen befragt werden, die den besonderen Charakter der Einheit ausmachen wie Thema, Länge und Lernobjekte/Abbildungen. Weiterhin sollen Fehler gemeldet und eine Selbsteinschätzung zum Lernerfolg gegeben werden. Die Ergebnisse können dann in die Verbesserung der Einheit einfließen - eventuell im Rahmen einer Erweiterung, die noch näher zu spezifizieren wäre.

2.1 Motivation

Die VFH - Arbeitsgruppe Berlin

Während meiner Studienzeit war ich als studentische Hilfskraft bei der VFH beschäftigt. Dabei war ich als Teaching Assistent in elf Lernmodulen bei der Durchführung des Online-Studiums behilflich und betreute in zwei aufeinander folgenden Semestern als Online-Tutor insgesamt vier Module. Seitdem war ich ebenfalls in vier aufeinander folgenden Semesterferien als On- line-Tutor für die Durchführung und Organisation des Moduls „Propädeutikum Virtuale“ mit insgesamt zwölf Durchläufen verantwortlich. Dabei lernte ich die Arbeitsatmosphäre der VFH zu schätzen. Ich kenne seitdem viele der Mitarbeiter in der VFH, was sich für die Kommunikati- on mit der Arbeitsgruppe während der Bearbeitungszeit als positiv herausstellen sollte. Schon damals reizte mich der Gedanke, nicht immer nur betreuend und unterstützend tätig zu sein, sondern auch aktiv den Lernprozess durch selbst erstellten Inhalt voranzubringen.

Honorarkraft im Bezirksamt Neukölln

Seit meinem 18. Lebensjahr war ich ununterbrochen beim Bezirksamt Neukölln, Amt für Jugendförderung, als Honorarkraft angestellt und konnte seitdem durch tatkräftige Unter- stützung die Eröffnung des ersten gemeinwesenorientierten Multimedia- und Internetcafés in Neukölln (August 1998) ermöglichen, in dem ich, zusammen mit anderen Teamern, Jugend- lichen den Umgang mit PCs, die Bedienung von Software sowie die Nutzung des Internets nä- her brachte. Ich wirkte unterstützend bei vielen Projekten und Workshops der verschiedenen Jugendclubs und des Bezirksamtes mit (IFA-Ausstellung, drei Multimedia-Wettbewerbe, @nien Neukölln, Neukölln rollt für UNICEF) und konnte die Entwicklung am Berliner Computerführer- schein «comp@ss» mitverfolgen. All diese Projekte hatten einen Bezug zur Wissensvermittlung über interaktive Medien und ich konnte Erfahrungen dabei sammeln, wie Wissen effektiv prä- sentiert werden kann.

Freier Standard

Neue Technologien bestimmen zwar heute entscheidend den gesellschaftlichen Fortschritt und Wohlstand, verlieren aber an Durchschlagskraft und ihr wirtschaftlicher Erfolg ist weniger sicher, wenn sie durch zu hohe Lizenzkosten erkauft werden müssen (UMTS-Kosten, Software- Patente). Eine Vermeidung dieser Problematik würde durch freie Standards erreicht werden. Diese zeichnen sich durch folgende Eigenschaften aus:

- Meist erarbeiten viele Interessierte einen Standard, so dass aus vielen Ideen die bes- ten umgesetzt werden können, wobei Fehler eher gefunden und beseitigt werden.
- Der Code kann aus anderen Projekten benutzt werden oder Projekten als Erweite- rung dienen.
- Interoperabilität und Portabilität gelten als Vorteile von freien Standards.
- Viele Parteien lassen einen Standard eher auf einem breiten, in der Fachwelt akzep- tierten Fundament ruhen.
- Freie Standards nützen nicht nur einem einzelnen Unternehmen, sondern allen, die davon profitieren möchten.
- Standards haben meist internationalen und branchenübergreifenden Charakter.
- Die Dokumentation ist einsehbar und frei zugänglich.
- Die Offenheit bringt eine Diskussionsmöglichkeit mit sich, die für Außenstehende Verbesserungsvorschläge und Hinweise auf Fehler ermöglicht.
- Freie Standards sind somit demokratisch.

Scalable Vector Graphics (SVG) ist ein freier Standard des World Wide Web Consortium (W3C). Wir haben es hier nicht mit Open Source zu tun, da ein Standard genau betrachtet keinen Quellcode enthält, sondern nur eine Empfehlung zur Umsetzung bietet. Die Implementierung wird dann von Firmen durchgeführt, die nicht zwingend den Quellcode ihrer Implementie- rung veröffentlichen. Ich zähle mich eher zu den Verfechtern des OpenSource-Gedankens und mich hat der Entwicklungsprozess eines freier Standards interessiert. Zum Zeitpunkt der Erstellung dieser Arbeit wurden über die SVG-Mailingliste des W3C viele Fehler gemeldet und Verbesserungsvorschläge gemacht.

Programmierung zum Anschauen

Ich habe in meinem Studium der Medieninformatik an der TFH Berlin den Schwerpunkt „Medi- en“ belegt und war schon zu diesem Zeitpunkt eher von solcher Programmierung begeistert, die hilft, etwas Sichtbares oder Interaktives zu erstellen. Heutige Programme leisten schon sehr viel, aber sie vermögen es oft nicht, einerseits einen unter dem Gesichtspunkt der Usability zu sehenden Zugang und Einsatz der programmierten Funktionen zu gewähren und andererseits die Ergebnisse dieser Funktionen elegant zu präsentieren. Denn diejenigen, die die Logik eines Programms erstellen, sind oftmals auch diejenigen, die die Präsentation des Ergebnisses zu ihrem Aufgabenbereich zählen. Mit einem programmierbaren Grafikstandard wie SVG könn- te diese Lücke geschlossen werden, weil hier Grafiken von Mediengestaltern entworfen und später in einem programmierbaren und scriptfähigen Format abgespeichert werden können. Dieses Format ermöglicht es, eine Grafik komplett aus vorliegenden Daten (z.B. Statistiken) zu generieren und nach Wunsch auch zu animieren und mit Interaktivität zu versehen.

2.2 Arbeitsumgebung

Meine Arbeit entstand ausschließlich zu Hause. Dort kam ein PC-kompatibler Computer AMD 1800 MHz 512 MB RAM und ein 19’’ Monitor zum Einsatz. Zum Erstellen des Quellcodes der SVG-Grafiken wurde hauptsächlich der Texteditor EditPlus v2.10c eingesetzt, geringe Teile des Quellcodes entstanden in Macromedia Homesite 5, weil es dort eine Forma- tierungsmöglichkeit gibt, die es erlaubt, markierten Text per Klick mit öffnenden und schlie- ßenden Klammern zu versehen. Webseiten wurden von mir in den Microsoft Internet Explorer 6.0 geladen, der um das Plugin des Adobe SVG Viewer ergänzt wurde. Für die Erstellung der Lerneinheit wurde XMetaL Version 2.1.6.119 (Unicode) eingesetzt, das um die VFH-eigenen Ergänzungen erweitert wurde.

3 Was istSVG

steht für Skalierbare Vektor Grafiken, eine XML-Grammatik für veränderbare Grafiken.

Skalierbar

Das Wort „skalierbar“ bedeutet, dass keine Beschränkung auf eine einzige, feste Pixelgröße besteht. Im Bereich des World Wide Web beschreibt es jedoch eine Technologie, die je nach Größe von Dateianzahl, Benutzergruppe oder Anwendungsvielfalt mitwachsen kann. SVG- Grafiken passen sich unterschiedlichen Auflösungen von Ausgabegeräten (Bildschirm, Dru- cker, Mobiltelefon) an und können in unterschiedlichen Größen auf einer Internetseite oder mehreren verschiedenen eingebettet werden. Sie können vergrößert werden, um feine Details erkennbar zu machen oder um Menschen mit Sehbehinderungen zu unterstützen. SVG-Grafi- ken sind skalierbar, weil der gleiche Inhalt entweder durch eine allein stehende Grafik zustan- de kommen oder durch Referenzierung bzw. Einbettung von Elementen aus anderen Grafiken entstehen kann.

Vektor

Im Gegensatz zu Formaten, die auf Rastern aus einzelnen Pixeln beruhen, enthalten Vektorgra- fiken geometrische Objekte wie Linien und Kurven. Sie sind wesentlich flexibler, da sie nicht wie die Rasterformate jedes Pixel einer Grafik separat abspeichern.

Vektorgrafiken werden erst clientseitig gerastert. Das erspart eine aufwendige Übertragung der einzelnen Werte für Pixel in Netzwerken. SVG kann den Rasterungsprozess steuern und Grafiken wahlweise mit oder ohne Kantenglättung (Anti-Aliasing) darstellen. SVG ist allerdings nicht auf die Verwendung von Vektorobjekten beschränkt. Es kann ebenso Rastergrafiken dar- stellen und durch Filter verändern.

Grafik

Die meisten XML-Instanzen sehen nur rudimentäre Grafikeigenschaften vor, die sogar noch weit hinter denen von HTML liegen. Sie repräsentieren entweder Textinformationen oder Roh- daten wie Finanzinformationen. SVG füllt diese Lücke durch einen Standard, der eine struktu- rierte Beschreibung von Vektorgrafiken und gemischten Vektor-/Rastergrafiken zulässt.

3.1 Entstehungsgeschichte

Schon bevor die Bezeichnung Scalable Vector Graphics überhaupt geboren wur- de, war das Thema „webfähige Vektorgrafiken“ bereits von verschiedenen Seiten angedacht worden. Die immer wichtiger werdende Stellung des Internets und die Tatsache, dass bislang kein Format diesen Schritt gegangen war, erklären die Überlegungen in diese Richtung. Zwar gab es schon 1996 die erste webfähige Animationssoftware „Flash 1.0“, die mit Vektorgrafi- ken arbeitete, und beim W3C wurden gerade sehr allgemein Anforderungen an skalierbare Grafiken formuliert [sca-req], jedoch erst zwei Jahre später, Ende März 1998, wurde dem W3C ein offizieller Vorschlag von den beiden englischen Laboratorien CCLRC und RAL unterbreitet, in dem XML dazu verwendet werden sollte, schematische 2D-Diagramme darzustellen [ws].

Keine zwei Monate später folgten zwei ausführlichere Spezifikationsvorschläge: Zuerst von einem Konsortium um Adobe mit PGML (Precision Graphics Markup Language) und gleich darauf von einem Konsortium um Microsoft mit VML (Vector Graphics Markup Language). Im selben Jahr wurden dann noch das WebCGM-Profil vorgeschlagen und eine weitere Spezifika- tion namens DrawML. Daraufhin wurde eine W3C-Arbeitsgruppe gegründet, um einen neuen Standard namens SVG auf den Weg zu bringen. Sie setzt sich aus 29 führenden Firmen aus der Computerbranche zusammen (darunter Adobe Systems, AOL/Netscape, Apple, Autodesk, Canon, Corel, Eastman Kodak, Ericsson, Hewlett-Packard, IBM, IntraNet Systems, Macromedia, Microsoft, Nokia, Openwave, Opera, Oxford Brookes University, Quark, Savage Software, Sche- masoft, Sun Microsystems, Xerox). Die Arbeitsgruppe veröffentlichte ein erstes Arbeitsdoku- ment (Working Draft) Ende Oktober 1998, das die Anforderungen an eine Sprache SVG näher beschreibt. Am 5. September 2001 kam Version 1.0 von SVG heraus, am 14. Januar 2003 folgten Version 1.1 und die Mobilprofile von SVG. Nach aktuellem Stand der SVG Roadmap (Juni 2003) soll im Januar 2004 SVG 1.2 fertig sein.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 01: „ Recommendation Track “ zur Konsensfindung einer Webtechnologie

Erläuterung

Technische Beschreibungen durchlaufen beim W3C einen festgeschriebenen und standardi- sierten Weg vom ersten Vorschlag bis hin zur Empfehlung. Die einzelnen Phasen sind nachfol- gend beschrieben [w3c-track]:

- Note

Ein datiertes Protokoll, das eine Idee oder einen Vorschlag lediglich festhält.

- Working Drafts

Ein technischer Report beginnt mit einem Arbeitsentwurf, der als Arbeitsgrundlage für die Entwicklung eines Standards dient.

- Last Call Working Draft

Eine spezielle Instanz der Working Draft, die alle relevanten Anforderungen erfüllen soll und als öffentlicher technischer Report von anderen Arbeitsgruppen, W3C-Mit- gliedern und der breiten Öffentlichkeit zwecks Durchsicht und Kommentarabgabe zur Verfügung gestellt wird.

- Candidate Recommendation

In dieser Phase sind alle Anforderungen umgesetzt und das Ergebnis wurde veröf- fentlicht, um Implementierungserfahrungen und Feedback von Herstellern außer- halb der Arbeitsgruppe zu erhalten.

- Proposed Recommendation

Zu diesem Zeitpunkt wurden alle Implementierungserfahrungen und Kommentare verarbeitet, das Dokument wurde vom Director der Arbeitsgruppe dem Advisory Committee zur Begutachtung vorgelegt.

- W3C Recommendation

Ein technischer Report, der alle konsensbildenden Vorgänge durchlaufen hat und dessen Idee oder Technologie nun als offizielle Empfehlung (Standard) des W3C weit verbreiteten Einsatz finden soll.

3.2 Verwandtschaft zu

SVG ist stark verwandt mit XML. Genauer gesagt ist es eine Instanz von XML, oder auch: SVG ist ein XML-Dokument; SVG ist eine XML-Grammatik. SVG wird also nach den Regeln von XML geschrieben. XML wurde ebenfalls vom W3C standardisiert. XML ist die Abkürzung für Extensible Markup Language. Diese Sprache ist eine textbasierte Metasprache, die den In- halt von Text beschreibt, ihm eine semantische Struktur verleihen soll und den Inhalt von der Struktur und der Präsentation/Formatierung trennen soll. Mit diesen Strukturen lassen sich dann Instanzsprachen wie SVG oder XHTML (die nach W3C standardisierte Version von HTML) konzipieren.

XML-Dokumente sind wie SVG-Dokumente in ASCII-Text geschrieben. Das hat Vorteile. Solche Dokumente sind:

- plattformneutral
- anwendungs- und programmiersprachenunabhängig
- weiterverwertbar für andere Ausgabeformen
- langfristig archivierbar und für den Menschen lesbar

XML ist sehr gut dafür geeignet, Datenaustausch zwischen Applikationen aller Art zu betrei- ben. Die eigentlichen Daten werden dabei in der XML-Datei abgelegt, die u.a. aus Attributen und Elementen (entities), die in Tags formuliert sind, besteht. Die Struktur- und Syntaxprüfung erfolgt anhand der DTD (Document Type Definition). Hier werden erlaubte Elemente und Attribute, sowie deren Standardwerte, Datentypen, die Hierarchien und Verschachtelungen festgelegt. Ferner wird definiert, welche Elemente und deren Attribute verpflichtend oder op- tional sind. DTDs können von Parsern verwendet werden, um XML-Dateien zu validieren und Fehler zu detektieren.

Neben SVG gibt es noch viele andere „Dialekte“ (Spezialisierungen).

- SMIL 2.0 (Synchronized Multimedia Integration Language): Multimedia
- MathML 2.0: mathematische Sonderzeichen und Formatierungen
- XHTML 1.0: Nachfolger von
- XForm 1.0: Formulargenerierung
- CSS (Cascading Style Sheets, derzeit Level 2): Stileigenschaften für Webseiten

3.3 Einsatzschwerpunkte

Im Vergleich zum Flash-Player mit weniger als 400 KB ist der SVG-Viewer mit seinen derzeit 2,3 MB relativ groß. Entsprechend sind die Einsatzschwerpunkte eher in seriöseren Anwendungsbereichen zu finden, in denen ein echtes Interesse des Benutzers an der visuali- sierten Materie besteht. So z.B. in den Bereichen

- Kartografie
- Allgemeine Infografik
- Technische Illustration

Beispiele zur SVG-gestützen Kartografie finden sich unter [clinks]. Hier ist beispielsweise eine interaktive Karte zu den Wahlen in Berlin im Jahre 2001 verlinkt sowie ein Mortalitätsatlas von Berlin. Der Anwender kann dort über HTML-Formulare, die über JavaScript auf den SVG-Code zugreifen, verschiedene Kartenoptionen auswählen.

Zu den Infografiken finden sich Beispiele bei Adobe selbst. Unter http://www.adobe.com/svg/ demos sind Anwendungsmöglichkeiten aufgezeigt, z.B. eine Theaterplatzreservierung, Daten- visualisierung mittels Chartgrafiken, ein gebäudebasiertes Telefonbuch und ein SVG-basiertes Online-Zeichenprogramm.

Im Bereich der technischen Illustration kann SVG Arbeitsabläufe animiert visualisieren. Ein Tool, das diese Funktionalität ausnutzt, ist „Sphinx open“ von der deutschen Firma inintegierte informationsysteme GmbH. Die Firma stellt auf ihrer Demoseite unter http://www.in-gmbh.de/de/Produkte/in-gmbh/sphinxsvg/svg_demos.htm Beispiele bereit, die mit Hilfe ihrer Software entwickelt wurden.

Der freie Standard von SVG könnte auch als ein ideales Austauschformat zwischen verschiede- nen Vektorgrafikprogrammen fungieren. Mit SVG könnte die fehlerträchtige und nicht zwin- gendermaßen vorhandene Unterstützung von Fremdformaten für den Im- und Export in oder aus anderen Vektorgrafikformaten stark vereinfacht werden. Corel unterstützt SVG in seiner CorelDRAW® Graphics Suite 11 und Adobe tut dies bereits seit Illustrator 9. Nur Macromedias Unterstützung bei Freehand fehlt bisher komplett, was sicher auf die Konkurrenz zwischen Macromedia Flash und SVG zurückzuführen ist. Auch die Verwendung im 3D-Bereich ist durch die SVG-Unterstützung von Maya 5 belegt. Sogar Microsoft Office 11 soll SVG unterstützen.

Eine Schwesterentwicklung von SVG ist „Mobile SVG“. Für unterschiedlich leistungsstarke mo- bile Endgeräte wurden hier zwei separate Profile definiert, die eine Untermenge der derzeiti- gen SVG-Spezifikation unterstützen sollen. Zum einen SVGB (SVG Basic) für leistungsstärkere PDA’s und Mini-Computer und SVGT (SVG Tiny) für so genannte „low-level“-Geräte mit noch geringerer Rechenleistung bzw. Netzwerkbandbreite sowie kleinerem Hauptspeicher.

Die sich hieraus ergebenden mobilen Einsatzmöglichkeiten sind sehr umfassend:

- Animierte Bildübertragung bei Handys als Ergänzung zu Operatorlogos, Visitenkar- ten, Telefonbuch- und Kalendereinträgen, Klingeltönen etc.

- Multimedia Messaging bei Handys (Erweiterung des MMS-Standards)
- Location Based Services (ortsabhängige Dienste wie Wetter, Verkehr, Restaurants und Veranstaltungstipps)
- GPS (Global Positioning System) und mobile Kartografie
- Entertainment (Spiele, Cartoons, eCards etc.)
- Industrielle Anwendungen wie das Darstellen von Konstruktionsplänen auf HMDs (Head Mounted Display)
- eCommerce (grafische Aktienverläufe für Daytrader)
- User Interfaces für mobile Endgeräte

Es gibt bereits Implementierungen dieses Standards. Auf http://www.embedding.net/eSVG gibt es eine integrierte Entwicklungsumgebung (IDE) für mobile Kleincomputer, so genannte Embedded Systems wie Pocket PC, und dazu passend eine eSVG-Engine zum Anzeigen der SVG-Dateien. Außerdem hat der Browserhersteller Opera eine Zusammenarbeit mit der Firma ZOOMON angekündigt, um für den Opera-Browser auf dem Symbian-Betriebssystem für mo- bile Kleincomputer einen SVG Viewer anbieten zu können. [opera03]

Da eine Aufsplitterung in verschiedene Profile Inkompatibilitäten bewirken kann, wollen die Arbeitsgruppen für „Mobile SVG“ umfassende Testsuiten bereitstellen, um zukünftige SVG- Software auf ihre Kompatibilität und Standard-Konformität zu testen. (Testsuiten zu SVG gibt es unter [ts]).

Einen guten Überblick über weitere Einsatzmöglichkeiten wie UML-Diagramme, die Beschrei- bung von chemischen oder mathematischen Vorgängen und 3D-Umsetzungen findet sich beim W3C unter [w3c-hw10].

4 Grafikformate im Internet

Der erste Internetbrowser mit grafischer Benutzeroberfläche namens ViolaWWW entstand 1992, programmiert von Pei Wei, einem Studenten der Berkeley-Universität in Kalifornien. Eine wesentlich größere Verbreitung fand allerdings der Mosaic-Browser von Marc Andreesen, dem späteren Gründer von Netscape. Dieser lizenzfreie nicht-kommerzielle Browser wurde im Februar 1993 veröffentlicht und verstand bereits in der allerersten nicht veröffentlichten Version die derzeit immer noch gebräuchlichen Grafikstandards GIF und JPEG. PNG wurde erst viel später entwickelt. Seitdem sind Bilder aus dem Internet nicht mehr wegzudenken.

„Grafische und fotografische Darstellungen transportieren Informationen meist um ein Viel- faches schneller und genauer als textliche Beschreibungen, weil sie einen höheren Aufmerk- samkeitswert hervorrufen und somit vorrangig der kognitiven Verarbeitung zugeführt wer- den. Zudem sprechen Sie diejenigen verstärkt an, die vornehmlich visuell orientiert sind, bzw. verdoppeln Sie, wenn sie parallel zu Textinformationen eingesetzt sind, den Informationsfluss (Doppelkodierung) und steigern somit die Speicherfähigkeit im menschlichen Gedächtnis (Memowirkung).“ [vfh-md-11/02] Seitdem man im Internet verstärkt kommerziellen Interessen nachgeht, haben sich auch die Gründe für das Verwenden von Grafiken verändert. Sie dienen nicht mehr nur der Infor- mationsvermittlung (wie z.B. Raumperspektiven, Lageanordnungen, Gesichts- oder Form- beschreibungen, Bedienreihenfolgen, Farbbeschreibungen, Bewegungsdarstellungen) und Informationsverstärkung im Zusammenspiel mit anderen Wahrnehmungskanälen wie der akustischen Wahrnehmung, sondern auch dem Wecken von Emotionen und Assoziationen, dramaturgischen Funktionen, dem Transportieren von Atmosphäre und der Vermittlung der Corporate Identity. Außerdem wurden Grafiken schon sehr lange als Verweisgrundlage in Form von verlinkten Bildern mit Text (Buttons) eingesetzt, um Inhalte strukturiert darzustellen. Ferner übernehmen Grafiken die Funktion eines wichtigen kompositorischen Elements im Layout einer Webseite. Die frühere Richtlinie, Grafiken sparsam und wenn, dann nur kompri- miert einzusetzen, gilt noch immer, trotz der zunehmend breiter werdenden Netzanschlüsse der Anwender.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 02: Bitmap: Mosaik aus Pixeln; benötigt viel Speicherplatz;

Vektor: Definition von Umrisskurven durch mathematische Funktionen; geringer Speicherbedarf

Abbildung in dieser Leseprobe nicht enthalten

Abb. 03:

Bitmapgrafiken sind im Vergleich zur Vektorgrafik nicht verlustfrei skalierbar.

4.1 Anforderungen an Bildformate im Internet

Sind Dateiformate nicht nur lokal auf dem eigenen Rechner zu verwenden, sondern bedürfen sie einer weltweiten Verbreitung bzw. eines weltweiten Zugriffs, so sind an solche Formate weitergehende Anforderungen zu stellen. Erfüllen sie die nachfolgenden Anforde- rungen nicht, erschweren sie die Arbeit und können sich somit womöglich nicht durchsetzen.

Flexibilität und Erweiterbarkeit

Die Schnelllebigkeit der Computer- und Internetbranche bringt es mit sich, dass ein Format möglichst erweiterbar und anpassungsfähig angelegt sein sollte, um noch nicht abschätzbare (weil erst später notwendige) Ergänzungen möglich zu machen.

Standardisierung

Eine Standardisierung eines Formats durch ein Gremium, wie dem W3C oder der ISO, sollte stets angestrebt werden. Die sich aus einem offenen Standard heraus ergebenden Vorteile wie Offenheit, Kompatibilität, Herstellerunabhängigkeit, Lizenzfreiheit, Vertrauen in einen Stan- dard und Mitwirkungsmöglichkeiten bei Änderungswünschen können einem Format meist schnell zu einer breiten Akzeptanz und damit zu Implementierungen von Softwareherstellern verhelfen.

Schnelligkeit und Robustheit

Da kein Benutzer gerne lange auf angeforderte Inhalte wartet, sollte ein Format schnellst- möglich über das Internet übertragen werden können. Dazu sind Techniken für Komprimie- rung und Streamingmöglichkeiten anzustreben. Dabei sollten fehlerhaft übertragene Daten entweder selbsttätig korrigiert werden, zumindest jedoch zu einer teilweise korrekten, bzw. nachvollziehbaren Anzeige führen.

Indizierbarkeit

Das Internet wächst unaufhaltsam. Zwischen 1900 und 2000 hat sich das Wissen der Mensch- heit verzehnfacht. Derzeit verdoppelt es sich alle fünf Jahre und ab ca. 2050 soll es sich jeden Tag verdoppeln [wm]. Dieses Wissen wird nicht zuletzt im Internet zugänglich gemacht und bedarf daher sinnvoller und effizienter Katalogisierung. Das Aufspüren einzelner Informati- onen übernehmen derzeit Suchmaschinen. Dies leisten sie jedoch nur unzureichend, da sie lediglich die Informationen aus der „Umgebung“ des Bildes verarbeiten, das Bild selbst aber nicht. Daher sind Formate zu entwickeln, die Metainformationen über ein Bild, wie z.B. Inhalt, Autor, Copyright-Vermerk etc. enthalten.

Kompatibilität

Jeder User des Internet ist selbst für die eigene Softwareausstattung verantwortlich. Niemand schreibt ihm vor, welche Software er installiert haben muss. Diese Freiheit zwingt ihn jedoch, Acht zu geben auf Abwärts- bzw. Aufwärtskompatibilität zwischen neuen und alten Formaten. Neuere Software-Versionen sollten frühere Formate unterstützen, zumindest jedoch teilweise nutzen können.

Schutz des Urheberrechts

Ein Format hat oftmals wesentlich größeren Erfolg, wenn es Maßnahmen zum Schutz des Urheberrechts vorsieht. Aus Angst vor ausbleibenden Lizenzeinkünften und Diebstahl stellen Firmen oder Einzelpersonen ihre Bilder nicht ins Internet. Digitale Wasserzeichen oder andere Schutzmaßnahmen, die die Bildqualität nicht beeinträchtigen, aber auch durch Bildbearbei- tung nicht ausgehebelt werden können, würden diesen Schutz gewährleisten.

Lesbarkeit (für den Menschen)

Bei Einführung eines neuen Formats stehen nicht immer sofort hochwertige Editoren zur Verfügung. Darum ist eine einfache textbasierte Sprache im alpha-numerischen Format statt eines Binärcodes für die Darstellung von Bilddaten wünschenswert. Diese Forderung steht zwar dem Bedürfnis nach Kompaktheit und geringem Platzverbrauch entgegen, kann aber dennoch durch verbreitete und möglichst lizenzfreie Komprimierungsalgorithmen erreicht werden. Auch muss an die Menschen gedacht werden, die durch eine Behinderung Bilder nicht wahrnehmen können. Für sie müssen Formate derart entwickelt sein, dass die Struktur von der Präsentation getrennt ist und dass sie hardwareunabhängig und verständlich navi- gierbar sind. Ebenso muss durch Internationalisierungsbemühungen sichergestellt werden, dass alle Menschen, ungeachtet ihrer Sprache und ihrer Schrift, ein und dasselbe Format für ihre Belange einsetzen können.

4.2 Bitmap-basierte Grafikformate

Die überwiegende Anzahl von Grafiken im Internet ist bitmap-basiert, d.h. ihnen liegt ein Raster zugrunde, das viele Einzelpunkte speichert und zusammengesetzt ein Bild ergibt. Bei normaler Betrachtung erkennt das menschliche Auge keine Bildpunkte mehr; sie verschmelzen zu einer Fläche. Die Punkte oder Pixel (ein Kunstwort aus den englischen Wor- ten picture und element) sind nach folgendem Schema angeordnet: Breite (x Pixel) mal Höhe (y Pixel) mal Tiefe (z Pixel). Die Tiefe bezeichnet dabei die Farbtiefe, das heißt die Anzahl der möglichen Farbwerte pro Pixel. Das bedeutet, dass die Dateigröße eines Bildes proportional zur Größe und Farbtiefe steigt. Für jedes Pixel wird dabei der Farbwert in einer bestimmten Farbtiefe gespeichert. Die Farbtiefe wird in Bit angegeben. Aus der Angabe der Farbtiefe lässt sich die Farbanzahl berechnen, wenn man den Bitwert als Exponenten von 2 verwendet. Zum Beispiel bedeutet eine 8-Bit-Farbtiefe eine Farbanzahl von 256 (2⁸ ist gleich 256).

Nicht jedes Bild muss unbedingt farbig sein. Manchmal reicht eine Schwarzweißzeichnung oder ein Schwarzweißfoto vollkommen aus. Man hat durch Tests herausgefunden, dass das menschliche Auge zwischen 20 und 60, unter sehr idealen Bedingungen sogar bis zu 250 Hel- ligkeitsabstufungen einschließlich der Farben schwarz und weiß differenzieren kann [med- siem00]. Daher verwendet man bei Graustufenbildern eine Bittiefe von 8 Bit (ein Byte). Mit 7 Bit würde man nur 128 Werte unterschiedlich darstellen können, also wird der nächst höhere Wert 8 verwendet. Die folgenden Beispielbilder sollen einen Einblick in den Zusammenhang zwischen Bittiefe und daraus resultierenden Ergebnissen für Fotos gewähren. (Fotos sind für gewöhnlich die Bilder, die am meisten von unterschiedlichen Helligkeitstönen Gebrauch ma- chen.)

Abbildung in dieser Leseprobe nicht enthalten

Abb. 04: 1 Bit: Hier kann nur zwischen Schwarz und Weißunterschieden werden.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 05: 2 Bit: Hier sind schon vier Töne möglich (Weiß, Hellgrau, Dunkelgrau, Schwarz).

Abbildung in dieser Leseprobe nicht enthalten

Abb. 06: 8 Bit: Hier werden 256 Farbtöne unterschieden.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 07: Bittiefen und daraus resultierende Grautöne

Farbbilder hingegen setzen sich auf dem Bildschirm aus den drei Primärfarben Rot, Grün und Blau zusammen. Dieses Farbmodell heißt daher auch RGB-Modell und bedient sich der addi- tiven Farbmischung, d.h. die Farben ergeben in ihrer jeweils stärksten Intensität, ausgedrückt durch einen Wert zwischen 0 und 255, zusammen genommen, also addiert, die Farbe Weiß. Durch dieses Modell können bis zu 16,7 Millionen (=256 x 256 x 256) unterschiedliche Farben definiert werden. Neben dem RGB-Modell gibt es noch weniger häufig gebrauchte Farbmo- delle wie das wahrnehmungsorientierte HSB-Modell, das eine Farbe durch eine Kombination der Komponenten Farbton (Hue), Sättigung (Saturation) und Helligkeit (Luminanz, Brightness) darstellt.

Physikalisch-technische Farbmodelle wie das RGB-Modell, finden für bestimmte Ausgabeme- dien Verwendung. So wurde z.B. das RGB-Modell für Bildschirmausgaben definiert, weil hier drei verschiedenfarbige Phosphorarten zum Einsatz kommen. Ein weiteres Farbmodell ist das subtraktive CMYK-Modell, das die Mischung der vier Druckfarben Cyan, Magenta, Yellow und Black/Kontrast im Offset-Druck definiert.

Abbildung in dieser Leseprobe nicht enthalten

Abb. 08: Additive Farbmischung im RGB-Modell

Schließlich ist noch die Auflösung maßgeblich am Datenumfang des Bildes beteiligt. In der Auflösung wird festgelegt, wie viele Pixel auf einer physikalisch definierten Fläche dargestellt werden können. Die Auflösung wird meist in dpi (dots per inch - Punkte pro Inch) gemessen. Im Internet ist eine Auflösung von 72 dpi üblich, da dieser Wert einen guten Kompromiss zwi- schen qualitativ akzeptablem Erscheinungsbild und geringer Dateigröße darstellt.

Bitmap-basierte Grafiken eignen sich gut zur naturgetreuen Darstellung von Bildern, da sie viele optische Details erlauben. Sie verlieren jedoch beim Vergrößern aufgrund der dann sicht- bar werdenden Pixel an Qualität. Die vielen darstellbaren Details bergen noch zwei weitere Nachteile: Erstens belegen Pixelbilder viel Speicherplatz - sowohl auf der Festplatte, als auch im Arbeitsspeicher bei der Bearbeitung. Das ist auch der Grund, weshalb das Bearbeiten sol- cher Grafiken viel Rechenzeit in Anspruch nimmt. Der zweite große Nachteil ist, dass Fehler bei Bildänderungen so gut wie nicht behoben werden können.

4.2.1 GIF

Das GIF-Grafikformat (Graphics Interchange Format) wurde 1987 von dem Online- Anbieter CompuServe entwickelt und war lange der Quasi-Standard für Grafiken im Internet. Es ist auch heute noch das gebräuchlichste Grafikformat. Es wurde entwickelt, um Grafiken schnellstmöglich über Datenleitungen zu übertragen. Die Angabe GIF89a lässt Rückschlüsse auf das Entwicklungsjahr des Formats zu. GIF-Bilder werden gerne für Logos, Buttons, Icons oder Cliparts verwendet, da mit der Reduktion der Farbpalette auf die verwendeten Farben, wiederum eine erhebliche Speicherplatz- und Ladezeitreduktion einhergeht.

Kompression

Der LZW-Kompressionsalgorithmus (benannt nach den Entwicklern Lempel, Ziff und Welch) des GIF-Formats gewährleistet eine starke Kompression unter minimalem Qualitätsverlust und erlaubt ein schnelles Dekodieren für eine schnelle Bildwiedergabe. Der Algorithmus ba- siert auf einer Lauflängenkodierung. Anstatt alle Bits der Datei einzeln abzuspeichern, wird nur die Anzahl der aufeinander folgenden Reihen gleicher Bits gespeichert. Da nur exakt gleiche Farbwerte kombiniert werden, erfolgt die Kompression verlustfrei. Daher wirkt die Kompressi- on besonders gut bei großen einfarbigen Flächen. Business-Grafiken, Diagramme oder Ablauf- bilder sind daher auch am ehesten für dieses Format prädestiniert.

Transparenz

Das GIF-Format hat den Vorteil, dass eine Farbe aus den 256 zur Verfügung stehenden als transparente Farbe definiert werden kann. Die Pixel, denen diese transparente Farbe zugewie- sen wurde, werden dann nicht dargestellt, sondern werden durchsichtig. Dadurch passt sich die Grafik perfekt an den Hintergrund an.

Interlaced

Bei größeren GIF-Bildern kann es von Vorteil sein, schon vor dem Ende des Ladens einer Grafik eine grobe Vorschau derselben zu sehen. Diese Vorschau baut sich dann mit fortschreitendem Nachladen der restlichen Bilddaten kontinuierlich und Zeile für Zeile feiner auf. Diese Option nennt sich „Interlaced“.

Animation

Beim GIF-Format können in einer Datei mehrere Bilder abgelegt sein, die nacheinander ange- zeigt werden können. Mit entsprechenden Free- und Shareware-Programmen können somit Einzelbilder mit einer definierten zeitlichen Verzögerung zu animierten Sequenzen zusam- mengefügt werden, so dass eigene kleine Filme generiert werden können. Mit dem Format GIF wurden also die ersten Bewegtbilder im Internet möglich.

Farbpaletten

Das GIF-Format ist auf einen Einsatz mit maximal 256 Farben beschränkt, die in einem Byte pro Pixel definiert werden können. Diese 256 Farben sind jedoch frei aus den zur Verfügung ste- henden 16,7 Millionen Farben wählbar. Farben, die in Bildern mit mehr als 256 Farben enthal- ten sind, werden durch Rasterung simuliert. Farbverfälschungen und sichtbare Pixel können die Folge sein. Gleiches geschieht bei der Reduzierung der Farben von 256 auf eine geringere Anzahl. Allerdings kann bei moderner Bildbearbeitungssoftware davon ausgegangen werden, dass eine komfortable Vorschau-Option zur Verfügung steht, so dass das voraussichtliche Er-

gebnis vor Anwendung der Kompression und Farbenreduzierung begutachtet werden kann. Die Palette, die die Farben der Datei enthält, wird im GIF-Format mitgespeichert. Auf diese Wei- se enthält jede GIF-Datei ihre eigene Farbpalette, die in guten Bildbearbeitungsprogrammen individuell zusammengestellt werden kann. Wird die GIF-Grafik jedoch für das Web verwendet, so sollte man die so genannte CLUT-Palette (Color LookUp Table), auch Netscape-Safe-Brow- ser-Palette genannt, verwenden, um Farbverschiebungen auf unterschiedlichen Computern oder Browsern zu vermeiden. Diese Palette besteht aus nur 216 frei wählbaren Farben und 40 Farben, die für das Computersystem reserviert bleiben. Es ist als die Schnittmenge der unter Windows und Macintosh verwendeten Paletten zu verstehen.

„ Jüngste Entwicklungen (siehe ‚„ Die Zeit ‘‘ vom 13. Januar 1995) gefährden die weitere Verwendung des GIF-Standards. Streitpunkt ist dabei der zur Datenkompression benutzte LZW-Algorithmus. Er wurde 1983 von der Firma Unisys entwickelt, die nun Lizenzgebühren für dessen Benutzung verlangt. Da dieser Algorithmus vor allem bei der Kompression von Bilddaten im GIF-Format ein- gesetzt wird, schloss man mit der Firma CompuServe ein Lizenzabkommen ab, bei dem alle Firmen und Programmierer 1,5 Prozent ihrer Einnahmen aus Programmen die das GIF-Format verwenden an CompuServe abführen müssen. Bewirkt hat man damit, dass der GIF-Standard innerhalb kür- zester Zeit aus allen wichtigen Shareware-Programmen und kommerziellen Produkten entfernt wurde. “ [enderle95]

4.2.2 JPEG

JPEG (gesprochen „jay-peg“) steht für Joint Photographic Expert Group, also eigent- lich nicht für das Grafikformat selbst, sondern für das Konsortium, das das Format Anfang der 90er Jahre entwickelt hat.

Kompression

Das JPEG-Verfahren ist ein Kompressions-Algorithmus für Datenströme. Dieser basiert auf der DCT-Kodierung (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung.

„ JPEG wurde entwickelt, um bekannte Unzulänglichkeiten des menschlichen Auges auszunutzen, besonders die Tatsache, dass kleine Farbveränderungen weniger exakt wahrgenommen werden als kleine Helligkeitsunterschiede. Deshalb ist JPEG für das Komprimieren von Bildern bestimmt, die von Menschen angeschaut werden. Wenn man vorhat, eigene Bilder maschinengestützt analysie- ren zu lassen, könnten die kleinen Fehler von JPEG ein Problem werden, auch wenn sie unsichtbar für das Auge sind. “ [faq-jpeg03]

JPEG spaltet dazu ein Bild in ein Chrominanz- und ein Luminanz-Signal auf und reduziert die Farbigkeiten entsprechend stärker als die Helligkeiten. Außerdem werden Flächen mit ähn- lichen Farbtönen zusammengefasst: Pixel, die innerhalb einer gewissen Farbtoleranz liegen, werden an den Mittelwert der Gesamtfläche, die innerhalb dieser Toleranz liegt, angepasst. Daraus ergibt sich ein relativ hoher Qualitätsverlust, der besonders bei einfarbigen Flächen zu Fehldarstellungen führt. Die Kompressionsqualität ist in guten Grafikprogrammen zwischen

0 und 100 in 1%-Schritten einstellbar, so dass bei einer an das jeweilige Bild angepassten Kompressionsrate sichtbare Kompressionsfehler, so genannte Artefakte, auf ein Minimum re- duziert werden können. Solche Fehler treten vor allem an Ecken und Kanten von abgebildeten

Gegenständen auf. Die Kompressionsrate kann Werte von bis zu 20:1 erreichen. Das macht dieses Format ideal für die Bereitstellung auch größerer Fotos mit feinem Farbverlauf über das Internet mit akzeptablen Ladezeiten.

Ein Nachteil ist, dass bei jedem Speichervorgang eine neue Komprimierung in Gang gesetzt wird und somit zusätzliche Qualitätsverluste eintreten. Daher sollte ein Bild erst ganz am Ende der Bildnachbearbeitung in dieses Format exportiert werden.

Progressive

Analog zum Interlaced-Verfahren bei GIF-Bildern besitzt auch JPEG eine derartige Grobvor- schau während des Ladens. Sie nennt sich Progressive JPEG und wird inzwischen von allen gängigen Browsern unterstützt.

Farbtiefe

Die Farbtiefe beträgt volle 8 Bit pro Farbkanal, also insgesamt 24 Bit, womit wiederum 16,7 Mil- lionen Farben darstellbar sind. Trotz der Tatsache, dass unterschiedliche Browser das JPEG-For- mat in unterschiedlichen Routinen verarbeiten, und somit ein und dasselbe Bild im Netscape Navigator anders aussehen kann als im Internet Explorer, sollten Fotos und Bilder mit vielen unterschiedlichen Farben stets im JPEG-Format präsentiert werden.

4.2.3 PNG

PNG (ausgesprochen PING) steht für Portable Network Graphic. Es ist ein Grafikfor- mat, das speziell für den Einsatz im WWW entwickelt und, wie viele andere Webtechnologien auch, vom W3C abgesegnet wurde. Die Empfehlung (Recommendation) des W3C-Konsorti- ums zu PNG stammt aus dem Jahr 1996 und findet sich unter folgender Adresse:

http://www.w3.org/TR/REC-png

PNG wurde entwickelt, um die Lizenzproblematik von GIF zu umgehen. Es bietet die wichtigs- ten Features von GIF und erweitert diese noch. Das Format ist frei verfügbar, verwendet keine lizenzpflichtigen Algorithmen, ist einfach zu implementieren, ist auf allen Systemen gleicher- maßen verwendbar, ist erweiterbar für zukünftige Verbesserungen und private Ergänzungen und ist robust durch Dateiintegritätsüberprüfungen und schnelles Erkennen von Übertra- gungsfehlern.

PNG soll die Vorteile der beiden bekannten Formate GIF und JPEG in sich vereinen.

Kompression

Wie GIF, komprimiert auch PNG verlustfrei und bedient sich dabei eines Kompressionsalgo- rithmus, der ähnlich dem des ZIP-Formats arbeitet. Wiederholungen von Pixelmustern im Bild werden durch Meta-Informationen über diese Muster ersetzt. Dieses bereits vom GIF-Format bekannte Vorgehen wirkt sich besonders positiv auf die Dateigröße von Grafiken mit großen einfarbigen Flächen aus. Bei Fotos und Grafiken mit vielen feinen Farbübergängen hingegen greift der Algorithmus weniger stark.

Farbtiefe und Transparenz

Bei der Farbtiefe orientierte man sich am JPEG-Standard und ließ 16,7 Millionen Farben zu, die aber wie bei GIF zugunsten einer geringeren Farbanzahl in der Farbpalette reduziert werden können. Neben den Grundfarben Rot, Grün und Blau kann PNG auch noch einen vierten Farbkanal speichern, der als Alpha-Kanal die Transparenzinformation für ein Pixel enthält. Damit werden deutlich feiner abgestufte Transparenzeffekte als bei GIF möglich. Echtfarbbilder können pro Pixel bis zu 48 Bit speichern, Graustufenbilder bis zu 16 Bit.

Interlaced

In der Variante „progressive“ können PNG-Bilder wie GIF-Bilder auch, bereits angezeigt werden, während sie noch geladen werden. Bei GIF waren jedoch mindestens 15% des Bildes notwendig für ein schemenhaftes Darstellen; bei PNG sind es nur 1-2%.

Gammakorrektur

Eine Funktion, die bisher kein Webgrafikformat bot, ist die Möglichkeit, einen Gammawert zum Bild abzuspeichern. Der Webbrowser kann dann, abhängig vom eingesetzten Bildschirm und Betriebssystem, eine automatische Gammakorrektur vornehmen. Dadurch können unterschiedliche Darstellungen auf unterschiedlichen Systemen vermieden werden.

Bildinformationen

Zusätzliche Bildinformationen finden ebenfalls Platz in einer PNG-Datei. Mögliche Angaben sind Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum, Erstellungs-Software, Datenquelle sowie rechtliche und sittliche Absicherungshinweise.

Leider bietet das PNG-Format keine Animationen an. (Eine parallele Entwicklung namens MNG (Multiple-image Network Graphics) bietet diese Funktionalität jedoch. [mng03]) Weiterhin verhalfen verschiedene Browserversionen, die PNG nicht oder nur unvollständig unterstützten, dem Format nicht zu einem größeren Durchbruch. Es wird aber inzwischen von den aktuellen Browser- und Grafikprogrammversionen unterstützt.

Abbildung in dieser Leseprobe nicht enthalten

Tab. 01: Vergleich von GIF, JPEG und PNG

4.2.4 JPEG2000

Neben den bereits genannten Formaten für bitmap-basierte Grafiken im Internet gibt es noch ein weiteres wichtiges Format, das sich allerdings eines Plugins zur Darstellung bedienen muss, da es aus lizenzrechtlichen Gründen nicht vom Browser standardmäßig unter- stützt wird. Das Format heißt JPEG2000, hat als Dateinamenerweiterung .jp2 und wurde von der International Organization for Standardization (ISO) am 2. Januar 2001 zum Standard er- klärt. Die bisher wichtigste Implementierung wurde von der Firma Lurawave entwickelt. Dort heißt das Format LWF. Es eignet sich wie JPEG vor allem für hoch auflösende Grafiken wie Fotos und Bilder mit feinen Farbübergängen. Bei dieser Art von Bildern kommt der besondere Algo- rithmus der Wavelet-Kompression zum Einsatz, der den Algorithmen von JPEG und PNG weit überlegen ist und bei einer gleichen Dateigrößenreduktion eines Originalbildes eine deutlich bessere Bildqualität liefert. Weitere Besonderheiten sind ein Passwortschutz für Grafiken und die skalierbare Grafikgröße. Der Passwortschutz erlaubt jedoch Anwendern ohne Passwort ein qualitativ schlechteres Bild zu betrachten. Die Skalierbarkeit wird durch die besondere Art der Kompression erreicht, die es zulässt, dass aus dem Gesamtbild heraus ein kleiner Teil rekon- struiert werden kann. Das Plugin für LWF-Dateien ist frei verfügbar, das Erstellen der Dateien ist jedoch kostenpflichtig.

Der Standard JPEG2000 sieht über die schon im PNG-Format vorliegenden Erweiterungen folgende noch weitergehende Funktionalitäten vor:

- Eine an das Ausgabemedium angepasste Auflösung ist verfügbar
- Kodierungsfunktion namens Region-Of-Interest (ROI) soll wichtige Bildbereiche in einer besseren Qualität kodieren
- Verlustbehaftete und verlustlose Kompression in einem Bild möglich
- Gegenüber den 44 Dekodierungsvarianten von JPEG verwendet JPEG2000 nur eine einzige
- Unterstützung anderer Farbmodelle neben
- Immer noch sehr gute Qualität bei einer Kompression von 70:1

4.3 Vektor-basierte Grafikformate

Der Begriff „Vektor“ kommt aus der Mathematik und dient dort einer mathemati- schen Wegbeschreibung. Er definiert eine Pfeilklasse, d.h. eine unendliche Menge von paralle- len, gleichlangen und gleich orientierten Pfeilen. Ein Vektor kann durch jeden seiner einzelnen Pfeile dargestellt werden und die Pfeile heißen Repräsentanten des Vektors. Im einfachsten Fall steht ein Vektor für eine gerade Linie zwischen zwei Punkten. Unter Zuhilfenahme weiterer Angaben kann eine über Vektoren definierte Grafik aber nicht nur gerade Linien, sondern auch Kurven (meist Bézierkurven) beschreiben. Bézierkurven wiederum sind Polynome, die durch endlich viele (Stütz-)Werte in Form von Vektoren mit besonderer Bedeutung beschrieben werden. Allgemein setzt sich dann eine Vektorgrafik aus geometrischen Grundfiguren zusam- men. Vektorgrafiken liegt also kein Raster aus einzelnen Pixeln zugrunde und es wird auch nicht jedes einzelne Pixel einer Linie oder Kurve gespeichert sondern nur die Punkte, die für die mathematische Beschreibung notwendig sind. Somit verbrauchen Vektorbilder nur einen Bruchteil des Speicherplatzes eines Rasterbildes. Allerdings müssen die mathematischen Infor- mationen auf dem Zielrechner erst wieder in sichtbare Grafiken umgewandelt, also gerastert oder gerendert werden. Die dafür notwendige Rechenzeit ist angesichts der Leistungsfähig- keit heutiger Rechnergenerationen zu vernachlässigen. Die mathematischen Informationen erlauben es, ein Bild mit einem beliebigen Zoomgrad darzustellen oder zu drucken, ohne dass Pixel sichtbar werden, weil für jede neue Ansicht ein neuer Rendervorgang gestartet wird, um stets optimale Ergebnisse zu erzielen. Die einzelnen Objekte in einer Vektorgrafik können je- derzeit einzeln ausgewählt, neu platziert, verändert oder gelöscht werden, ohne dabei andere Bildbereiche verändern zu müssen. Zudem liegen sie auf jeweils einer Ebene und können in der Ebenenhierarchie beliebig verschoben werden, so dass Objekte über anderen Objekten zu liegen kommen.

Vektorgrafiken können bei erklärenden Darstellungen, Infogrammen, Diagrammen, Illustrati- onen und einfachen Strichgrafiken zum Einsatz kommen. Software wie Zeichenprogramme, Illustrations- und Designerprogramme und CAD-Programme setzen vornehmlich Vektorgra- fiken ein.

Viewer-Varianten

Die nachfolgend vorgestellten Vektorgrafikformate bedienen sich zur Darstellung ihrer For- mate Plugins. Sollte ein Anwender ein benötigtes Plugin nicht installiert haben, so muss er

- das erforderliche Plugin zunächst auf der Web-Site des Plugin-Entwicklers aufspüren (meist wird er aber durch das Fehlen eines Plugins automatisch auf die richtige Seite verwiesen)
- und von derselben downloaden.
- Danach ist das Plugin einmalig zu installieren.
- Zum Schluss steht es dann nach einem eventuellen Neustart des Browsers zur Verfü- gung.

Im besten Fall laufen diese Schritte automatisch ab. In jedem Fall wird aber die Bereitschaft des Anwenders vorausgesetzt, sein System mit weiterer Software zu bestücken.

Eine etwas andere Variante sind Applets. Das sind mehr oder weniger aufwendige Javapro- gramme, die für das Ausführen im Browser geeignet sind und ebenfalls Vektorgrafiken darstel- len können.

Genau genommen arbeiten Java-Applets, die auf der von Sun angebotenen Java Virtual Machine basieren, auch mit einem Plugin. Dieses Plugin verbindet den Browser mit der Java Virtual Machine von Sun. Es muss ebenso einmalig heruntergeladen werden wie die oben beschriebenen Plugins. Ansonsten verfolgen Applets aber ein anderes Konzept: Sie verweilen nur zur Laufzeit der jeweiligen Applet-Anwendung im System und werden immer zusammen mit den eigentlichen Inhalten automatisch geladen, und zwar jedes Mal, wenn die Seite mit dem Applet erneut im Browser aufgerufen wird. Somit können sie eine gewisse Sicherheit z.B. für den Finanzbereich gewährleisten. Auch ist die Anzahl der Plattformen, die von Java-App- lets unterstützt werden, beträchtlich größer als die Plattformen, für die Plugins geschrieben werden. Plugins sind systemspezifisch, nicht plattformübergreifend und stehen meist nur für die gängigsten Systeme zur Verfügung. Weiterhin sind Applets durch die automatische„garba- ge collection“ (Speicherfreigabe) zeitkritischer und das Laden der Java Virtual Machine dauert wesentlich länger als das Laden eines Plugins. Auch sind Applets in den häufigsten Fällen eher größer als die Inhalte der anderen Plugin-Variante.

Trotz der Vorteile von Applets hat sich das Flash-Plugin als Quasi-Standard für die Darstellung von Vektorgrafiken im Internet etabliert. Es kann beim Installieren des Internet Explorers mit ausgewählt werden. Flash kommt auf äußerst vielen Websites im Internet zum Einsatz. Flash bietet weiterhin eine Vielzahl von Funktionen, die weit über ein einfaches Grafikformat hin- ausgehen (s.u.) und nicht programmiert werden müssen, im Gegensatz zu den Funktionen bei Applets. Der Flash-Player ist bei 98,2% der Browser installiert, Java ist bei 98,5% der Browser aktiviert. [webhits03] Die nachfolgende Tabelle zeigt wichtige Unterscheidungsmerkmale von Vektor- und Pixelgra- fiken im direkten Vergleich [pctip98]:

Abbildung in dieser Leseprobe nicht enthalten

Tab. 02: Vergleich von Vektor- und Pixelgrafik

Die nachfolgend vorgestellten Formate sind interessante und vielversprechende Konkurren- ten zu SVG. Allerdings gibt es noch andere Dateiformate, die aber einerseits durch ihre Her- kunft aus dem CAD-Bereich einen anderen Ansatz verfolgen und es andererseits aber auch - angesichts der breiten Unterstützung der Firmen im SVG-Konsortium für SVG - schwer ha- ben werden, sich gegen SVG zu behaupten. Darunter sind vor allem Formate wie SVF (Simple Vector Format), das als erstes herstellerunabhängiges Vektorformat 1994 entworfen wurde, um CAD-Zeichnungen im Internet anzeigen zu können [svf ] und das Format DWF (Drawing Web Format), ein stark komprimierendes Dateiformat, das die CAD-Software AutoCAD aus sei- nem Standarddateiformat DWG heraus erstellt, um Zeichnungen über das Internet zugänglich zu machen. Weiterhin wurde ein Formatvorschlag namens PGML (Precision Graphics Markup Language) von Adobe am 10. April 1998 dem W3C vorgelegt [pgml]. Dieser Formatvorschlag sieht ebenfalls XML als Beschreibungssprache vor und will das Bildmodell von PostScript und PDF verwenden bzw. für Belange des Internets erweitern. Teilweise sind die Bemühungen um diese anderen Formate auch zugunsten der Entwicklung von SVG aufgegeben worden.

4.3.1 WebCGM

WebCGM ist ein Profil, das dem Format CGM zugrunde liegt. CGM (Computer Graphics Metafile) ist ein von der ISO ursprünglich 1987 normierter, offener, freier und anwendungs- und geräteunabhängiger Grafikformatstandard, der ein oder mehrere zweidimensionale Vektorbilder beschreibt und als Austausch- und Druckformat für grafische und CAD-Systeme entwickelt wurde. Es können sowohl Vektorbilder als auch Binärdaten wie Bitmapbilder oder sonstige nichtgrafische Informationen kodiert werden. Des Weiteren haben verschiedene Industrien wie die Mineralöl-, die Automobil-, die Eisenbahn- und die Luftfahrtindustrie für sich speziell angepasste Profile erstellt, um ihren eigenen Bedürfnissen z.B. nach seismischen Informationen gerecht werden zu können.

Folgende Profile sind derzeit definiert:

Model-Profil

- allgemeines Profil, welches alle drei Kodierungen unterstützt
- geeignet für grundlegende wissenschaftliche und technische Grafiken (computer-
gestütztes Design, Geowissenschaften, Kartografie) und Präsentations-, Visualisie- rungs- und Publishing-Applikationen

ATA-Profil

- Profil der Airline Transport Association
- entwickelt für die technische Dokumentation der Herstellung und Funktionsweise

ziviler Flugzeuge

- unterstützt Binär- und Klartextkodierung
- geeignet zum Austausch technischer Handbücher, Publishing-Applikationen und

Visualisierungen

CALS-Profil

- Continuous Acquisition and Life-Cycle Support
- vom US-Verteidigungsministerium für technische Illustrationen und Produktinfor- mationen bei der Waffenbeschaffung verwendet
- unterstützt Binärkodierung
CGM*PIP
- Profil der Petroleum Industry
- entwickelt zum grafischen Austausch zwischen petrotechnischen Anwendungen in der Petrolforschung und dem Produktionsgewerbe

Drei verschiedene CGM-Varianten sind verfügbar: binary mit der stärksten Komprimierung und der größten Effizienz, character für besten Transport in Netzwerken und clear text zum Lesen und Verändern durch den Menschen. Weiterhin existieren insgesamt vier Versionen von CGM, die seit 1999 sogar Funktionen wie Interaktionen, Hot-Spots und Verlinkung vorsehen.

Die Tatsache, dass die Dreiteilung, die firmenspezifischen Erweiterungen und die Versions- vielfalt nicht von allen Programmen unterstützt werden, gefährdet die Austauschbarkeit des Formats, weil nicht jede Software alle Varianten beherrscht. Auch ist die Integrationsfähigkeit mit anderen Spezifikationen nicht gegeben und CGM verwendet seine eigene Syntax und sein eigenes Format.

WebCGM ist das letzte Profil und wurde von W3C-Mitgliedern und CGM-Experten entwickelt und vom W3C am 21.1.1999 als Empfehlung herausgegeben. Es vereint die verschiedenen Ver- sionen und ist speziell an die Bedürfnisse von Internetapplikationen angepasst. Das Format ist binär. Es enthält Metadaten für externe und interne Verlinkung, Bildstrukturierung, Layerdefi- nitionen sowie Daten für das Suchen von Bildinhalten.

Stellt man SVG und WebCGM gegenüber, so lässt sich sagen, dass WebCGM eher für technisch exakte Grafiken z.B. zum Zwecke der Dokumentation und SVG eher für künstlerische und kre- ative Grafiken z.B. für Werbung, Geschäftsgrafiken und Animationen geeignet ist. Folgende Tabelle soll wichtige Unterscheidungskriterien für die Wahl eines Formates geben.

Abbildung in dieser Leseprobe nicht enthalten

Tab. 03: Vergleich von SVG und WebCGM

Die nicht vorhandene Erweiterbarkeit und die stringente Verfolgung der exakten Reproduzierbarkeit der Grafikausgaben im Standard grenzen die Verwendung des CGM-Formats ganz bewusst auf technische Einsatzbereiche ein. Der SVG-Standard ist ausgelegt auf kurzlebige, nicht zu archivierende, interaktive, multimediale Grafiken, bei denen es nicht darauf ankommt, dass jede Grafik auf jedem System genau gleich aussieht.

[...]

---