referat multimedia-grafikformate. gaab/iav22 einleitung pixelbasierte grafikformate...

REFERATREFERATMultimedia-GrafikformateMultimedia-Grafikformate

Gaab/IAV2 2

EinleitungEinleitung

Pixelbasierte Pixelbasierte GrafikformateGrafikformate

GIF:GIF:

AllgemeinesAllgemeines

FeaturesFeatures

AufbauAufbau

JEPG:JEPG:


FeatureFeature

PNG:PNG:


FeaturesFeatures

AufbauAufbau

ZusammenfassungZusammenfassung

Gliederung

Vektorbasierte Grafikformate SVG: Allgemeines Textcode Grafik Grafik Textcode

Quellen

Gaab/IAV2 3

Einleitung:Einleitung:

Grafiken spielen in der heutigen Zeit eine sehr wichtige Rolle. Sie können die Grafiken spielen in der heutigen Zeit eine sehr wichtige Rolle. Sie können die Aufmerksamkeit des Betrachters wecken, Inhalte ansprechender gestalten und helfen Aufmerksamkeit des Betrachters wecken, Inhalte ansprechender gestalten und helfen auch oft dem Betrachter einen besseren Überblick zu verschaffen. Dies gilt nicht nur im auch oft dem Betrachter einen besseren Überblick zu verschaffen. Dies gilt nicht nur im Bereich von Printmedien und Fernsehen sondern auch im Bereich der neuen Medien, Bereich von Printmedien und Fernsehen sondern auch im Bereich der neuen Medien, speziell dem Internet. Es ist jedoch nicht ganz einfach Grafiken sinnvoll und optisch speziell dem Internet. Es ist jedoch nicht ganz einfach Grafiken sinnvoll und optisch ansprechend auf Internet-Seiten anzubringen. Verschiedene Hard- und ansprechend auf Internet-Seiten anzubringen. Verschiedene Hard- und Softwarevoraussetzungen erschweren das Erstellen von Grafiken im Netz da man Softwarevoraussetzungen erschweren das Erstellen von Grafiken im Netz da man erreichen möchte dass die Grafik bei jedem (egal welches Betriebssystem) angezeigt erreichen möchte dass die Grafik bei jedem (egal welches Betriebssystem) angezeigt wird.wird.

Gaab/IAV2 4

Pixelbasierte und Vektorbasierte GrafikformatePixelbasierte und Vektorbasierte Grafikformate Um die genauen Unterschiede der beiden Grafikformate und ihr Vor- und NachteileUm die genauen Unterschiede der beiden Grafikformate und ihr Vor- und Nachteile

erörtern zu können, werden wir uns nun die Grafikformate an sich betrachten, sowieerörtern zu können, werden wir uns nun die Grafikformate an sich betrachten, sowie

ihre Eigenschaften und Funktionsweisen.ihre Eigenschaften und Funktionsweisen.

Übersicht:Übersicht:

Pixelbasierte Grafikformate:Pixelbasierte Grafikformate:

Vektorbasierte Grafikformate:Vektorbasierte Grafikformate:

Gaab/IAV2 5






Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den anderen Medien.anderen Medien.

Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Unterschied zwischen Unterschied zwischen

den Formaten liegt in der Art wie sie komprimiert werden. den Formaten liegt in der Art wie sie komprimiert werden.


Gaab/IAV2 6






Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den anderen Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den anderen Medien.Medien.

Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Unterschied Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Unterschied zwischen zwischen

den Formaten liegt in der Art wie sie komprimiert werden. den Formaten liegt in der Art wie sie komprimiert werden.


Ein Vektorbasiertes Grafikformat ist zum Beispiel SVG. Im Gegensatz zu den Pixelbasierten Ein Vektorbasiertes Grafikformat ist zum Beispiel SVG. Im Gegensatz zu den Pixelbasierten

Grafikformaten werden die einzelnen Farbinformationen nicht in den einzelnen Pixeln gespeichert Grafikformaten werden die einzelnen Farbinformationen nicht in den einzelnen Pixeln gespeichert sondernsondern

die Vektorgrafik enthält die Eigenschaftsbeschreibung des Objekts das gezeichnet werden soll.die Vektorgrafik enthält die Eigenschaftsbeschreibung des Objekts das gezeichnet werden soll.

Gaab/IAV2 7

Eine Nahansicht der Linie als Pixelgrafik

Eine Nahansicht der Linie als Vektorgrafik

Nahansicht einer Linie zwischen zwei Punkten: Pixelgrafik- Vektorgrafik

