SVG-Konturen verschwinden nach dem Export: Ursachen

Wenn eine SVG-Kontur nach dem Export verschwindet, prüfe zuerst, ob die Pfadgeometrie noch vorhanden ist. Eine scheinbar fehlende Linie kann keine Konturfarbe haben, mit dem Hintergrund übereinstimmen, im neuen Maßstab zu dünn sein, außerhalb der viewBox liegen oder am Seitenrand abgeschnitten werden. Sie kann auch einen Pinsel, ein variables Breitenprofil, einen Filter oder eine CSS-Regel verwenden, die die Zielanwendung nicht versteht.

Zeichne die Grafik nicht sofort neu nach und wandle nicht jedes Objekt in Pfade um. Bewahre die bearbeitbare Vorlage auf, erstelle eine Testkopie und grenze das Problem auf eine fehlerhafte Linie ein. Die kleinste Reparatur erhält meist mehr von der ursprünglichen Struktur.

Die schnelle Diagnose

1. Öffne dieselbe SVG in einem aktuellen Browser und einem Vektoreditor.
2. Wähle die fehlende Linie aus und prüfe, ob ihr Pfad und ihre Knoten noch existieren.
3. Gib der Testkopie eine auffällige Konturfarbe, volle Deckkraft und vorübergehend eine breitere Kontur.
4. Verschiebe sie vom Seitenrand weg und deaktiviere Beschneidungen, Masken und Filter einzeln.
5. Entferne Transformationen oder prüfe, wie sie die Konturbreite beeinflussen.
6. Scheitert nur eine Zielanwendung, ersetze die nicht unterstützte Darstellung in einer Ausgabekopie.

Vier Ergebnisse für Konturen

Zuerst prüfen, ob der Pfad noch vorhanden ist

Öffne eine Kopie der SVG in einem Texteditor und suche nach gewöhnlichen Formelementen wie <path>, <line>, <polyline>, <circle> oder <rect>. Wähle dann das fehlende Objekt in einem Vektoreditor aus und wechsle zur Kontur- oder Drahtgitteransicht.

• Sind Knoten und ein Pfad in der Konturansicht sichtbar, ist die Geometrie erhalten. Prüfe Farbe, Beschnitt, Transformationen und die Unterstützung durch die Anwendung.
• Existiert das Objekt, liegen seine Grenzen aber weit außerhalb der Seite, verschiebe es zurück oder korrigiere die viewBox.
• Ist die gewünschte Linie zu einer gefüllten geschlossenen Form geworden, wurde sie möglicherweise bereits in einen Umrisspfad umgewandelt.
• Existiert keine entsprechende Geometrie, prüfe Quelldokument und Exporteinstellungen. Der Exporter hat möglicherweise ein nicht unterstütztes Objekt ausgelassen.

Vergleiche vor der Bearbeitung zwei Renderer. Eine Kontur, die in Chrome sichtbar ist, aber in einem Desktop-Editor fehlt, deutet auf eine Importbeschränkung oder CSS-Abhängigkeit hin. Eine überall fehlende Linie hat eher ungültige Farbeinstellungen, einen Beschnitt, falsche Grenzen oder fehlende Geometrie. Ist das ganze Dokument leer und nicht nur seine Linien, nutze die umfassendere Diagnose für eine leere SVG.

Verschwindet die Kontur speziell in Penpot, nutze die Prüfungen für den SVG-Import in Penpot, um die Übergabe einzugrenzen.

Ursache 1: Die Kontur hat keine sichtbare Farbe

SVG behandelt Füllung und Kontur als getrennte Farbeigenschaften. Ein Pfad kann existieren, ohne eine Linie anzuzeigen. MDNs Anleitung zu Füllungen und Konturen behandelt die grundlegenden Eigenschaften, einschließlich stroke, stroke-width und Deckkraft.

Prüfe beim ausgewählten Objekt und seinen geerbten Stilen:

• stroke="none";
• eine fehlende stroke-Angabe zusammen mit fill="none";
• stroke-width="0" oder eine extrem geringe Breite;
• opacity="0" oder stroke-opacity="0";
• eine Konturfarbe, die mit der Seite oder der umgebenden Form übereinstimmt;
• display="none" oder visibility="hidden" am Objekt oder einer übergeordneten Gruppe;
• eine CSS-Klasse, die Präsentationsattribute überschreibt.

