© besjunior, 123RF

Grafiken, die sich in jeder Größe darstellen und drucken lassen und dabei auch noch lebensecht wirken, sind nicht leicht zu erzeugen. Die Wissenschaft forscht an Techniken, die Hersteller von Grafiksoftware und Browsern erst noch implementieren müssen.

Das hat wohl jeder schon beobachtet: Man zoomt in einen Text im Browser, im PDF-Viewer oder in einer Textverarbeitung – und die Buchstaben bleiben so scharf wie in der Originalgröße. Macht man dasselbe aber mit einem anderen Bild auf derselben Seite, erscheint es oft pixelig und hat zerfranste Kanten. Was verleiht dem Text also diese Eigenschaft, unabhängig von der Auflösung? Könnte man dasselbe auf Grafiken im Allgemeinen übertragen?

Die kurze Erklärung für das Phänomen lautet: Es gibt zwei Typen von Grafiken – Rastergrafik und Vektorgrafik. Erstere besteht aus rechteckigen Gittern farbiger Punkte, genannt Pixel. Zoomt man in so ein Rasterbild, erscheint es entweder klötzchenhaft oder merkwürdig verschwommen, was daran liegt, dass ein Interpolationsalgorithmus versucht hat, für die vergrößerte Version neue Pixel aus benachbarten zu berechnen. Auf der anderen Seite besteht Vektorgrafik aus mathematischen Beschreibungen von Kurven. Diese Beschreibung ist unabhängig von der Auflösung, was bedeutet, dass Vektorgrafiken ohne Qualitätsverlust beliebig skalierbar sind.

In der Tat sind die Zeichen eines Fonts kleine Vektorgrafiken. Wer sich diese Kurven näher ansehen will, kann einen Fonts seiner Wahl aus »/usr/share/fonts/truetype« in Fontforge [1] oder Birdfont [2] betrachten.

Um einen besseren Überblick über Vektorgrafiken im Allgemeinen zu erhalten, lohnt sich die Installation eines darauf spezialisierten Editors, das freie Inkscape [3] ist unter Linux eine gute Wahl. Damit kann der Anwender zum Beispiel einen Stern, einen Kreis und einen Buchstaben aus seinem Lieblingsfont zeichnen, die Füllfarbe ausschalten und für die Umrissfarbe ein dunkles Grau wählen. Dann markiert er alle Elemente und wählt den Menüpunkt »Pfad | Objekt in Pfad umwandeln« und schaltet danach in den Edit-Modus ([F2]). Nun sollte es ungefähr aussehen wie in Abbildung 1.

Abbildung 1: In Pfade verwandelte Objekte.

Die kleinen Quadrate (auch Knoten genannt) und die runden Anfasser sind alles, was es braucht, um diese zusammengesetzten Kurven zu beschreiben. Ein einzelnes Kurvensegment besteht aus Zweierlei: Einem Knoten an jedem Ende und einem Anfasser an jedem Knoten, der die Tangente (sprich: Richtung) der Kurve an diesem Punkt definiert.

Diese Kurven sind als (kubische) Bézierkurven bekannt und wurden in der französischen Autoindustrie in den 60er Jahren durch Paul de Casteljau und Pierre Bézier entdeckt, die für Citroën beziehungsweise Renault arbeiteten. Sie sind die Grundbausteine von Vektorgrafiken, und es überrascht nicht, dass sie im Editor ein eigenes Werkzeug haben. (In Inkscape drückt man dafür [B] und klickt auf den Canvas, um eine neue Bézierkurve aufzuziehen.)

Wenn eine Kurve aus mehreren Segmenten besteht, dann hat sie normalerweise an beiden Enden Anfasser. Wenn ein Knoten und seine beiden Anfasser in einer Linie liegen, ist die Verbindung zwischen den beiden involvierten Segmenten glatt (tangential stetig in der Sprache der Mathematik), was im Design oft erwünscht ist. Die meisten Knoten im obigen Beispiel sind in diesem Sinne glatt, außer ein paar Knoten in dem Buchstaben S aus dem Font Libertine, die scharf sind.

