Vektorgrafiken


Grafiken habe ich bisher als normale JPEG- oder PNG-Dateien gespeichert und eingesetzt. Es war immer ein Spagat zwischen Qualität und Dateigröße. Doch Grafiken müssen auf immer mehr Bildschirmgrößen gut aussehen. Hier kommt die Vektorgrafik ins Spiel. Sie ist winzig, verlustfrei skalierbar und sogar animierbar. Ich erklär' das mal.

    17. Mai 2016

Auf Webseiten findet man neben Fotos auch Illustrationen und Icons, Hintergrundgrafiken und Logos. Diese zweite Gruppe von visuellen Elementen definieren das Design, sie schaffen fließende Übergänge, fungieren als Stilmittel und unterstreichen Elemente im Layout wie Überschriften, Absätze und Infoboxen. Im Gegensatz zum Foto sind diese Grafiken sehr viel einfacher aufgebaut. Beim Foto liegen beinahe niemals zwei gleichfarbige Pixel nebeneinander – bei der Illustration hingegen sehr oft. Auf einem Foto erkennt man geometrische Formen und Strukturen – sie werden aber nur angedeutet, da das Foto eine Ablichtung von Landschaft oder Architektur ist. Zeichnet man das Foto aber mit Graphit nach, wird man sich vieler geometrischer Formen bedienen, anstatt einzelne winzige Farbpunkte nebeneinander zu reihen. JPEG z.B. speichert Bildinformationen aber genauso, um das Bild möglichst verlustfrei und originalgetreu anzeigen zu können: Erste Pixelreihe, erster Pixel ist hellblau mit einem minimalen Gelbstich, zweiter Punkt ist hellblau mit einem minimalen Gelbstich, aber ganz bisschen mehr... und so weiter. Bei einem HD-Bild sind das 1080 Reihen mit je 1920 Punkten, die alle eine eigene Farbinformation haben. Wen wundert es also, dass auch die modernsten Kompressionsverfahren es nicht schaffen, ein qualitativ hochwertiges Bild in HD-Auflösung auf unter 300KB zu bringen. Aktuelle Designtrends setzen auf viele aussagekräftige Bilder mit tollen Farben, vielen Bildinformationen für starke Kontraste. Das werden große Bilder, viele große Bilder und dann muss die Dateninfrastruktur erstmal ein paar Megabytes für das Anzeigen einer Startseite durch die Leitung pumpen. Wenn dann noch die verwendeten Illustrationen, das Logo und verschiedene andere grafische Elemente auf die gleiche datenintensive Art und Weise gespeichert und ausgeliefert werden, braucht man von mobiler Erreichbarkeit nicht mehr zu träumen wagen.

Herkömmliche Bildformate

Wenn man etwas zeichnet oder skizziert, dann verzichtet man auf eine Vielzahl von fototypischen Elementen: vor allem auf Farbverläufe und Schatten (die auch nur Farbverläufe sind). Weniger Farbinformationen also. Oft besteht ein Icon auch nur aus einer „Farbe“, nämlich schwarz auf transparentem Hintergrund. Aber auch das Verwenden von nur einer Farbe schafft nur eine kleine Ersparnis des Speicherplatzes. Transparent kann JPEG gar nicht abbilden, weil „unsichtbar“ keine Farbe ist. Ein andres populäres Format, PNG, kann dies und zeichnet Ränder auf transparenten Hintergründen mit weniger werdender Deckkraft, damit eine diagonale Linie oder Kurve, die aus vielen kleinen viereckigen Pixeln besteht, nicht eckig – quasi „pixelig“ – erscheint. Skaliert man ein solches Bild aber, sieht man recht schnell diese Pixel. Diese Darstellungsmethode kaschiert in Originalauflösung zwar die Fehler, unter der Lupe wird das Bild allerdings pixelig, wenn es geschrumpft wird, muss der Computer überflüssige Pixel verbannen und das Bild wird matschig oder verliert Farbinformationen, die aber zur fehlerfreien Darstellung benötigt werden. Die gleichen Fehlerquellen ergeben sich beim Zeichnen von Formen. Hier fallen sie z.B. beim Skalieren eines perfekten Kreises noch viel mehr ins Gewicht. Icons bestehen aber nur aus Formen. Und bei der Vielzahl von Displaygrößen muss man inzwischen Bilder skalieren. Ein Smartphone füllendes Icon ist auf einem hochauflösenden Computerbildschirm oft gerade einmal daumengroß.
Neben der überdimensionierten Dateigröße, aufgrund des kleinteiligen Speicherverfahrens, um auch Fotos unterstützen zu können, fällt die Unflexibilität der Formate ins Gewicht. Man braucht also noch etwas anderes, etwas Schlankes und Einfaches.

