Nach längerer Pause führe ich nun die Artikelserie zu Vektorgrafiken mit der wichtigen Konvertierung zwischen den beiden Grafiktypen fort. Die Umrechnung von Vektorgrafik zu Pixelgrafik – dem Rendering (engl. Darstellung) ist ja nicht besonders spannend und wurde auch schon im ersten Teil angesprochen, es passiert ständig (beispielsweise sind fast alle Schriften Vektorgrafiken) und wird von diversen Grafikbibliotheken und den grafischen Betriebssystemkomponenten vollbracht. Zwar sind diese Berechnungen auch nicht uninteressant, aber viel spannender ist der umgekehrte Weg, dem Tracing (engl. Verfolgen): Wie kann von einem Rasterbild auf eine Vektorgrafik umgerechnet werden? Dies macht bei komplexen Rastergrafiken wie Fotos nur begrenzt Sinn – mehr dazu im nächsten Teil oder hier-, sondern von Computer-Grafiken. Wer sich jetzt denkt “Warum eine Rastergrafik vektorisieren, wenn doch auch die Rastergrafik an sich verwendet werden kann?” sei angemerkt: Wegen des unheimlich großen Vorteils des Skalierens und der einfachen Bearbeitbarkeit! Wenn Grafiken nur in kleinen Auflösungen verfügbar sind, ist es so möglich sie auf eine beliebige Größe zu skalieren oder eben auf diese einfache Weise zu korrigieren. Ich selbst nutze dieses Verfahren äußerst gerne. Nun, wie funktioniert das Vektorisieren? Grundlage aller Verfahren ist die Erkennung von Kanten, also Helligkeitsunterschieden. Je nach verwendetem Verfahren, erhält man ein grundlegend anderes Ergebnis. Zusätzlich können die Verfahren leicht variiert werden, sodass es schlussendlich viele Möglichkeiten für den Grafiker gibt. Welches Verfahren und welche Parameter die besten sind, hängt natürlich vom Bild und vom gewünschten Ziel ab. Ich werde, wie auch früher, die Methoden, die von Inkscape unterstützt werden, besprechen.
Potrace
Inkscape verwendet intern das Programm potrace, für das es auch andere graphische Oberflächen gibt, und somit auch außerhalb von Inkscape anzutreffen ist. Das zu Grunde liegende Verfahren ist einfach: Eine Rastergrafik wird nach Konturen durchsucht, welche schließlich zu Pfaden verarbeitet werden. Das klingt erstmals recht einfach, ist aber alles andere als trivial. Ich möchte euch zwar nicht mit den Algorithmen quälen, aber ich möchte die Arbeitsweise des Programms und insbesondere die Bedeutung der Parameter weitergeben! Im Dialog Bitmap vektorisieren (Nur sinnvoll, wenn vorher eine Rastergrafik markiert wurde) ist zunächst der Modus wählbar. Ich werde nicht viel zu den Modi sagen, da sie äußerst intuitiv und offensichtlich sind. Zudem unterscheiden sie sich nur minimal im Verfahren, sondern vielmehr in der Darstellung. Standardmodus, und am öftesten der Sinnvollste, ist Entlang eines Helligkeitswertes. Eine simple S/W-Grafik wird damit so konvertiert, dass sie nachher gleich wie vorher aussieht, d.h. die Pfade sind mit Farbe gefüllt. Mit der Kantenerkennung erhält man die Kanten selbst als Pfade. Weiters ist der Modus Farben bzw. Graustufen, wenn man bspw. die Farben selbst wählt oder ein Graustufenbild gewünscht ist.
Ecken und Kurven
Nun aber zum Konvertieren selbst. Die grundlegende Idee ist, Helligkeitsunterschiede zwischen Bildbereichen als Kanten zu werten, während die Flächen, sowie Farben (vorerst) keine Rolle spielen. Die detektierten Kanten sind dann Grundlage für die Kurven, aus denen Vektorgrafiken bestehen. Die Schwierigkeit liegt darin, zu Erkennen welche Ecken und Kanten Artefakte des Renderns sind und wie viele Ecken für die Kurven optimal sind um dem gewollten Ergebnis zu entsprechen.
Ecken-Erkennung: (a) originale Rastergrafik; (b) zu viele Ecken; (c) zu wenige Ecken; (d) gute Kantenerkennung
Diese Grafik – welche der technischen Dokumentation von Potrace entliehen ist – zeigt wie fundamental diese Überlegungen sind. Alle Kanten in Rastergrafiken, welche nicht genau waagrecht oder senkrecht sind, entblößen die fatalen Nebenwirkungen dieser beim Vergrößern. Der Tracingalgorithmus muss nun entscheiden können, welche Kurve am plausibelsten ist und welche Ecken gewollt sind.
Ein Detail des Siegels der Stanford-Universität; rechts das original eingescannte Bild; die Ausgabe von Autotrace in der Mitte (zeigt deutliche Schwächen); die Ausgabe von Potrace rechts
Pfade
Angenommen der Raster der Grafik wird so verschoben, dass die Ecken (und nicht die Zentren) der Pixel ganzzahlige Koordinaten haben. Nun werden Pfade erstellt, die die Vorgänger der Kurven sind. In der nächsten Grafik ist zu sehen, wie diese Verbindungen/Linien gezeichnet werden: Zwischen den Pixeln.
Pfade werden entlang von Helligkeitsunterschieden gezeichnet.
Wer sich die Grafik angesehen hat, erkennt wahrscheinlich sofort, dass hier schlicht und einfach der schwarze Bereich umrandet wird. Ergebnis dieses Prozesses sind immer geschlossene, eckige Pfade. Der nächste Schritt ist dann das Entrauschen (Flächen unterdrücken), welches auch eine Konfiguration erlaubt. In diesem Schritt werden alle Flächen, welche weniger als eine bestimmte Anzahl an Pixeln enthalten, verworfen. In Inkscape lässt sich dieser Wert im Vektorisierungsdialog in den Optionen einstellen und beträgt üblicherweise 2.
Verfügbare Optionen im Vektorisierungsdialog von Inkscape
Anschließend müssen die Pfade natürlich noch vereinfacht werden, ansonsten würde die Vektorgrafik noch keine Kurven zeigen, sondern eckige Pfade. Es folgt also ein äußerst kompliziertes und mathematisches Verfahren, das natürlich etwas Konfigurierbarkeit bietet.
Gerade Pfade
Zunächst werden alle möglichen geradenPfade gesucht, wie in der nächsten Grafik illustriert ist. Gerade Pfade sind Pfade, welche vom Originalpfad nicht mehr als eine halbe Pixellänge abweichen und nicht Pfade, welche in alle 4 Richtungen gehen vereinfachen (siehe (e)).
Beispiele für gerade und ungerade Pfade. Die gezeigten Punkte sind die Ecken der Pixel. (a), (b) und (d) sind gerade, während (c) und (e) ungerade sind.
Polygone
Sind nun alle möglichen geraden Pfade gesucht, müssen diese zu Polygonen (Vielecken) kombiniert werden – allerdings gibt es dafür meist viele Möglichkeiten. Eine Möglichkeit, das optimale Polygon zu finden, ist die Anzahl der enthaltenen Pfade zu minimieren. Allerdings reicht dies meist nicht, das optimale Polygon zu finden und deshalb wird auch noch die gesamte Abweichung der Polygone von den ursprünglichen Pfaden berechnet und diese ebenfalls minimiert.
Ein optimales (14 Pfade) und nicht-optimales (17 Pfade) Polygon für einen Pfad
Kurven
Im Anschluss werden Bezierkurven aus den noch eckigen Polygonen berechnet. Die Frage, um die es hier geht lautet logischerweise: Wo sind Ecken abzurunden und wo ist es sinnvoll, diese zu belassen? Grundsätzlich generiert Potrace nur Bezierkurven, welche symmetrisch sind. Dadurch geht nicht viel Freiheit verloren, wie man denken könnte, aber vereinfacht die Sache ungemein.
Eckenerkennung und Abrundung
Dieser Schritt kann mit der Option Ecken glättenbeeinflusst werden. Voreingestellt ist der Wert 1, kleinere Werte führen zu mehr Ecken während höhere Werte zu mehr Abrundungen führen (siehe erste Grafik). Bei einem Wert < 0 werden überhaupt keine Kurven erstellt und Werte über 4/3 (1,33..) führen zu durch und durch runden Kurven.
Optimierung
Nach diesem Schritt sind nun bereits viele gerade Pfade sowie abgerundete Kurven vorhanden, wir sind also fast am Ziel, allerdings biete der letzte Schritt der Kurven-Optimierung noch eine Beeinflussung durch den Nutzer. In diesem Schritt wird versucht, mehrere kleiner Segmente durch größere zu ersetzen. Ein Beispiel für eine sinnvolle Optimierung zeigt die folgende Grafik.
Kurvenoptimierung: Ersetzen mehrerer kleinerer Kurven durch Größere
Mit der Option Pfade optimieren(Standard: 0,02) lässt sich die maximale Abweichung der optimierten Kurven von den kürzeren bestimmen. Sind also weniger, aber einfachere größere Kurven gefragt, ist dieser Wert zu erhöhen, und beim Wunsch nach mehr Details zu senken. Abschließend noch ein komplettes Beispiel aus der Dokumentation
(a) originale Rastergrafik; (b) Pfade und optimale Polygone; (c) Abrundung durch Kurven; (d) Kurvenoptimierung; (e) endgültiges Ergebnis
Zum Schluss ein Beispiel
Ausgangsbild ist dieses, welches in der Artikelserie Freisteller vorkam. Ich werde nun daraus eine Vektorgrafik extrahieren, dessen Pfad exakt die Schrift “IM KINO” abdeckt. Im nächsten Teil geht es dann um den Import des Pfads in einem Grafikprogramm und die Verwendung als Pfad dort. Nachdem Inkscape gestartet wurde, muss erst die Bitmap-Datei importiert werden. Dies geschieht entweder per Drag&Drop oder über Datei → Importieren. Daraufhin möchte Inkscape wissen, wie diese Rastergrafik in der SVG-Datei gespeichert werden soll. Entweder wird sie nur verknüpft (also auf den Speicherort verwiesen), oder direkt in die Datei hineingeschrieben. Über Vor- und Nachteile müssen wir uns keine Gedanken machen, denn wir wählen aus Performancegründen Verknüpfen aus, wir löschen das Element ohnehin gleich wieder. Jetzt können wir nach dem Aktivieren des Elements (Linksklick) über Pfad → Bitmap vektorisieren den gewünschten Dialog öffnen lassen. Ein Klick auf Aktualisieren erstellt die Vorschau: Weiße Schrift, Hintergrund schwarz. Also Bild invertierenauswählen und nochmals aktualisieren lassen: Wunderbar! Die Standardeinstellungen (Entlang eines Helligkeitswertes mit 0,45 Schwellwert) funktioniert hier tadellos. Die Artefakte rechts unten werden wir gleich händisch entfernen.
Bitmap vektorisieren: Die Vorschau zeigt genau das gewünschte Ergebnis.
Die Vorschau sollte nur der ungefährer Einschätzung dienen, da leichte Unterschiede zwischen der Vorschau und des tatsächlichen Ergebnisses auftreten können. Ein Klick auf OKführt die Konvertierung durch und wir können das Fenster schließen. Die Pfade sind nun in einer Gruppe zusammengefasst, die wie üblich durch Doppelklick aktiviert wird. Damit wird auch das Werkzeug auf den Knotenanfasser geändert, womit auch ein Bereich markiert werden kann. So lassen sich die Artefakte im rechten unteren Eck entfernen. Übrig bleibt genau der Pfad, der die Schrift des Bildes abdeckt.
Der Schriftzug im Bild wird durch den Pfad exakt und automatisch abgedeckt.
Einen sehr interessanten Anwendungsfall für diese Methode werde ich euch im folgenden Teil der Serie beschreiben. Damit lässt sich unglaublich viel Zeit sparen!
Die Quelle der Bilder, welche den Algorithmus beschreiben, ist die technische Dokumentation (Englisch) des Potrace-Algorithmus, verfügbar auf deren Homepage. Eine Liste weiterer Vektorisierungsprogramme sind in dieser Liste auf Wikipedia zu finden: WP:Grafiksoftware#Vektorisierungsprogramme
Hier kann man ja noch so richtig was lernen. Wenn ich die Fotografie nicht intuitiv aufüben würde und mich mal mehr mit der Technik befassen würde, verstünde ich auch sicherlich ein wenig mehr von dieser Konvertierung. Ein Blick schadet aber nicht und wenn man mal etwas zu einem unbekannten Thema liest macht das auch immer Sinn
LG Nadja
Ich habe Potrace nicht stand-alone installiert (was ich aber hinbekommen würde
), sondern es ist ja fixer Bestandteil von Inkscape. Und Inkscape zu installieren ist bestimmt einfach. (Nicht nur unter Linux, das ich verwende)
Inkscape gibts auf inkscape.org
Ich hasse ja alles, was mit Vektoren zu tun hat
Potrace habe ich vor 1000 Jahren installiert und überhaupt nicht – und trotz Hilfe – zum Laufen gebracht. Ging das bei dir ohne Probleme?
Sabienes