Wenn man annimmt, dass das auszugebende Bild 200x200 Pixel groß ist und in256 Graustufen gespeichert wird, so wird pro Pixel 1 Byte gespeichert. Bei derangenommenen Bildgröße werden also 200x200x1 Byte ≈ 40 KBytegespeichert.

Wenn man nun für die Vektorgrafik veranschlagt, dass die Information derDicke mit 2 Byte, die Farbe mit 1 Byte und die Position der Punkte mit jeweils 8Byte abgespeichert wird, so ergibt sich eine Bildgröße von 2+1+8+8 = 19 Byte(≈ 0,02 KByte).

Gaab/IAV2 8

Pixelbasierte BildformatePixelbasierte Bildformate

GIF ( „Graphic Interchange-Format“ ):GIF ( „Graphic Interchange-Format“ ):

Dieses Bildformat wurde 1987 von den CompuServe-Betreibern zum schnellen, kostensparendenDieses Bildformat wurde 1987 von den CompuServe-Betreibern zum schnellen, kostensparenden

Austausch von Bildern durch Mailboxnetze entwickelt und ist heute wohl das am weitesten verbreiteteAustausch von Bildern durch Mailboxnetze entwickelt und ist heute wohl das am weitesten verbreitete

Grafikformat auf dem PC. Grafikformat auf dem PC.

Für den Datenaustausch wichtig ist vor allem, dass das Format plattformunabhängig definiert wurde undFür den Datenaustausch wichtig ist vor allem, dass das Format plattformunabhängig definiert wurde und

nicht wie andere Formate an bestimmte Grafikmodi gebunden ist, da es die Dateien in einem für allenicht wie andere Formate an bestimmte Grafikmodi gebunden ist, da es die Dateien in einem für alle

Grafiksysteme verwendbaren Format hält. GIF erlaubt Bilder bis zu einer Auflösung von 16000 x 16000Grafiksysteme verwendbaren Format hält. GIF erlaubt Bilder bis zu einer Auflösung von 16000 x 16000

Punkten bei einer Palette von 256 Farben. Punkten bei einer Palette von 256 Farben.

Das GIF-Format bietet nützliche Features:Das GIF-Format bietet nützliche Features:

Im „Interlace-Modus“ gespeichert wird beim öffnen eines GIF-Bildes erst jede 10 Bildzeile übertragen wasIm „Interlace-Modus“ gespeichert wird beim öffnen eines GIF-Bildes erst jede 10 Bildzeile übertragen was

eine durch „Klonzeilen“ ergänzte Vorabversion des Bildes ermöglicht. So kann man bevor die gesamteeine durch „Klonzeilen“ ergänzte Vorabversion des Bildes ermöglicht. So kann man bevor die gesamte

Datei geladen ist schon einen groben Eindruck über das Gesamtbild bekommen. Gerade im Internet kannDatei geladen ist schon einen groben Eindruck über das Gesamtbild bekommen. Gerade im Internet kann

dies oftmals von nutzen sein.dies oftmals von nutzen sein.

Auch das abspeichern mehrerer Bilder in einer GIF-Dateien ist möglich. Diese können dann sogar alsAuch das abspeichern mehrerer Bilder in einer GIF-Dateien ist möglich. Diese können dann sogar als

kleiner Film animiert werden. Dies ist jedoch sehr speicheraufwändig, da auch bei geringen kleiner Film animiert werden. Dies ist jedoch sehr speicheraufwändig, da auch bei geringen UnterschiedenUnterschieden

der Einzelbilder jedes Bild einzeln Komprimiert abgespeichert wird.der Einzelbilder jedes Bild einzeln Komprimiert abgespeichert wird.

Gaab/IAV2 9

Es besteht auch die Möglichkeit eine Farbe als unsichtbar (transparent) zu definieren. Durch diese Es besteht auch die Möglichkeit eine Farbe als unsichtbar (transparent) zu definieren. Durch diese

Möglichkeit werden z.B. GIFs, die eine transparente Hintergrundfarbe haben, egal auf welcher Möglichkeit werden z.B. GIFs, die eine transparente Hintergrundfarbe haben, egal auf welcher

Hintergrundfarbe sie sich befinden ohne ihren eigenen Hintergrund dargestellt, der sonst ein Hintergrundfarbe sie sich befinden ohne ihren eigenen Hintergrund dargestellt, der sonst ein hässlicheshässliches

Viereck in einer Farbe, die sich vom Hintergrund abheben würde, wäre.Viereck in einer Farbe, die sich vom Hintergrund abheben würde, wäre.

ohne transparenten Hintergrund mit transparenten Hintergrund

Gaab/IAV2 10

