Lade Inhalt...

Interaktive SVG-Lerneinheit

©2003 Diplomarbeit 122 Seiten

Zusammenfassung

Inhaltsangabe:Zusammenfassung:
Diese hier vorliegende Arbeit beschäftigt sich mit der Untersuchung von internetkonformen Grafikformatstandards und der Konzeptualisierung, Entwicklung und dem webgerechten Publizieren von Inhalten sowie der Auswertung einer interaktiven Lerneinheit für die Virtuelle Fachhochschule zum Thema „Skalierbare Vektorgrafiken nach dem offiziellen W3C-Standard SVG“. Für die Umsetzung wurde das XML-basierte Storyboardverfahren der VFH gewählt, das die Verwendung des XML-Tools XMetaL von Corel einschloss. Es wurden Texte und Pixelgrafiken erstellt und durchschnittlich mehr als 1,5 SVG-Grafiken auf einer Abschnittsseite mit Lerninhalt eingesetzt.
Die SVG-Grafiken werden stets als Erläuterungen des kurz zuvor Erklärten verwendet und kommen in der Form von einfachen Abbildungen und interaktiven Grafiken vor. Die interaktiven Varianten umfassen Rolloverbilder zur Erklärung von Quellcode und Textformatierungen mittels Schwebefenster, Animationen, um Abläufe zu zeigen oder die Animationsfunktionalität von SVG selbst zu erklären und Interaktionen, um umständliche Quellcode-Veränderungen zur Darstellung von SVG-Funktionalitäten durch Mausbedienung zu umgehen. Es wurde gezeigt, dass eine Verwendung von SVG-Grafiken gegenüber Pixelgrafiken einige Vorteile in einer Lerneinheit bietet und es prinzipiell sogar möglich ist, die bisher für Animationen, Diashows, Rolloverbilder und Interaktionen eingesetzten Flash-Movies gegen SVG-Varianten auszutauschen.
Auf insgesamt 35 Abschnittsseiten wurde versucht, das Thema „SVG“ VFH-Studenten des Faches Medieninformatik, speziell des Faches Autorensysteme, näher zu bringen. Diese sollen am Ende dieser Lerneinheit in der Lage sein, SVG für eigene Projekte einzusetzen. Um diesem Ziel näher zu kommen, wurde eine Projektaufgabe erdacht, die das Gesamtprojekt aus dem Modul „Autorensysteme“ um einen weiteren Arbeitsauftrag ergänzt. Nach Fertigstellung der Lerneinheit erfolgte eine Evaluation, um mögliche Fehler in der Umsetzung zu finden.
Weiterhin bietet die Arbeit einen Überblick über aktuelle SVG-verarbeitende Programme und deren Möglichkeiten. Zu den Programmen zählen Editoren, Autorenwerkzeuge, Viewer und Konverter. Ebenso wurden die technischen Leistungen von SVG zusammen getragen um daraus Rückschlüsse auf ihre Verwendbarkeit in der Online-Lehre ziehen zu können.

Inhaltsverzeichnis:Inhaltsverzeichnis:
Vorwort7
1.Einleitung13
2.Aufgabenbeschreibung15
3.Was ist […]

Leseprobe

Inhaltsverzeichnis


ID 7103
Zuelsdorf, Timon: Interaktive SVG-Lerneinheit
Hamburg: Diplomica GmbH, 2003
Zugl.: Technische Fachhochschule Berlin, Technische Fachhochschule, Diplomarbeit,
2003
Dieses Werk ist urheberrechtlich geschützt. Die dadurch begründeten Rechte,
insbesondere die der Übersetzung, des Nachdrucks, des Vortrags, der Entnahme von
Abbildungen und Tabellen, der Funksendung, der Mikroverfilmung oder der
Vervielfältigung auf anderen Wegen und der Speicherung in Datenverarbeitungsanlagen,
bleiben, auch bei nur auszugsweiser Verwertung, vorbehalten. Eine Vervielfältigung
dieses Werkes oder von Teilen dieses Werkes ist auch im Einzelfall nur in den Grenzen
der gesetzlichen Bestimmungen des Urheberrechtsgesetzes der Bundesrepublik
Deutschland in der jeweils geltenden Fassung zulässig. Sie ist grundsätzlich
vergütungspflichtig. Zuwiderhandlungen unterliegen den Strafbestimmungen des
Urheberrechtes.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in
diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme,
dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei
zu betrachten wären und daher von jedermann benutzt werden dürften.
Die Informationen in diesem Werk wurden mit Sorgfalt erarbeitet. Dennoch können
Fehler nicht vollständig ausgeschlossen werden, und die Diplomarbeiten Agentur, die
Autoren oder Übersetzer übernehmen keine juristische Verantwortung oder irgendeine
Haftung für evtl. verbliebene fehlerhafte Angaben und deren Folgen.
Diplomica GmbH
http://www.diplom.de, Hamburg 2003
Printed in Germany

