Warum SVG-Löcher gefüllt werden und wie du sie reparierst

Ein SVG-Loch wird gefüllt, wenn Datei oder Ziel die innere Kontur nicht mehr als außerhalb der gefüllten Form behandeln. Übliche Ursachen sind ein aufgelöster zusammengesetzter Pfad, eine als separates gefülltes Objekt gespeicherte Innenkontur, eine geänderte Füllregel oder Pfadrichtung, ein Importer, der die Beziehung verliert, oder eine Rasternachzeichnung, die die Öffnung schon vor der SVG-Erstellung geschlossen hat.

Öffne die SVG zuerst in einem Browser. Ist das Loch dort bereits gefüllt, repariere die Datei. Sieht sie im Browser richtig aus, aber eine andere Anwendung füllt das Loch, liegt der Fehler wahrscheinlich beim Import.

Finde zuerst heraus, wo das Loch verschwunden ist

Nutze zwei Renderer, bevor du die Geometrie änderst:

1. Speichere ein Duplikat der SVG.
2. Öffne das Duplikat direkt in Chrome, Safari, Firefox oder einem anderen Browser.
3. Platziere es sowohl über einem hellen als auch einem dunklen Hintergrund.
4. Öffne dieselbe Datei in der Zielanwendung.
5. Vergleiche genau das Loch, nicht nur die Gesamtsilhouette.

Dieser Vergleich trennt eine fehlerhafte SVG von einem zielspezifischen Importproblem. Er verhindert außerdem, dass zufällige Pfadoperationen eine vor dem Import korrekte Datei beschädigen.

Eine weiße Form ist kein Loch

Ein echtes Loch zeigt alles, was hinter der SVG liegt. Eine weiße Form wirkt nur auf einer weißen Zeichenfläche leer. Für Grafik in einer Weboberfläche zeigt die Anleitung zu SVG pointer-events, wie ein Loch, eine bemalte Fläche und ein separates Klickziel auf Klicks reagieren.

Füge zum Testen ein vorübergehendes dunkles Rechteck hinter der Grafik hinzu. Bleibt das vermeintliche Loch weiß, wähle dieses innere Objekt aus. Du kannst es als bewusstes weißes Designelement behalten, solltest aber nicht erwarten, dass ein Plotter, Gravurwerkzeug, Browser-Overlay oder 3D-Importer es als Leerraum interpretiert.

Nutze für eine transparente Öffnung einen zusammengesetzten Pfad oder subtrahiere die innere Form von der äußeren. Auch eine Maske kann Transparenz erzeugen, aber viele Produktionsanwendungen verarbeiten einfache Pfadgeometrie zuverlässiger als Masken. Probiere für einen skriptgesteuerten Workflow das Ausschneiden und Verbinden importierter Pfade mit Paper.js und öffne dann die exportierte SVG erneut, um die Öffnung zu prüfen.

Bei Gobo-Grafik bleibt selbst bei einer korrekten transparenten Öffnung eine separate Materialentscheidung. Der Vergleich von Stahl- und Glas-Gobos verfolgt denselben Buchstaben O durch ein Stahlsteg-Layout und ein glasgetragenes Design und erklärt, warum die Umkehrung projizierter heller und dunkler Flächen verändert, was verbunden bleiben muss.

Zusammengesetzte Pfade tragen die Lochbeziehung

Ein Buchstabe O, ein Ring und ein Logo mit ausgestanzter Mitte nutzen oft ein Pfadelement mit mehreren geschlossenen Unterpfaden. Die Außenkontur definiert die Silhouette; ein eingeschlossener Unterpfad definiert den Innenraum oder die Aussparung. Das SVG-Pfadmodell erlaubt mehrere Unterpfade innerhalb eines Pfads.

Deshalb sind Ungroup, Break Apart und Release Compound Path nicht austauschbar. Das Auflösen des zusammengesetzten Pfads kann die Innenkontur in ein gewöhnliches gefülltes Objekt verwandeln. Die Geometrie ist noch vorhanden, aber ihre Beziehung zur Außenkontur ist verloren.

Stelle sie in einem Duplikat wieder her:

1. Wähle die Außengrenze und nur die Konturen aus, die Löcher sein sollen.
2. Nutze Make Compound Path, Combine oder den entsprechenden Befehl.
3. Weise dem entstandenen Objekt eine Füllung zu.
4. Prüfe die Füllregel.
5. Öffne die gespeicherte SVG erneut im Browser und in der Zielanwendung.