Aufbau einer Gif-DateiAufbau einer Gif-Datei

Im Header steht die Formatkennung „GIF“Im Header steht die Formatkennung „GIF“

Der Logical Screen Discriptor enthält InformationenDer Logical Screen Discriptor enthält Informationenüber Höhe und Breite des Bildes in Pixel.über Höhe und Breite des Bildes in Pixel.Dadurch wird festgelegt, wie viel Platz vom BrowserDadurch wird festgelegt, wie viel Platz vom Browserauf dem Bildschirm reserviert wird, um das Bildauf dem Bildschirm reserviert wird, um das Bildanzuzeigen. anzuzeigen.

Im Global Color Table sind Informationen überIm Global Color Table sind Informationen überHintergrundfarbe und Farbtiefe hinterlegt.Hintergrundfarbe und Farbtiefe hinterlegt.

Der Bild-Definitionsblock enthält Informationen überDer Bild-Definitionsblock enthält Informationen überdie Position der linken oberen Ecke des Bildes aufdie Position der linken oberen Ecke des Bildes aufdem Bildschirm und über die Breite und Höhe des dem Bildschirm und über die Breite und Höhe des Bildes. Zusätzlich beinhaltet er diverse Flags, Bildes. Zusätzlich beinhaltet er diverse Flags,

welche welche u. a. angeben, ob interlaced auszugeben ist. u. a. angeben, ob interlaced auszugeben ist.

Die GIF-Datei wird hexadezimal durch die Zahl 3BDie GIF-Datei wird hexadezimal durch die Zahl 3BAbgeschlossen.Abgeschlossen.

Gaab/IAV2 11

JEPG (Joint Photographic Expert Group):JEPG (Joint Photographic Expert Group):

Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, dasBei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das

auf dem Komprimierungsalgorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der auf dem Komprimierungsalgorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der

Huffman-Kodierung basiert. Huffman-Kodierung basiert.

Das Bildformat bietet ähnliche Merkmale wie GIF-Bilder, kann aber bis zu 16,7 Mio. Farben darstellen. Das Bildformat bietet ähnliche Merkmale wie GIF-Bilder, kann aber bis zu 16,7 Mio. Farben darstellen.

Deshalb eignet sich dieses Format vor allem zum Darstellen von Fotos und anderen Halbtonbildern.Deshalb eignet sich dieses Format vor allem zum Darstellen von Fotos und anderen Halbtonbildern.

Mit JPEG wird die Dateigröße durch selektives Löschen von Daten komprimiert. Da hierbei Daten verloren Mit JPEG wird die Dateigröße durch selektives Löschen von Daten komprimiert. Da hierbei Daten verloren

gehen, wird die JPEG-Komprimierung auch als verlustreich bezeichnet. Das JPEG-Format kann zu gehen, wird die JPEG-Komprimierung auch als verlustreich bezeichnet. Das JPEG-Format kann zu

Detailverlusten in einem Bild führenDetailverlusten in einem Bild führen

Die Funktionsweise von JPEG wird hier nicht sehr detailliert erklärt werden können, da die Kompression Die Funktionsweise von JPEG wird hier nicht sehr detailliert erklärt werden können, da die Kompression

und Reduktion auf mathematischen Formeln beruhen, die ziemlich komplex sind. Es folgt nur ein kleiner und Reduktion auf mathematischen Formeln beruhen, die ziemlich komplex sind. Es folgt nur ein kleiner

Auszug aus einem Artikel zu der Funktionsweise von JPEG: Auszug aus einem Artikel zu der Funktionsweise von JPEG:

[...] Das uncodierte Standbild wird in Blöcke zerlegt, die mit einem speziellen Algorithmus (DCT), [...] Das uncodierte Standbild wird in Blöcke zerlegt, die mit einem speziellen Algorithmus (DCT), transformiert werden. Bei diesem Schritt werden die Daten zum ersten mal reduziert. Um die transformiert werden. Bei diesem Schritt werden die Daten zum ersten mal reduziert. Um die Eigenschaften des menschlichen Auges auszunutzen, werden nun einige hochfrequente Segmente Eigenschaften des menschlichen Auges auszunutzen, werden nun einige hochfrequente Segmente des Bildes mit weniger Informationen gespeichert, als niederfrequente Teile. Die verschiedenen des Bildes mit weniger Informationen gespeichert, als niederfrequente Teile. Die verschiedenen Farbkomponenten des Bildes werden nun einzeln codiert und mit jeweils einer Quantisierungsmatrix Farbkomponenten des Bildes werden nun einzeln codiert und mit jeweils einer Quantisierungsmatrix einem weiteren Algorithmus (DPCM) zugeführt. Das auf diese Weise komprimierte Bild wird dann bei einem weiteren Algorithmus (DPCM) zugeführt. Das auf diese Weise komprimierte Bild wird dann bei Bedarf in umgekehrter Reihenfolge wieder dekomprimiert. [...] Bedarf in umgekehrter Reihenfolge wieder dekomprimiert. [...]