Bézierkurven ermöglichen den Entwurf komplizierter 2-D-Umrisse. Das kann entweder manuell oder automatisch geschehen. Inkscape kennt für Letzteres das Kommando »Pfad | Bitmap nachzeichnen«. Die Umrisse lassen sich mit einer einzelnen Farbe füllen, aber das wirkt nicht sehr lebensecht. Näher kommt man da schon mit einem linearen oder radialen Farbverlauf (Gradienten) als Füllung, obwohl auch das noch begrenzt ist. Eine Idee, diese Beschränkung zu überwinden, besteht in der Verwendung eines rechteckigen Netzes aus vier Bézierkurven. Ein 2×2-Netz soll für den Anfang reichen (Abbildung 2).

Abbildung 2: Ein 2×2-Netzwerk aus Bézierkurven.

Die Kurven lassen sich frei bewegen, wobei zu beachten ist, dass die Knoten an Schnittpunkten der Kurve mit jedem Segment verbunden sind – etwas, das sich mit Inkscape momentan noch nicht bewerkstelligen lässt.

Schaut man zum Beispiel auf den zentralen Knoten, so ist der mit vier Kurvensegmenten verbunden. Mit anderen Worten: Er ist ein Eckpunkt von vier Zellen. Nun soll jeder Knoten eine Farbe zugewiesen bekommen (Abbildung 3).

Abbildung 3: Farblich markierte Knoten in einem Bézier-Netz.

Schlussendlich will der Designer die Farben über das Innere der Zellen interpolieren. Dafür gibt es mehrere Möglichkeiten: Eine ist die kubische Interpolation, die auch die Bézierkurven verwenden, sie sorgt für einen glatten Farbverlauf (Abbildung 4).

Abbildung 4: Ein einfaches Gradient Mesh, das sich weiter verfeinern lässt.

Dieses Konzept nennt sich Gradient Mesh. Es gelangte als Feature in Adobe Illustrator, nachdem es bereits in Postscript 3 Eingang gefunden hatte. Kurze Zeit später tauchte es in Corel Draw auf, und heute ist es auch in Inkscape implementiert. Es ermöglicht voll skalierbare, lebensechte Grafiken.

Wer das Gradient-Mesh-Tool in den genannten Editoren verwendet, stößt mit der Zeit jedoch auf eine Reihe von Unzulänglichkeiten. Eine besteht darin, dass der Anwender mehr Details nur dadurch erreichen kann, dass er mehr Zellen verwendet. Weil es sich aber immer um ein rechteckiges Netz handelt, braucht er jedes Mal eine ganze neue Zeile oder Spalte.

Dadurch füllen bald viele unnötige Zellen den Arbeitsbereich und verlängern die Rechenzeit. Viel besser wäre es, ließen sich nur lokal mehr Zellen erzeugen – das bedingt aber eine komplexere Datenstruktur. Die Abbildungen 5 und 6 verdeutlichen die traditionelle und die ausgeklügeltere Methode zur Verfeinerung eines Gradient Mesh.

Abbildung 5: Die traditionelle Methode, das 2×2-Gardient-Mesh zu verfeinern.

Abbildung 6: Eine bessere Methode mit nur lokal ergänzten Zellen zur Verfeinerung.

Eine zweite Unzulänglichkeit entsteht durch die Rechteckform des Netzes selber. Ein beliebiges Objekt als deformiertes Rechteck aus Kurven zu modellieren ist alles andere als intuitiv. Zwar lassen sich mehrere Gradient Meshes übereinander anordnen, um diese Kalamität zu lindern, aber benutzerfreundlich ist das nicht. Würde man die Rechteckform ganz aufgeben, hätte man eine viel größere Freiheit. Allerdings wären Farbverläufe in einem solchen, freieren Setting eine mathematische Herausforderung, aber sie sind machbar.