Die SVG – der winzige Riese

Die Vektorgrafik („Scalable Vector Graphics“ – SVG) bringt den Computer selbst zum zeichnen. Sie beschreibt Punkte, Linien, Kurven und Formen. Sie definiert die Größe eines Zeichenblattes („Viewport“) und zeichnet im Verhältnis dazu die vordefinierten Kurven und Formen. Ein Kreis z.B. lässt sich durch den Befehl <circle> definieren mit einem dazugehörigen Radius r und dem Mittelpunkt cx|cy <circle cx="150" cy="150" r="150">. Diese Definition ist auf jeden Fall schon einmal erheblich kürzer als eine 300x300 Pixel umfassende Farbtafel. Der eigentlich aber so geniale Clou ist die fehlerfreie Skalierung des Zeichenblattes: Definiert man die Bildgröße desr SVG nun doppelt so groß, bleibt der Viewport, also die Größe des Zeichenblatts, gleich und auch der definierte Radius bleibt im Verhältnis zum Viewport der gleiche. Aber der Computer zeichnet den Kreis aufgrund der doppelten Bildgröße auch doppelt so groß. Wir können also bei gleichbleibender Dateigröße eine Form verlustfrei skalieren. Linien und Kurven lassen sich genauso definieren. Die Definition ist zwar undurchsichtiger, zumindest für mich, aber ich kann beliebige Formen z.B. mit Photoshop vektorisieren. Auch kann ich Formen Style-Informationen mitgeben <circle cx="150" cy="150" r="150" style="fill: red; stroke-width: 3; stroke: black;"> und schon hat man einen roten Kreis mit einer schwarzen Kontur der Stärke 3. Vektorgrafiken sind also skriptbar. Auf der anderen Seite kann man aber auch einfach eine Grafik in Photoshop erstellen und als SVG speichern. Diese SVG lässt sich auf Webseiten als Bild einbinden oder man kopiert den Quelltext der Datei direkt ins HTML und kann mit wenig Kenntnissen Farben oder Linienstärken ändern. Und als letztes i-Tüpfelchen kann man die einzelnen Pfade so auch noch mit CSS-Transitions oder JavaScript adressieren und auf diese Weise animieren. Beispielsweise lässt man sich eine Folge von Formen zeichnen, definiert zuerst, dass sie unsichtbar sind und lässt sie im Skript dann nach einer definierten Zeittafel erscheinen. Das erste Zeichen sofort, das zweite eine halbe Sekunde später und so weiter.

Fazit

SVGs können die herkömmlichen Bildformate nicht bei der Abbildung von Fotos schlagen. Hierfür zahlen sich die einzelnen Pixelinformationen voll aus. Für alles andere, gerade für das Anzeigen von Formen oder Piktogrammen, sind JPEGs und PNGs nicht geeignet. Leider traf mich diese Erkenntnis erst spät, da mich die ‚Zeichnen‘-Komponente in Photoshop abschreckte – völlig zu unrecht und die deutlich kleineren Dateien begeistern mich immer wieder. So kann ich ein erstelltes Logo auf über 3000 Pixel strecken und es hat nur 16KB – und der Skalierung sind theoretisch keine Grenzen gesetzt (praktisch kommt man leider doch recht schnell am Rand des Bildschirms an). Um kleine Details zu verändern oder Farben zu ersetzen, benötige ich keine ‚Freistellen‘-Werkzeuge oder Filter mehr. Ich kann einfach den HEX-Code im Quelltext ändern. Das spart dann sogar hin und wieder etwas Zeit, nachdem die Erstellung einer Vektorgrafik auch nach einiger Erfahrung sehr zeitaufwändig ist. Und die Animierbarkeit mit bereits bekannten Werkzeugen (CSS3 und jQuery) machen Applets und Flash tatsächlich hinfällig. Eine Wohltat für die Endgeräte der Besucher.