Interaktive SVG-Lerneinheit
7
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 Grafi kstandards 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 pfl e-
gen konnte als sonst.
Mitarbeiter der VFH
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.

Interaktive SVG-Lerneinheit
9
Inhaltsverzeichnis
Vorwort
7
1
Einleitung
13
2
Aufgabenbeschreibung
15
3
Was ist SVG
19
3.1
Entstehungsgeschichte
19
3.2
Verwandtschaft zu XML
21
3.3
Einsatzschwerpunkte
22
4
Grafi kformate im Internet
25
4.1
Anforderungen an Bildformate im Internet
26
4.2
Bitmap-basierte Grafi kformate
27
4.2.1
GIF
31
4.2.2
JPEG
32
4.2.3
PNG
33
4.2.4
JPEG2000
34
4.3
Vektor-basierte Grafi kformate
35
4.3.1
WebCGM
38
4.3.2
VML
41
4.3.3
Flash
41
4.4
Vergleich SVG und Flash
44
5
Software für SVG
45
5.1
Zeichenprogramme
45
5.2
Autorenwerkzeuge
49
5.3
Viewer
50
5.4
Konverter
53

10
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
11
6
Was leistet SVG
57
6.1
Leistungen
57
6.1.1
Strukturelle Leistungen
58
6.1.2
Grafi sche Leistungen
59
6.1.3
Textuelle Leistungen
60
6.1.4
Animationstechnische Leistungen
61
6.1.5
Interaktive Leistungen
62
6.1.6
Multimediale Leistungen
63
6.1.7
Integration in Webseiten
64
6.2
Erweiterungsmöglichkeiten
65
6.3
Was SVG noch nicht leistet
65
6.4
Pro und Kontra SVG
68
6.5
Ausblick
68
7
Interaktive Lerneinheit SVG für die VFH
69
7.1
Die virtuelle Fachhochschule (VFH)
69
7.2
Lernen in der Online-Umgebung der VFH
70
7.3
Storyboarding in der VFH Berlin
73
7.4
Analyse des IST-Zustandes
83
7.5
Konzeptionelles Vorgehensmodell
85
7.5.1
Die verschiedenen Lernobjekte
89
7.5.1.1
Abbildungen
90
7.5.1.2
Rolloverbild
91
7.5.1.3
Animation
94
7.5.1.4
Diashow
95
7.5.1.5
Interaktion
97
7.5.2
Text
99
7.6
Was leistet SVG gegenüber Flash für die VFH?
101
7.7
Erweiterungsideen
102
8
Evaluation der Lerneinheit
105
8.1
Evaluationsmöglichkeiten
105
8.2
Durchführung
106
8.3
Ergebnisse
110

10
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
11
9
Zusammenfassung und Ausblick
111
Anhang
113
Liste aller SVG-Elemente
113
Eventnamen und Eventattributnamen für Interaktionen
116
Verzeichnisse
117
Abbildungen
117
Tabellen
118
Literatur
119
Glossar
125
Internet-Ressourcen zu SVG
131
33

Interaktive SVG-Lerneinheit
13
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üsselqualifi kation für berufl ichen
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 berufl icher Qualifi kationen 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
Grafi kformatstandards 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 Vektorgrafi ken nach dem offi ziellen 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.