Ein drittes Hindernis ist die Zuweisung scharfer Farbübergänge, was eine kleinere Änderung der Datenstruktur erzwingt. Die beiden Illustrationen in Abbildung 7 verdeutlichen das Ergebnis mit allen drei Verbesserungen.

Abbildung 7: Lokal verfeinertes Gradient Mesh einer Pflaume und der darauf basierende Farbverlauf.

Heutige Vektorgrafik-Editoren erlauben nur die traditionellen Möglichkeiten der Verfeinerung von Gradient Meshes, was sich aber hoffentlich bald ändern wird. Das Beispiel in der Abbildung 7 ist mit einer eigenen Software des Autors entstanden, die er als Teil seiner Doktorarbeit programmiert hat. Trotz allem gibt es eine ganze Reihe sehenswerter künstlerischer Abbildungen, die unter Zuhilfenahme von Gradient Meshes erzeugt wurden. Beispiele finden sich etwa unter [4]. Sie zeigen, wie realistisch die Bilder aussehen können.

So wie Umrisse automatisch in Kurven verwandelt werden können, lassen sich durch externe Tools auch Rastergrafiken automatisch in Gradient Meshes vektorisieren. Das macht es möglich, vektorisierte Versionen bereits existierender Bilder zu erzeugen, die dann ohne Qualitätseinbußen in jeder Größe anzeigbar und druckbar sind.

Ein zusätzlicher Vorteil dabei ist, dass die Vektordarstellung viel kleiner ist als die Rasterdarstellung des gleichen mittelgroßen bis großen Bildes. Mit anderen Worten taugt die Vektorisierung auch als Kompressionsmethode.

Neben den Gradient Meshes gibt es eine zweite Methode, die zum selben Ziel führen soll. Sie nennt sich Diffusion Curves und funktioniert so: Die Umrisse und inneren Details werden wie gehabt als Bézierkurven dargestellt. Danach lässt sich jeder Kurve ein Farbverlauf zuweisen. Diese Farbverläufe diffundieren dann in das Innere und erzeugen weiche Verläufe.

Zusätzlich lassen sich Farbpunkte einfügen, deren Farbe ebenfalls in ihre Umgebung diffundiert. Das ist näher an der Arbeitsweise eines Künstlers und intuitiver als die Gradient Meshes. Doch obwohl es diese Technik bereits seit rund zehn Jahren gibt, hat Adobe sie erst kürzlich unter dem Namen Freeform Gradient in Illustrator implementiert. Beispiele präsentiert beispielsweise Youtube.

Um zum Ausgangspunkt zurückzukehren: Bedeutet das, dass die Skalierbarkeit von Text nun für Bilder aller Art erreicht ist? Das hängt vom Bild ab. Alles lässt sich vektorisieren. Aber ein Bild mit vielen Details endet in einem Gradient Mesh mit sehr vielen Zellen. Auch die Vektorisierung mit Diffusion Curves ist möglich, leidet aber unter ähnlichen Problemen. In der akademischen Welt ist das ein Feld aktiver Forschung, sowohl mit Blick auf die manuelle Erstellung solcher Grafiken als auch mit Blick auf die automatische Vektorisierung.

Letztendlich brauchen skalierbare, natürlich wirkende Grafiken offene Standards wie SVG, um zum Allgemeingut zu werden. Ein Vorschlag, Gradient Meshes in SVG aufzunehmen, ist seit einer Weile bekannt, aber die Akzeptanz hängt hauptsächlich von der Unterstützung der Browserhersteller ab. Überraschenderweise scheinen die wenig Interesse daran zu haben, etwas so Revolutionäres in den Standard zu integrieren.

Für den Autor war das eine Motivation, um diesen Artikel zu schreiben, damit diese Technik und die beeindruckenden Bilder, die sie erzeugt, eine größere Unterstützung finden mögen.