Gaab/IAV2 12

Im allgemeinen kann man bei dem JPEG Format zwei Variablen zur Kompression und Reduktion selbstIm allgemeinen kann man bei dem JPEG Format zwei Variablen zur Kompression und Reduktion selbst

bestimmen:bestimmen:

Die DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die man für die AnzeigeDie DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die man für die Anzeige

in WWW-Seiten benötigt, reicht ein Wert zwischen 70 und 100 dpi, da so eine gute Anzeige auf dem in WWW-Seiten benötigt, reicht ein Wert zwischen 70 und 100 dpi, da so eine gute Anzeige auf dem

Monitor gewährleistet ist. Für den Druck wiederum sind sie absolut ungeeignet, da sie auf einem Drucker Monitor gewährleistet ist. Für den Druck wiederum sind sie absolut ungeeignet, da sie auf einem Drucker

mit 1440 DPI sehr, sehr klein werden würden; oder wenn man sie größer ausdruckt stark "pixelig" mit 1440 DPI sehr, sehr klein werden würden; oder wenn man sie größer ausdruckt stark "pixelig"

aussehen würden. aussehen würden.

Den Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein Den Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein

Komprimierungsfaktor von 5 bis 10 ist ein sinnvoller Wert, sozusagen ein Kompromiss, bei dem die Komprimierungsfaktor von 5 bis 10 ist ein sinnvoller Wert, sozusagen ein Kompromiss, bei dem die

Bildqualität nicht zu sehr unter der Reduktion leidet und das Bild trotzdem vom Datenvolumen um ein Bildqualität nicht zu sehr unter der Reduktion leidet und das Bild trotzdem vom Datenvolumen um ein

vielfaches kleiner wird, als in der unkomprimierten Form.vielfaches kleiner wird, als in der unkomprimierten Form.

Gaab/IAV2 13

70dpi, Komprimierung 10, Dateigröße 34k 70dpi, Komprimierung 80, Dateigröße 7k

50dpi, Komprimierung 10, Dateigröße 19k

Das Originalbild hatte bei einer Auflösung von 1200 x 1800 eine Größe von 513k

Gaab/IAV2 14

Feature:Feature:

Es gibt beim JPEG-Format die Variante "progressive JPEG-Grafik". Hier wird, ähnlich wie Es gibt beim JPEG-Format die Variante "progressive JPEG-Grafik". Hier wird, ähnlich wie beim GIF in beim GIF in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden WWW-Browser übertragen werden, nachdem etwa 15% der Grafikdatei an den aufrufenden WWW-Browser übertragen wurden. Das wurden. Das Bild wird dann stufenweise besser, bis es die volle Qualität erreicht hat, nämlich wenn Bild wird dann stufenweise besser, bis es die volle Qualität erreicht hat, nämlich wenn 100% der 100% der Grafikdatei an den Browser übertragen wurden. Grafikdatei an den Browser übertragen wurden.

ansteigende Qualität (progressive encoding) von oben nach unten (standard encoding)

Gaab/IAV2 15

PNG ( „Portable Network Graphics“ ):PNG ( „Portable Network Graphics“ ):

Das PNG-Format wurde vom Word Wide Web Consortium (W3C) entwickelt um das durch Das PNG-Format wurde vom Word Wide Web Consortium (W3C) entwickelt um das durch

Patentprobleme behaftete GIF Format abzulösen. Es ist ebenfalls plattformunabhängig, bietet Patentprobleme behaftete GIF Format abzulösen. Es ist ebenfalls plattformunabhängig, bietet

aber im Gegensatz zu diesem eine Farbtiefe bis zu 48 Bit und übertrifft damit selbst das aber im Gegensatz zu diesem eine Farbtiefe bis zu 48 Bit und übertrifft damit selbst das

JPEG-Format. Die Komprimierung erfolgt ohne Qualitätsverlust und führt zu 10-30% besserenJPEG-Format. Die Komprimierung erfolgt ohne Qualitätsverlust und führt zu 10-30% besseren

Kompressionsergebnissen.Kompressionsergebnissen.

Features:Features:

Ebenfalls ähnlich zum GIF-Format bietet PNG nützliche Features wie Interlace-Modus und Ebenfalls ähnlich zum GIF-Format bietet PNG nützliche Features wie Interlace-Modus und Transparenz.Transparenz.

Der durch Adam M. Costello verbesserte Interlaced-Modus, auch als Adam7 bekannt, baut Der durch Adam M. Costello verbesserte Interlaced-Modus, auch als Adam7 bekannt, baut das das

Bild statt zeilenweise (GIF) zweidimensional auf. Dies geschieht in 7 Durchgängen. Dabei Bild statt zeilenweise (GIF) zweidimensional auf. Dies geschieht in 7 Durchgängen. Dabei wird das wird das

Bild in 8x8 große Quadrate eingeteilt welche entsprechend dem folgenden Schema Bild in 8x8 große Quadrate eingeteilt welche entsprechend dem folgenden Schema übertragen werden:übertragen werden:

Gaab/IAV2 16

Adam7-SchemaAdam7-Schema

Der Vorteil des Adam7-Schemas gegenüber dem von GIF liegt darin, dass schneller ein Der Vorteil des Adam7-Schemas gegenüber dem von GIF liegt darin, dass schneller ein (grober) (grober)

Überblick über das ganze Bild gewonnen werden kann, und vor allem auch Text ist schneller Überblick über das ganze Bild gewonnen werden kann, und vor allem auch Text ist schneller zu erkennen.zu erkennen.

Gaab/IAV2 17

Alpha-KanalAlpha-KanalIm Gegensatz zu GIF gibt es bei PNG einen "echten" Alpha-Kanal mit verfügbaren 65 000 Graustufen.Im Gegensatz zu GIF gibt es bei PNG einen "echten" Alpha-Kanal mit verfügbaren 65 000 Graustufen.Dies ermöglicht weiche Schatten und Glow-Effekte. Allgemeiner gesprochen, es gibt eine für Dies ermöglicht weiche Schatten und Glow-Effekte. Allgemeiner gesprochen, es gibt eine für Monitorverhältnisse fast stufenlose Transparenz (alpha-Transparenz). Die einfache Farbmaskierung Monitorverhältnisse fast stufenlose Transparenz (alpha-Transparenz). Die einfache Farbmaskierung wie bei GIF ist weiterhin möglich. wie bei GIF ist weiterhin möglich.

Originalbild

Alphakanal

Verknüpfung von Originalbild + Alphakanal

Gaab/IAV2 18

Aufbau:Aufbau:

Jede PNG-Datei besteht aus einer Signatur und einer Folge beliebig vieler Blöcke, den Chunks. Jede PNG-Datei besteht aus einer Signatur und einer Folge beliebig vieler Blöcke, den Chunks.

Die Signatur dient lediglich dazu, eine PNG-Datei als solche zu identifizieren, während in den Die Signatur dient lediglich dazu, eine PNG-Datei als solche zu identifizieren, während in den

Chunks die eigentlichen Bildinformationen gespeichert werden.Chunks die eigentlichen Bildinformationen gespeichert werden.

Allgemeine Dateistruktur PNG

Gaab/IAV2 19

Sämtliche Information, die zum korrekten Darstellen eines Bildes unbedingt erforderlich ist, Sämtliche Information, die zum korrekten Darstellen eines Bildes unbedingt erforderlich ist, steht in den „Critical Chunks“. In jeder PNG-Datei müssen mindestens diese Chunks enthalten steht in den „Critical Chunks“. In jeder PNG-Datei müssen mindestens diese Chunks enthalten sein und jedes Programm, das mit PNG-Dateien arbeitet, muss sie kennen und auswerten sein und jedes Programm, das mit PNG-Dateien arbeitet, muss sie kennen und auswerten

können.können.

Die „Die „Critical ChunksCritical Chunks“ sind :“ sind :

Der Der IHDR-ChunkIHDR-Chunk bildet den Kopf einer Datei, er muss als erster Chunk direkt nach der bildet den Kopf einer Datei, er muss als erster Chunk direkt nach derSignatur stehen und enthält die in der folgenden Tabelle aufgelisteten Informationen:Signatur stehen und enthält die in der folgenden Tabelle aufgelisteten Informationen:

Breite und Höhe geben die Dimensionen des Bildes in Pixeln an. Dabei ist die Null ist nicht erlaubt.Die Bittiefe bestimmt die Anzahl der Bits pro Paletteneintrag.Der Farbtyp beschreibt die Interpretation der Bilddaten.Für die Kompressionsmethode ist zurzeit nur der Wert 0 definiert.Die Filtermethode gibt an ob das Bild vor dem Kodieren bearbeitet wurde.Die Interlacemethode definiert die Übertragungsmethode: 0 kein Interlace 1 Adam7 Interlace