Interaktive SVG-Lerneinheit
15
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 Grafi kformat. Daher wird zunächst
untersucht, welche Grafi kformate derzeit im Internet Verwendung fi nden 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 Grafi kobjekte 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) Grafi ken 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-Grafi ken 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-Grafi ken (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-Grafi kobjekten 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.

16
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
17
Bei SVG handelt es sich um einen kompletten, breit gefächerten und komplexen Grafi kstan-
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 fi nden, 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
einfl ießen ­ eventuell im Rahmen einer Erweiterung, die noch näher zu spezifi zieren 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
behilfl ich 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.

16
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
17
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 profi tieren 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 Grafi kstandard wie SVG könn-

18
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
19
te diese Lücke geschlossen werden, weil hier Grafi ken von Mediengestaltern entworfen und
später in einem programmierbaren und scriptfähigen Format abgespeichert werden können.
Dieses Format ermöglicht es, eine Grafi k 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-Grafi ken 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.

18
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
19
3
Was ist SVG
SVG steht für Skalierbare Vektor Grafi ken, eine XML-Grammatik für veränderbare
Grafi ken.
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-
Grafi ken 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 Grafi k zustan-
de kommen oder durch Referenzierung bzw. Einbettung von Elementen aus anderen Grafi ken
entstehen kann.
Vektor
Im Gegensatz zu Formaten, die auf Rastern aus einzelnen Pixeln beruhen, enthalten Vektorgra-
fi ken geometrische Objekte wie Linien und Kurven. Sie sind wesentlich fl exibler, da sie nicht
wie die Rasterformate jedes Pixel einer Grafi k separat abspeichern.
Vektorgrafi ken werden erst clientseitig gerastert. Das erspart eine aufwendige Übertragung
der einzelnen Werte für Pixel in Netzwerken. SVG kann den Rasterungsprozess steuern und
Grafi ken wahlweise mit oder ohne Kantenglättung (Anti-Aliasing) darstellen. SVG ist allerdings
nicht auf die Verwendung von Vektorobjekten beschränkt. Es kann ebenso Rastergrafi ken dar-
stellen und durch Filter verändern.
Grafi k
Die meisten XML-Instanzen sehen nur rudimentäre Grafi keigenschaften 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 Vektorgrafi ken und gemischten Vektor-/Rastergrafi ken zulässt.
3.1
Entstehungsgeschichte
Schon bevor die Bezeichnung Scalable Vector Graphics überhaupt geboren wur-
de, war das Thema ,,webfähige Vektorgrafi ken" 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
Grafi ken formuliert [sca-req], jedoch erst zwei Jahre später, Ende März 1998, wurde dem W3C
ein offi zieller Vorschlag von den beiden englischen Laboratorien CCLRC und RAL unterbreitet,
in dem XML dazu verwendet werden sollte, schematische 2D-Diagramme darzustellen [ws].

20
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
21
Keine zwei Monate später folgten zwei ausführlichere Spezifi kationsvorschlä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-Profi l vorgeschlagen und eine weitere Spezifi ka-
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 Mobilprofi le von SVG. Nach aktuellem Stand der SVG Roadmap (Juni 2003)
soll im Januar 2004 SVG 1.2 fertig sein.
Candidate
Recommendation
Last Call
Working Draft
Proposed
Recommendation
Working Draft
Recommendation
Note 1
Note 2
Note 3
Abb. 01:
,,Recommendation Track" zur Konsensfi ndung einer Webtechnologie

20
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
21
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 offi zielle Empfehlung (Standard) des W3C weit
verbreiteten Einsatz fi nden soll.
3.2
Verwandtschaft zu XML
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.

22
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
23
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 Defi nition). Hier werden erlaubte Elemente und
Attribute, sowie deren Standardwerte, Datentypen, die Hierarchien und Verschachtelungen
festgelegt. Ferner wird defi niert, welche Elemente und deren Attribute verpfl ichtend 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 HTML
·
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 fi nden, in denen ein echtes Interesse des Benutzers an der visuali-
sierten Materie besteht. So z.B. in den Bereichen
·
Kartografi e
·
Allgemeine Infografi k
·
Technische Illustration
Beispiele zur SVG-gestützen Kartografi e fi nden 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 Infografi ken fi nden sich Beispiele bei Adobe selbst. Unter http://www.adobe.com/svg/
demos sind Anwendungsmöglichkeiten aufgezeigt, z.B. eine Theaterplatzreservierung, Daten-
visualisierung mittels Chartgrafi ken, 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

22
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
23
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 Vektorgrafi kprogrammen 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 Vektorgrafi kformaten 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 Offi ce 11 soll SVG unterstützen.
Eine Schwesterentwicklung von SVG ist ,,Mobile SVG". Für unterschiedlich leistungsstarke mo-
bile Endgeräte wurden hier zwei separate Profi le defi niert, die eine Untermenge der derzeiti-
gen SVG-Spezifi kation 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 Kartografi e
·
Entertainment (Spiele, Cartoons, eCards etc.)
·
Industrielle Anwendungen wie das Darstellen von Konstruktionsplänen auf HMDs
(Head Mounted Display)
·
eCommerce (grafi sche 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]

24
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
25
Da eine Aufsplitterung in verschiedene Profi le 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 fi ndet sich
beim W3C unter [w3c-hw10].