Adobes aktuelle Dokumentation zu zusammengesetzten Pfaden verwendet dasselbe Modell: Teilpfade bestimmen gefüllte und transparente Flächen über eine Füllregel.

Stelle die Beziehung wieder her, nicht nur das Aussehen

Prüfe für Stempelgrafik erhabene gegenüber vertiefter Geometrie für Keramikstempel, bevor du entscheidest, welche Flächen gefüllt bleiben sollen.

Prüfe nonzero gegenüber evenodd

SVG hat zwei Füllregeln. Die SVG-2-Spezifikation zur Darstellung legt nonzero als Anfangswert fest und definiert evenodd als andere Option.

• nonzero nutzt vorzeichenbehaftete Pfadkreuzungen. Eine Innenkontur mit falscher Richtung kann zur Füllung beitragen, statt sie aufzuheben.
• evenodd zählt Kreuzungen. Ein zweimal eingeschlossener Punkt liegt außerhalb; eine einfache verschachtelte Kontur wird daher unabhängig von der Konturrichtung zum Loch.

Dieser minimale Pfad enthält zwei Rechtecke mit gleicher Richtung. Mit evenodd bleibt die Mitte transparent:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Ein Wechsel der Regel hilft, wenn sie zum Design passt, ist aber keine universelle Reparatur. Beide Konturen müssen weiterhin als Unterpfade derselben Form ausgewertet werden. fill-rule="evenodd" auf zwei unabhängigen Objekten macht nicht eines zu einer Aussparung im anderen.

Wenn du nonzero behältst, kehre nur die Innenkontur um, sofern dein Editor diesen Befehl bietet. Illustrator stellt beide Füllregeln und eine Steuerung der Pfadrichtung für zusammengesetzte Pfade bereit. Speichere vor jeder Umkehr eine Kopie, da Selbstüberschneidungen und mehrere verschachtelte Innenräume ein anderes Ergebnis als ein einfacher Ring erzeugen können.

Wenn die SVG stimmt, der Importer aber nicht

Manche Schneide-, CAD-, 3D- und Animationswerkzeuge unterstützen nur eine praktische SVG-Teilmenge. Ein Browser kann den zusammengesetzten Pfad korrekt rendern, während das Ziel jede Kontur als massives Objekt importiert.

Nutze diese Reparaturreihenfolge:

1. Speichere eine vereinfachte Kopie aus dem Quelleditor.
2. Wandle bearbeitbaren Text in dieser Kopie in Pfade um, wenn der Textimport die Schwachstelle ist.
3. Ersetze Masken, Beschneidungen und Erscheinungsbildeffekte nur wo nötig durch einfache Pfadgeometrie.
4. Halte jedes gewünschte Loch mit seiner Außenkontur in einem zusammengesetzten Pfad zusammen.
5. Teste evenodd und nonzero bewusst, statt wiederholt hin und her zu wechseln.
6. Wenn der Importer die Öffnung weiterhin füllt, importiere beide Grenzen und subtrahiere das Innenprofil im Ziel.

Für einen Extrusionsworkflow muss das Ziel außerdem ein auswählbares geschlossenes Profil erkennen. Die SVG-Extrusionsdiagnose behandelt offene Endpunkte, Duplikate und Profilgültigkeit, nachdem das Loch erhalten bleibt.

Wenn das Nachzeichnen die Öffnung geschlossen hat

Ein Nachzeichner kann den Innenraum eines kleinen Buchstabens schließen oder eine schmale Lücke verbinden, wenn die Rasterquelle winzig, unscharf oder kontrastarm ist. Das ist ein Geometrieproblem, kein Füllregelproblem: Die Innengrenze ist nie in die SVG gelangt.

Kehre zur Rasterquelle zurück und:

• vergrößere oder erfasse sie erneut, ohne Unschärfe hinzuzufügen;
• vergrößere die Abstände rund um die wichtige Öffnung;
• entferne Kompressionsstörungen nahe der Lücke;
• reduziere Glättung oder Farbzusammenführung, wenn das Werkzeug diese Einstellungen bietet;
• vergleiche die neue Nachzeichnung in der endgültigen Ausgabegröße.

Hier kann PerfectVector helfen. Nutze den Bild-zu-Vektor-Workflow, wenn du das Rasteroriginal hast und eine neue SVG-Nachzeichnung brauchst. Prüfe vor dem Download jeden Innenraum und Negativraum. War die SVG korrekt, bis ein Editor ihre zusammengesetzten Pfade aufgelöst hat, repariere stattdessen diese SVG; erneutes Nachzeichnen stellt den verlorenen Bearbeitungsverlauf nicht wieder her.