Gaab/IAV2 20

Die Die PLTE-ChunkPLTE-Chunk Palette enthält 1 bis 256 Paletteneinträge, jeder eine 3-Bytefolge in der Form RGB Palette enthält 1 bis 256 Paletteneinträge, jeder eine 3-Bytefolge in der Form RGB (Rot, Grün, Blau). Die Anzahl von Einträgen hängt von der Chunk-Länge ab. Ist diese Länge nicht durch (Rot, Grün, Blau). Die Anzahl von Einträgen hängt von der Chunk-Länge ab. Ist diese Länge nicht durch drei teilbar, so liegt ein Fehler vor. Der erste Eintrag definiert die Farbe 0, der Zweite die Farbe 1, usw. drei teilbar, so liegt ein Fehler vor. Der erste Eintrag definiert die Farbe 0, der Zweite die Farbe 1, usw. bis 255. Es müssen nicht soviele Farben wie die Bittiefe zulässt definiert werden, doch man darf sie dannbis 255. Es müssen nicht soviele Farben wie die Bittiefe zulässt definiert werden, doch man darf sie dannlogischerweise auch nicht benutzen.logischerweise auch nicht benutzen.

Der Der IDAT-ChunkIDAT-Chunk enthält die Bilddaten in komprimierter Form. Um sie zu lesen muss man sie unter enthält die Bilddaten in komprimierter Form. Um sie zu lesen muss man sie unter Berücksichtigung der Filter- und Komprimierungsinformationen dekodieren. Danach sind die Daten Berücksichtigung der Filter- und Komprimierungsinformationen dekodieren. Danach sind die Daten entsprechend der Kombination von Bittiefe und Farbtyp auszulesen. Es können auch mehrere dieser entsprechend der Kombination von Bittiefe und Farbtyp auszulesen. Es können auch mehrere dieser Chunks definiert sein.Chunks definiert sein.

Der Der IEND-ChunkIEND-Chunk ist ein leerer Chunk (Länge=0) und signalisiert das Dateiende. ist ein leerer Chunk (Länge=0) und signalisiert das Dateiende.

Diese Standart Chunks sollten auch in dieser Reihenfolge erscheinen. IHDR vor PLTE vor IDAT vor IEND.Diese Standart Chunks sollten auch in dieser Reihenfolge erscheinen. IHDR vor PLTE vor IDAT vor IEND.

Gaab/IAV2 21

ZusammenfassungZusammenfassung

Bei genauerer Betrachtung erkennt man, dass dir einzelnen Bildformate durchaus sehr unterschiedlich Bei genauerer Betrachtung erkennt man, dass dir einzelnen Bildformate durchaus sehr unterschiedlich

sind und verschiedene Stärken und Schwächen aufweisen. Je nach Verwendungsbedarf bietet sich so an sind und verschiedene Stärken und Schwächen aufweisen. Je nach Verwendungsbedarf bietet sich so an

ein anderes Bildformat an. Die folgende Tabelle soll dabei als Überblick und Entscheidungshilfe dienen :ein anderes Bildformat an. Die folgende Tabelle soll dabei als Überblick und Entscheidungshilfe dienen :

Gaab/IAV2 22

Vektorbasierte GrafikformateVektorbasierte Grafikformate

Original Kreis (Pixelgrafik)

Stark vergrössert

Stark vergrössertOriginal Kreis (Vektorgrafik)

Gaab/IAV2 23

SVG (Scalable Vector Graphics)SVG (Scalable Vector Graphics)

Schon im Jahr 1998 gab es den Versuch skalierbare Webgrafiken zu standardisieren. Doch die Firmen Schon im Jahr 1998 gab es den Versuch skalierbare Webgrafiken zu standardisieren. Doch die Firmen

Microsoft, Macromedia, IBM, Adobe, Netscape und Sun konnten sich nicht auf ein gemeinsames Format Microsoft, Macromedia, IBM, Adobe, Netscape und Sun konnten sich nicht auf ein gemeinsames Format

einigen. Das W3C (World Wide Web Consortium) hingegen erstellte im Oktober 1998 selbst ein einigen. Das W3C (World Wide Web Consortium) hingegen erstellte im Oktober 1998 selbst ein

Pflichtenheft für skalierbare Webgrafiken. Dieser Entwurf wurde weiter entwickelt und im September 2001 Pflichtenheft für skalierbare Webgrafiken. Dieser Entwurf wurde weiter entwickelt und im September 2001

