Warum vektorisierte Buchstaben ihre Löcher verlieren

Eine Punze ist der umschlossene Raum innerhalb eines Buchstabens. Das Loch im O, das Dreieck im A, die Schlaufen in B und g, die Lücke im R. Typografen haben ein Wort dafür, weil es wichtig ist: Ein Buchstabe wird genauso durch seinen Negativraum bestimmt wie durch seine Striche.

In einer Vektordatei muss dieser Negativraum als echtes Fehlen dargestellt werden. Der übliche Mechanismus ist ein zusammengesetzter Pfad: eine Form, die eine andere enthält, und eine Füllregel, die dem Renderer sagt, welche Bereiche gefüllt werden. Richtig gemacht bekommst du ein echtes Loch, und was dahinter liegt, scheint durch.

Viele Auto-Tracer suchen Bereiche ähnlicher Farbe und zeichnen um jeden eine Kontur. Ein schwarzes O auf weißem Hintergrund hat zwei solche Bereiche: den schwarzen Ring und die weiße Scheibe in der Mitte.

Also bekommst du zwei Formen. Einen schwarzen Ring, richtig. Und eine weiße Scheibe, die obendrauf liegt.

Auf einer weißen Seite sind die beiden nicht vom richtigen Ergebnis zu unterscheiden. Die weiße Scheibe verschmilzt mit dem weißen Hintergrund, und dein Auge liest ein Loch.

Es ist kein Loch. Es ist ein weißes Objekt.

Auf farbigem Hintergrund. Leg das Logo auf irgendetwas anderes als Weiß, und die Scheiben erscheinen als blasse Flecken. Diese Variante bemerkt man rechtzeitig, meist etwa vier Minuten vor einer Präsentation.

Auf einer Schneidemaschine. Laser und Messer interessiert die Farbe nicht. Sie sehen zwei geschlossene Pfade und schneiden beide. Der Ring wird geschnitten, die Scheibe wird geschnitten, und die Scheibe ist jetzt ein loses Stück Material auf deinem Bett. Manchmal ist das gewollt. Oft heißt es, dass die Mitte deines O weg ist.

Im Browser oder Viewer: Leg das SVG auf ein farbiges Rechteck. Wechseln die Punzen mit dem Hintergrund die Farbe, sind es echte Löcher. Bleiben sie weiß, sind es Objekte.

Im Editor: Klick ins Innere eines Buchstabens. Wird nichts ausgewählt, ist das Loch ein Loch. Wird eine Form ausgewählt, nicht.

Im Code: Öffne das SVG in einem Texteditor. Eine richtig aufgebaute Punze ist ein <path>, dessen d-Attribut beide Konturen enthält, und den Rest erledigt die Füllregel. Zwei getrennte <path>-Elemente mit unterschiedlichen Füllungen sind die kaputte Version. Beachte, dass zwei Unterpfade allein noch kein Loch garantieren: Mit fill-rule="evenodd" wechseln verschachtelte Konturen zwischen gefüllt und leer, mit nonzero entscheidet die Richtung, in der jede Kontur gezeichnet ist.

Boolesche Subtraktion. Wähl die äußere und die innere Form aus und zieh die eine von der anderen ab. In Figma findest du das unter den booleschen Operationen, in Inkscape unter Path › Difference, in Illustrator unter Pathfinder › Minus Front. Das ist der zuverlässigste Weg.

Den zusammengesetzten Pfad neu bauen. Macht die Subtraktion Ärger, vereinige äußere und innere Kontur zu einem einzigen Pfad (in Inkscape Path › Combine, in Illustrator Object › Compound Path › Make) und prüf dann die Füllregel. Mit evenodd wechseln verschachtelte Konturen zwischen gefüllt und leer. Mit nonzero zählt die Richtung der Konturen, und die innere Kontur umzudrehen löst oft einen hartnäckigen Fall. Teste auf farbigem Hintergrund und prüf die exportierte Datei, statt der Vorschau des Editors zu vertrauen.

Probier eine transparente Vorlage. Hat dein Original einen transparenten statt eines weißen Hintergrunds, erzeugen manche Tracer die Löcher gleich richtig, weil es keinen weißen Bereich gibt, um den sie eine Kontur zeichnen. Das hängt vom Tool und seinem Umgang mit Transparenz ab, sieh es also als Versuch wert, nicht als garantierte Lösung.

Das sollte man sagen: Eine weiß gefüllte Punze ist nicht immer ein Fehler. Erscheint das Logo immer nur auf Weiß, gedruckt auf weißem Papier, und wird nichts geschnitten, funktioniert die Datei. Das ist kein Zeichen für ein kaputtes Tool.

Zum Problem wird es, sobald die Datei diesen Rahmen verlässt, und Dateien verlassen ihren Rahmen immer. Die Version, die du an die Druckerei geschickt hast, ist die Version, die jemand später auf eine dunkelblaue Folie legt.

Leg es auf drei Hintergründe: Weiß, einen Mittelton und Schwarz. Zehn Sekunden, und du findest jede Punze in der Datei.

Schneidest du Buchstaben als ein Stück, denk daran, dass echte Punzen Stege brauchen. Die Mitte eines O hat keinen Halt mehr, sobald das Loch geschnitten ist. Setz kleine Stege zum Ring oder plane zwei Teile ein. Die Anleitung zum Laserschneiden geht die übrigen Prüfungen vor dem Schneiden durch.

Tracer ist für SVG kostenlos, und der Hintergrundtest dauert kürzer, als diesen Absatz zu lesen.