Derselbe Ansatz, zuerst die Quelle zu prüfen, hilft bei Schrift. Die Vektoranleitung für Handlettering zeigt, wie du kleine Innenräume offen hältst, ohne der ganzen Zeichnung ihren Charakter zu nehmen.

Eine sichere Abschlussprüfung

Bevor du die reparierte SVG weitergibst:

• betrachte sie auf hellen, dunklen und transparenten Hintergründen;
• wähle das Ziel aus und bestätige, dass es ein beabsichtigter zusammengesetzter Pfad ist;
• prüfe die Füllregel im Editor oder SVG-Quelltext;
• kontrolliere jeden Buchstabeninnenraum, Ring und eingeschlossenen Negativraum;
• öffne die exportierte Datei erneut, statt der ungespeicherten Zeichenfläche zu vertrauen;
• teste die exakte Zielanwendung;
• halte bearbeitbare Quelle und vereinfachte Übergabekopie getrennt.

Wenn sich das Objekt jetzt als eine Auswahl verhält, kann das richtig sein. Ein zusammengesetzter Pfad ist absichtlich ein Objekt. Nutze die Anleitung zum Aufheben von SVG-Gruppierungen, bevor du ihn erneut zerlegst.

FAQ

Warum wurden die Löcher nach Break Apart gefüllt? Break Apart hat die Innenkonturen vom äußeren zusammengesetzten Pfad getrennt. Die früheren Löcher wurden gewöhnliche gefüllte Objekte. Mache den Befehl rückgängig oder kombiniere jede Außenkontur erneut mit den richtigen Innenkonturen und prüfe dann die Füllregel.

Sollte ich fill-rule="evenodd" für SVG-Löcher verwenden? evenodd ist für verschachtelte Konturen oft praktisch, weil die Konturrichtung das Ergebnis nicht bestimmt. Es wirkt weiterhin innerhalb einer Form; es subtrahiert kein separates Objekt. Behalte nonzero, wenn Quelle und Ziel die gewünschten Konturrichtungen erhalten.

Warum sieht die SVG im Browser richtig aus, in meiner App aber massiv? Der Zielimporter erhält möglicherweise den zusammengesetzten Pfad, die Füllregel, Maske oder Konturrichtung nicht. Vereinfache eine Kopie zu einfachen Pfaden und teste erneut. Importiere bei Bedarf Außen- und Innengrenzen und subtrahiere das Loch im Ziel.

Kann ich ein Loch erstellen, indem ich eine weiße Form darüberlege? Das täuscht nur auf weißem Hintergrund ein Loch vor. Das weiße Objekt bleibt gefüllt und kann daher als weiteres massives Objekt gedruckt, geschnitten oder importiert werden. Nutze einen zusammengesetzten Pfad, Subtraktion oder eine andere Transparenzstruktur, wenn der Hintergrund durchscheinen muss.

Kann PerfectVector gefüllte Löcher einer bestehenden SVG reparieren? PerfectVector hilft, wenn du zu einer geeigneten Rasterquelle zurückkehren und eine neue Nachzeichnung mit sichtbaren gewünschten Öffnungen erstellen kannst. Es repariert keinen zusammengesetzten Pfad, den ein Editor aufgelöst oder ein Importer ignoriert hat. Korrigiere diese Beziehungen im Vektoreditor oder in der Zielanwendung.

Quellen

1. W3C — SVG-2-Darstellung — Definiert nonzero, evenodd und den Anfangswert der Füllregel.
2. W3C — SVG-Pfade — Definiert Pfade, Unterpfade und geschlossene Pfadgeometrie.
3. Adobe Illustrator — Zusammengesetzte Pfade erstellen — Dokumentiert zusammengesetzte Löcher, Füllregeln und das Umkehren der Richtung einzelner Teilpfade.
4. PerfectVector — Bild zu Vektor — Aktueller Raster-zu-SVG-Workflow für den bedingten Fall des erneuten Nachzeichnens.

Wenn die Öffnung beim Rasternachzeichnen verloren ging, erstelle einen neuen Vektor aus der sauberen Quelle und prüfe jeden Innenraum vor der Übergabe. Wenn die Browserversion bereits korrekt ist, behalte diese Geometrie und repariere nur den fehlerhaften Import.