gab das W3C die Scaleable Vector Graphics als offizielle W3C Empfehlung frei.gab das W3C die Scaleable Vector Graphics als offizielle W3C Empfehlung frei.

SVG ist XML, was soviel bedeutet, als das SVG ebenfalls mit den Programmieranweisungen der Sprache SVG ist XML, was soviel bedeutet, als das SVG ebenfalls mit den Programmieranweisungen der Sprache

arbeitet. Ein Vorteil ist natürlich, dass sich SVG und XML ohne Probleme kombinieren lassen. Diearbeitet. Ein Vorteil ist natürlich, dass sich SVG und XML ohne Probleme kombinieren lassen. Die

Grundzüge der Sprache XML lassen sich relativ einfach erlernen, was damit genauso für das Arbeiten Grundzüge der Sprache XML lassen sich relativ einfach erlernen, was damit genauso für das Arbeiten

mit SVG gilt.mit SVG gilt.

Genau wie XML ist SVG auch „open source“ bzw. patentfrei. Jede der im W3C beteiligten Firmen kann Genau wie XML ist SVG auch „open source“ bzw. patentfrei. Jede der im W3C beteiligten Firmen kann

daher an der Weiterentwicklung von SVG mitarbeiten und Anwendungen oder Werkzeuge für die Arbeitdaher an der Weiterentwicklung von SVG mitarbeiten und Anwendungen oder Werkzeuge für die Arbeit

mit SVG erstellen.mit SVG erstellen.

Ein weiteres Prinzip von SVG ist, dass es kein Binärformat ist. Grafiken, die in SVG erstellt worden sind, Ein weiteres Prinzip von SVG ist, dass es kein Binärformat ist. Grafiken, die in SVG erstellt worden sind,

liegen weiterhin im XML-Format, also als „Textdatei“, vor. Beim Betrachten einer SVG-Datei besteht auch liegen weiterhin im XML-Format, also als „Textdatei“, vor. Beim Betrachten einer SVG-Datei besteht auch

die Möglichkeit sich den Quelltext anzeigen zu lassen, in dem tatsächlich jede Anweisung nachlesbar ist.die Möglichkeit sich den Quelltext anzeigen zu lassen, in dem tatsächlich jede Anweisung nachlesbar ist.

Der Vorteil liegt hier hauptsächlich darin, dass es nicht nur von Maschinen, sondern auch von MenschenDer Vorteil liegt hier hauptsächlich darin, dass es nicht nur von Maschinen, sondern auch von Menschen

gelesen werden kann.gelesen werden kann.

Gaab/IAV2 24

Das SVG kein Binärformat ist kann jedoch auch zu unnötig großen Dateien führen. Daher gibt es Das SVG kein Binärformat ist kann jedoch auch zu unnötig großen Dateien führen. Daher gibt es auch bei auch bei

SVG die Möglichkeit der Kompression. Das Erstellen einer „gepackten“ Datei, die dann die Endung SVG die Möglichkeit der Kompression. Das Erstellen einer „gepackten“ Datei, die dann die Endung SVGZ SVGZ

trägt, ermöglicht die maximale Kompression im Bereich von Texten, was ungefähr zwei Dritteln trägt, ermöglicht die maximale Kompression im Bereich von Texten, was ungefähr zwei Dritteln entspricht.entspricht.

SVG bietet auch die Möglichkeit mit Pixelgrafiken umzugehen. Jedoch ist dies nur insofern möglich, SVG bietet auch die Möglichkeit mit Pixelgrafiken umzugehen. Jedoch ist dies nur insofern möglich, dass dass

ähnlich wie in einem HTML-Dokument, eine Pixelgrafik als Bild eingefügt werden kann.ähnlich wie in einem HTML-Dokument, eine Pixelgrafik als Bild eingefügt werden kann.

Die benötigte Werkzeuge für SVGDie benötigte Werkzeuge für SVG

Zum erstellen einer Grafik genügt ein einfacher Editor wie beispielsweise Notepad. Weiterhin gibt Zum erstellen einer Grafik genügt ein einfacher Editor wie beispielsweise Notepad. Weiterhin gibt es auches auch

für SVG einige kostenpflichtige Autorenprogramme. Adobe Illustrator 10 und Corel Draw 11 sind für SVG einige kostenpflichtige Autorenprogramme. Adobe Illustrator 10 und Corel Draw 11 sind hierbei hierbei

wahrscheinlich die bekanntesten, da sie neben vielen anderen Formaten auch die Möglichkeit wahrscheinlich die bekanntesten, da sie neben vielen anderen Formaten auch die Möglichkeit bieten, bieten,