Weise einer Testkopie eine gesättigte Farbe zu, setze die Deckkraft auf 100 % und vergrößere die Konturbreite auf ein Mehrfaches. Wenn eine dicke Kontur die Vorderseite gefüllter Buchstaben überdeckt, vergleiche vor Pfadänderungen die SVG-Zeichenreihenfolge von Kontur und Füllung. Lege ein kontrastierendes Rechteck dahinter. Erscheint die Linie, stelle die gewünschte Farbe wieder her und wähle eine Breite, die in der Ausgabegröße gut erkennbar bleibt.

Beachte, dass ein am Element deklarierter Stil weiterhin durch eine spezifischere Stylesheet-Regel überschrieben werden kann. Prüfe den berechneten Stil in den Browser-Entwicklerwerkzeugen, wenn das Markup etwas anderes angibt, als der Browser zeichnet.

Ursache 2: Die Linie wird am Seiten- oder Rahmenrand abgeschnitten

Eine Kontur reicht zu beiden Seiten ihres Mittelpfads. Liegt dieser auf der viewBox-Grenze, kann die halbe Kontur außerhalb des Viewports liegen. Eine dicke Linie, ein quadratisches Linienende, eine Gehrungsverbindung, Unschärfe oder Schatten brauchen mehr Platz, als die reinen Pfadkoordinaten vermuten lassen. Die SVG-Spezifikation zum Zeichnen definiert, wie Konturbreite, Linienenden, Verbindungen und Gehrungsgrenzen das gezeichnete Ergebnis um einen Pfad erweitern. Muss die Linie einer geschlossenen Form vollständig innerhalb oder außerhalb ihres Pfads liegen, nutze die Anleitung zur inneren oder äußeren Konturausrichtung, um vor einer Größenänderung der Zeichenfläche ihre gezeichnete Ausdehnung zu vergleichen.

Teste das, indem du das Objekt nach innen verschiebst oder die viewBox vorübergehend vergrößerst. Kehrt der fehlende Teil zurück, füge einen gezielten Rand um die sichtbare Grafik hinzu. Vergrößere die Arbeitsfläche nicht blind weiter; berechne genügend Platz für maximale Konturbreite, Linienenden, Verbindungen und Effekte.

Prüfe auch Verweise auf clipPath und mask. Eine Beschneidung, die auf die Füllungsgrenzen zugeschnitten ist, kann eine darüber hinausgehende Kontur abschneiden. Verschachtelte SVG-Elemente können eigene Viewports erzeugen, und das overflow-Verhalten kann sich zwischen Browser und Designwerkzeug-Importer unterscheiden.

Verschwindet nur eine Ecke, suche nach einem Zusammenspiel mit hohem stroke-miterlimit. Eine spitze Gehrung kann weit über den Pfad hinausragen. Eine runde oder abgeschrägte Verbindung kann sinnvoller sein als ein größerer Viewport, aber nur, wenn sie die beabsichtigte Gestaltung erhält.

Ursache 3: Skalierung oder Transformationen verfälschen die Kontur

Eine Transformation kann sowohl die Geometrie eines Objekts als auch seine scheinbare Kontur verändern. Eine Linie, die bei der Erstellung gut sichtbar war, kann nach dem Import haarfein werden, insbesondere wenn die empfangende Anwendung Einheiten oder verschachtelte Transformationen anders interpretiert.

Prüfe die SVG auf transform="scale(...)" am Pfad und seinen übergeordneten Gruppen. Vergleiche viewBox, width und height des Dokuments und teste bei 100 % Zoom sowie in der endgültigen physischen Größe. Wird die gesamte Grafik mit falschen Abmessungen importiert, korrigiere die Dokumentzuordnung mit dem SVG-Maßstabstest anhand bekannter Größe, statt beliebige Konturbreiten als Ausgleich zu verwenden.

SVG unterstützt auch vector-effect="non-scaling-stroke". Wie die MDN-Referenz zu vector-effect erklärt, sorgt der übliche Wert non-scaling-stroke dafür, dass die gerenderte Konturbreite den Transformationen des Elements nicht folgt. Das kann für Diagramme in Benutzeroberflächen und Karten nützlich sein; prüfe das Ergebnis im vorgesehenen Importer, weil die Unterstützung außerhalb von Browsern je nach Anwendung variiert.

Füge non-scaling-stroke nicht als allgemeine Lösung hinzu. Entscheide, ob die Linie mit der Grafik skalieren soll. Wird ein Logo für den Druck vergrößert, sollten seine Konturen normalerweise mitwachsen. Muss eine Kartenlinie beim Zoomen einen Bildschirmpixel breit bleiben, kann eine nicht skalierende Kontur beabsichtigt sein.