24
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
25
4
Grafi kformate im Internet
Der erste Internetbrowser mit grafi scher 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 Grafi kstandards GIF und
JPEG. PNG wurde erst viel später entwickelt. Seitdem sind Bilder aus dem Internet nicht mehr
wegzudenken.
,,Grafi sche und fotografi sche 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 Informationsfl uss
(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 Grafi ken 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 Grafi ken schon sehr lange als Verweisgrundlage in
Form von verlinkten Bildern mit Text (Buttons) eingesetzt, um Inhalte strukturiert darzustellen.
Ferner übernehmen Grafi ken die Funktion eines wichtigen kompositorischen Elements im
Layout einer Webseite. Die frühere Richtlinie, Grafi ken sparsam und wenn, dann nur kompri-
miert einzusetzen, gilt noch immer, trotz der zunehmend breiter werdenden Netzanschlüsse
der Anwender.
VG
SVG
Abb. 03:
Bitmapgrafi ken sind im Vergleich zur Vektorgrafi k nicht verlustfrei skalierbar.
Bitmap: Mosaik aus Pixeln; benötigt viel Speicherplatz;
Vektor: Defi nition von Umrisskurven durch mathematische Funktionen; geringer Speicherbedarf

26
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
27
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 effi zienter 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.

26
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
27
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 Grafi kformate
Die überwiegende Anzahl von Grafi ken 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
element
element
(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
8
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.)

28
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
29
Abb. 05:
2 Bit: Hier sind schon vier Töne möglich (Weiß, Hellgrau, Dunkelgrau, Schwarz).
Abb. 04:
1 Bit: Hier kann nur zwischen Schwarz und Weiß unterschieden werden.

28
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
29
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
defi niert werden. Neben dem RGB-Modell gibt es noch weniger häufi g 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.
2
4
8
16
32
64
128
256
G
R
A
U
T
Ö
N
E
1
2
3
4
5
6
7
8
B
IT
T
IE
F
E
Abb. 06:
8 Bit: Hier werden 256 Farbtöne unterschieden.

30
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
31
Physikalisch-technische Farbmodelle wie das RGB-Modell, fi nden für bestimmte Ausgabeme-
dien Verwendung. So wurde z.B. das RGB-Modell für Bildschirmausgaben defi niert, 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 defi niert.
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 defi nierten 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 Grafi ken 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 Grafi ken viel Rechenzeit in Anspruch nimmt. Der zweite große Nachteil ist, dass Fehler bei
Bildänderungen so gut wie nicht behoben werden können.

30
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
31
4.2.1 GIF
Das GIF-Grafi kformat (Graphics Interchange Format) wurde 1987 von dem Online-
Anbieter CompuServe entwickelt und war lange der Quasi-Standard für Grafi ken im Internet.
Es ist auch heute noch das gebräuchlichste Grafi kformat. Es wurde entwickelt, um Grafi ken
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-Grafi ken, 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 defi niert werden kann. Die Pixel, denen diese transparente Farbe zugewie-
sen wurde, werden dann nicht dargestellt, sondern werden durchsichtig. Dadurch passt sich
die Grafi k perfekt an den Hintergrund an.
Interlaced
Bei größeren GIF-Bildern kann es von Vorteil sein, schon vor dem Ende des Ladens einer Grafi k
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 defi nierten 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 defi niert 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-

32
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
33
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-Grafi k 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 Grafi kformat 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 Grafi kprogrammen 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

32
Interaktive SVG-Lerneinheit
Interaktive SVG-Lerneinheit
33
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 JPEG
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 Grafi kfor-
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 fi ndet 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
lizenzpfl ichtigen 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 Grafi ken mit großen
einfarbigen Flächen aus. Bei Fotos und Grafi ken mit vielen feinen Farbübergängen hingegen
greift der Algorithmus weniger stark.

Details

Seiten
Erscheinungsform
Originalausgabe
Jahr
2003
ISBN (eBook)
9783832471033
ISBN (Paperback)
9783838671031
Dateigröße
67.2 MB
Sprache
Deutsch
Institution / Hochschule
Beuth Hochschule für Technik Berlin – VI - Informatik
Erscheinungsdatum
2014 (April)
Note
1,3
Schlagworte
grafikformate evaluation onlinelehre scalable vector graphics
Zurück

Titel: Interaktive SVG-Lerneinheit
book preview page numper 1
book preview page numper 2
book preview page numper 3
book preview page numper 4
book preview page numper 5
book preview page numper 6
book preview page numper 7
book preview page numper 8
book preview page numper 9
book preview page numper 10
book preview page numper 11
book preview page numper 12
book preview page numper 13
book preview page numper 14
book preview page numper 15
book preview page numper 16
book preview page numper 17
book preview page numper 18
book preview page numper 19
book preview page numper 20
book preview page numper 21
book preview page numper 22
book preview page numper 23
book preview page numper 24
book preview page numper 25
book preview page numper 26
122 Seiten
Cookie-Einstellungen