SVG-Grafiken zu erstellen.SVG-Grafiken zu erstellen.

Um sich die damit erstellten Dateien aber anschauen zu können, wird ein Browser Plug-In benötigt. Um sich die damit erstellten Dateien aber anschauen zu können, wird ein Browser Plug-In benötigt.

Adobe liefert mit dem SVG Viewer ein solches Plug-In, welches man kostenlos downloaden kann. ImAdobe liefert mit dem SVG Viewer ein solches Plug-In, welches man kostenlos downloaden kann. Im

Microsoft Internet Explorers (ab Version 5.5) ist dieses Plug-In sogar schon integriert.Microsoft Internet Explorers (ab Version 5.5) ist dieses Plug-In sogar schon integriert.

Gaab/IAV2 25

Animation:Animation:

Um ein wirklich leistungsfähiges Format zu werden, gaben die Entwickler SVG auch die Um ein wirklich leistungsfähiges Format zu werden, gaben die Entwickler SVG auch die Fähigkeit zur Fähigkeit zur

Animation mit auf den Weg. So können Elemente einer SVG-Grafik animiert werden, wenn Animation mit auf den Weg. So können Elemente einer SVG-Grafik animiert werden, wenn ein bestimmtes ein bestimmtes

Ereignis eintritt. So ein Ereignis kann das Laden der Grafik, ein Mausklick oder ähnliches Ereignis eintritt. So ein Ereignis kann das Laden der Grafik, ein Mausklick oder ähnliches sein. Die sein. Die

Animationsfähigkeiten von SVG sind dabei ähnlich wie die von Flash. Man kann Animationsfähigkeiten von SVG sind dabei ähnlich wie die von Flash. Man kann Objekteigenschaften Objekteigenschaften

verändern (Größe, Farbe, Sichtbarkeit), Bewegung entlang von Pfaden erzeugen oder aber verändern (Größe, Farbe, Sichtbarkeit), Bewegung entlang von Pfaden erzeugen oder aber auch Objekte auch Objekte

transformieren.transformieren.

Gaab/IAV2 26

Ganz einfaches Beispiel einer SVG Datei:Ganz einfaches Beispiel einer SVG Datei:

<?xml version="1.0"?><?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN"

"http://www.w3.org/Graphics/SVG/svg-19990706.dtd">"http://www.w3.org/Graphics/SVG/svg-19990706.dtd">

<svg><svg>

<circle style="fill: red; stroke: black" cx="2.5cm" cy="2.5cm" <circle style="fill: red; stroke: black" cx="2.5cm" cy="2.5cm" r=„1.5cm"/>r=„1.5cm"/>

</svg></svg>

Diese Grafik entsteht:Diese Grafik entsteht:

„Das SVG ist Teil einesXML Dokuments“

„Die Grafikanweisungen werdenIn <svg> Tags eingebettet“

Gaab/IAV2 27

Vektorgrafik mit Hilfe von CorelDRAW erstellenVektorgrafik mit Hilfe von CorelDRAW erstellen

Gaab/IAV2 28

Gaab/IAV2 29

Gaab/IAV2 30

Quellen:Quellen:

http://goethe.ira.uka.de/seminare/rftkhttp://goethe.ira.uka.de/seminare/rftk

http://homepages.fhgiessen.de/~hg10013/Lehre/MMS/SS01_WS0102/Farbmodelle/http://homepages.fhgiessen.de/~hg10013/Lehre/MMS/SS01_WS0102/Farbmodelle/index.htmlindex.html

http://www.heise.de/ix/artikel/1996/09/116/http://www.heise.de/ix/artikel/1996/09/116/

http://www.ece.purdue.edu/~ace/jpeg-tut/jpegtut1.htmlhttp://www.ece.purdue.edu/~ace/jpeg-tut/jpegtut1.html

http://goethe.ira.uka.de/seminare/rftk/jpeg/http://goethe.ira.uka.de/seminare/rftk/jpeg/

http://home.earthlink.net/~ritter/tiff/http://home.earthlink.net/~ritter/tiff/

http://www.peliworks.de/design/formatenew/pix_und_vecdruck.htmlhttp://www.peliworks.de/design/formatenew/pix_und_vecdruck.html

http://svg.tutorial.aptico.de/http://svg.tutorial.aptico.de/

http://193.23.168.186/pc_pool/lernmodule/multimediadateien/http://193.23.168.186/pc_pool/lernmodule/multimediadateien/Inhaltsverzeichnis.htmInhaltsverzeichnis.htm

referat multimedia-grafikformate. gaab/iav22 einleitung pixelbasierte grafikformate...

Documents