Ursache 4: Die Zielanwendung kann die Darstellung nicht wiedergeben

Nicht jede in einer Designanwendung angezeigte Linie ist eine einfache SVG-Kontur. Sie kann ein druckempfindlicher Pinsel, ein variables Breitenprofil, Musterpinsel, Live-Effekt, eine Überblendung, ein Filter oder ein proprietärer Darstellungsstapel sein. Ein Exporter kann diese Konstruktion annähern, und eine zweite Anwendung kann die Annäherung ignorieren.

Führe an einer Kopie einen Reduktionstest durch:

1. Entferne den Filter und behalte die grundlegende Kontur.
2. Ersetze Muster oder Pinsel durch eine einfache durchgezogene Kontur.
3. Entferne die variable Breite.
4. Löse verschachtelte Transformationen auf.
5. Exportiere das einzelne Objekt als minimale SVG.
6. Öffne diese Datei in der Zielanwendung.

Die erste Vereinfachung, die die Linie wiederherstellt, identifiziert das nicht unterstützte Merkmal. Du kannst dann einen portablen Ersatz wählen, statt das gesamte Dokument zu reduzieren.

Externe CSS-Regeln und Ressourcen sind ein weiteres Risiko für die Übertragbarkeit. Eine in eine Website eingebettete SVG kann eine Klassenregel oder benutzerdefinierte Eigenschaft von der Seite erben, während die allein geöffnete Datei dies nicht tut. Umgekehrt kann ein Desktop-Editor Selektoren verwerfen, die er nicht seinem Objektmodell zuordnen kann. Verwende für eine eigenständige Ausgabedatei in sich geschlossene Stile, die die Zielanwendung nachweislich importiert.

Bearbeitbare Kontur oder Umrisspfad?

Eine bearbeitbare Kontur behält einen editierbaren Mittelpfad sowie Einstellungen für Breite, Linienenden, Verbindungen, Strichelung und Farbe. Sie ist kompakt und leicht anzupassen. Eine in Pfade umgewandelte Kontur macht das sichtbare Band zu gefüllter Pfadgeometrie. Das fixiert die Darstellung, opfert aber die ursprüngliche Mittellinie und die Kontursteuerung.

Wandle Konturen in einer Ausgabekopie in Pfade um, wenn die Zielanwendung eine wesentliche Pinsel- oder variable Breitendarstellung nicht erhalten kann oder ein Dienstleister ausdrücklich gefüllte Geometrie verlangt. Adobes Dokumentation zum Umwandeln von Objekten beschreibt, wie Konturen in ihre einzelnen Objekte umgewandelt werden.

Bewahre den Master mit bearbeitbaren Konturen auf, denn die Umwandlung kann:

• Knotenzahl und Dateigröße erhöhen;
• Breitenänderungen verlangsamen;
• Überlappungen in komplizierte Geometrie verwandeln;
• getrennte Teile erzeugen, die vereinigt werden müssen;
• die Bedeutung offener Pfade für Plotten, Gravieren oder Animation verändern.

Besonders riskant ist die Umwandlung, wenn ein Stiftplotter oder Gravurablauf erwartet, dass das Werkzeug dem Mittelpfad einmal folgt. Eine umgewandelte Kontur gibt der Maschine zwei Grenzen. Nutze für diesen Ablauf stattdessen die Anleitung zu einlinigen SVGs.

Die Korrektur passend zur Zielanwendung wählen

Teste die tatsächliche Zielanwendung, nicht nur einen anderen Editor desselben Herstellers. Browser, Designfläche, Druckprozess, Schneidegerät und CAD-Importer können jeweils unterschiedliche Teilmengen von SVG unterstützen.

Eine sichere Reparaturreihenfolge

Gehe von reversiblen Prüfungen zu strukturellen Umwandlungen über:

1. Bewahre die bearbeitbare Vorlage auf und erstelle eine Kopie.
2. Prüfe, ob die Geometrie existiert.
3. Vergleiche zwei Renderer.
4. Teste ausdrücklich gesetzte Konturfarbe, Breite und Deckkraft.
5. Prüfe Hintergrundkontrast und geerbtes CSS.
6. Prüfe Seitengrenzen, Beschneidungen, Masken und verschachtelte Viewports.
7. Prüfe Transformationen und Darstellung in Endgröße.
8. Vereinfache jeweils eine nicht unterstützte Darstellung.
9. Wandle nur die nötigen Konturen in einer Ausgabekopie in Pfade um.
10. Öffne die ausgelieferte SVG erneut und vergleiche sie mit der Vorlage.

