Vektoren und Bilder

Im Gegensatz zu Pixelbildern besitzt ein Vektorbild keine Pixel, sondern Punkte in einem Koordinatensystem, die eben durch Vektoren verbunden sind. Weist man zum Beispiel dem Vektor eine Farbe zu, entsteht eine Linie. Am Bildschirm sieht man keinen Unterschied zu einer Pixelgraphik. Allerdings ist die Vektorgraphik in der Größe skalierbar, ohne dass die Qualität der Graphik leidet. Das macht die Graphik flexibler.

Scalable Vector Graphics - SVG

SVG ist ein Format zum Beschreiben von Vektorgraphiken. Man tippt dazu die Eigenschaften einfach in eine Datei. Dazu braucht man fundierte Kenntnisse und Zeit. Oder man benutzt ein kommerzielles Programm. Diese sind aber meist recht teuer.

Allerdings benötigen noch alle Browser ein Plug-In, um die SVG-Graphiken anzuzeigen.

Ein kleines Beispiel soll hier aber für das Grundverständnis dieser Technik gezeigt sein. Hier der Code des <SVG>-Abschnitts::

Das Ergebnis ist folgende Graphik:

Sie sehen, dass der Code 2 Kreise und eine Ellipse erzeugt, die bestimmte Eigenschaften haben. Mit cx und cy wird zum Beispiel die Position des Kreismittelpunktes definiert, r gibt den Radius an, mit fill="yellow" wird die Füllfarbe angegeben usw.

Interessant ist, dass die Graphik ganze 429 Byte groß ist, obwohl sie in der Größe von 400 x 200 Pixeln angezeigt wird. Eine BMP-Graphik mit 24 Bit Farbtiefe wäre da schon um die 240 KB groß - ein enormer Unterschied.

Beispiel zum Skalieren

Bei den vier Linux-Pinguinen handelt es sich jeweils um dasselbe Bild, nur die Größenangabe unterscheidet sich. Falls in Ihrem Browser ein entsprechendes Plug-In installiert ist, können Sie die Graphiken auch verkleinern oder vergrößern. Die Qualität leidet dabei nicht.

Weitere, auch animierte Beispiele, finden Sie im Internet. Hier zwei Adressen:

SVG-Showroom bei aptico.de (aktiviertes Javascript nötig)

Umfangreiche Beispielsammlung unter www.dahtenverdrahten.de

Vor- und Nachteile

Die Vorteile liegen auf der Hand: kleine und flexible Dateien, auch mit Animationen, falls sich der Inhalt der Datei mit Vektoren beschreiben lässt.

Ein Nachteil ist die immer noch notwendige Einbindung von Plug-Ins in die Browser, um diese Graphiken anzeigen zu können. Auch ist der Aufbau für Laien recht kompliziert und Programme, die die Arbeit erleichtern, sind weniger intuitiv zu benutzen als "Pixelprogramme". Des Weiteren ist dieses Format für Fotos praktisch ungeeignet - das San-Francisco-Bild ist im SVG-Format etwa 750 KB groß, in guter JPG-Qualität dagegen nur 12 KB.