Nutze Rasterisierung nicht als Zwischenlösung, wenn gute Pfade erhalten sind. Sie entfernt die Geometrie, die du bewahren möchtest, und fügt einen Nachzeichnungsschritt hinzu, der Ecken aufweichen, Kurven verändern und unnötige Knoten erzeugen kann.

Wo PerfectVector passt

PerfectVector ist nur hilfreich, wenn die ursprüngliche Vektorgeometrie verloren oder unbrauchbar ist und die beste verbliebene Vorlage ein Rasterbild ist. Es kann ein geeignetes flächiges Logo, Icon oder eine Illustration als bearbeitbare Vektorformen rekonstruieren.

Es repariert kein CSS, stellt keine ausgelassene bearbeitbare Kontur wieder her und wandelt keinen nicht unterstützten Pinsel unter Erhalt seiner bearbeitbaren Mittellinie um. Existiert der Pfad noch, korrigiere Farbe, Grenzen, Transformationen oder Darstellung in einem Vektoreditor. Das erhält mehr Informationen als das Nachzeichnen eines Screenshots.

FAQ

Warum verschwinden SVG-Konturen nach dem Export? Der Pfad kann noch existieren, aber keine sichtbare Kontur, null Deckkraft, eine dem Hintergrund entsprechende Farbe, eine extrem geringe Breite, einen Beschnitt, ein Maßstabsproblem oder eine nicht importierbare Darstellung haben. Prüfe zuerst die Geometrie und grenze dann Farbe, Grenzen, Transformationen und Unterstützung ein.

Wie erkenne ich, ob der Pfad noch existiert? Wähle das fehlende Objekt in einem Vektoreditor aus und wechsle zur Kontur- oder Drahtgitteransicht. Du kannst die SVG auch als Text öffnen und nach dem entsprechenden Pfad- oder Formelement suchen. Vorhandene Knoten ohne sichtbare Linie deuten auf ein Darstellungs- oder Stilproblem statt auf fehlende Geometrie hin.

Warum wird eine Kontur am SVG-Rand abgeschnitten? Eine Kontur reicht über den Mittelpfad hinaus, sodass ein Pfad an der viewBox-Grenze die halbe Breite verlieren kann. Auch Linienenden, Verbindungen, Filter, Beschneidungen und Masken können zusätzlichen Rand benötigen. Verschiebe den Pfad nach innen oder dimensioniere Viewport und Beschneidung gezielt um die vollständige Darstellung.

Sollte ich SVG-Konturen vor dem Export in Pfade umwandeln? Nur, wenn die Zielanwendung eine wesentliche Konturdarstellung nicht erhalten kann oder ausdrücklich gefüllte Geometrie verlangt. Wandle eine Ausgabekopie um und bewahre den bearbeitbaren Konturmaster auf. Die Umwandlung fügt Geometrie hinzu und ist ungeeignet, wenn ein Plotter oder Gravurwerkzeug einer einzigen Mittellinie folgen soll.

Kann PerfectVector eine fehlende SVG-Kontur wiederherstellen? Nicht aus einer SVG, deren Pfad oder Stil lediglich repariert werden muss. PerfectVector kann sichtbare Grafik anhand des besten verbliebenen Rasters rekonstruieren, wenn die ursprüngliche Vektorgeometrie nicht verfügbar ist. Es stellt aber kein CSS, keine Pinseleinstellungen und keinen ursprünglichen bearbeitbaren Mittelpfad wieder her.

Quellen

1. W3C — Zeichnen in SVG 2 — Definiert Füllung, Kontur, Konturbreite, Linienenden, Verbindungen und Vektoreffekte.
2. W3C — SVG-2-Koordinatensysteme — Dokumentiert Viewports, viewBox, Einheiten und Transformationen.
3. MDN — vector-effect — Erklärt das Verhalten von non-scaling-stroke.
4. Adobe Illustrator — Objekte gruppieren und umwandeln — Dokumentiert die Umwandlung von Konturen in bearbeitbare Einzelobjekte.

---

Wenn die ursprüngliche Vektorgeometrie verloren ist und die beste verbliebene Vorlage ein Rasterbild ist, rekonstruiere die Grafik mit PerfectVector als saubere Vektorpfade und prüfe sie anschließend in der Zielanwendung. Existieren die Pfade noch, repariere die SVG, statt sie neu nachzuzeichnen.