SVG öffnet sich leer: Sieben Prüfungen vor dem Neuaufbau

Wenn sich ein SVG leer öffnet, dupliziere die Datei, bevor du etwas speicherst oder exportierst. Die Grafik kann noch vorhanden sein, aber außerhalb der sichtbaren viewBox liegen, transparent oder weiß eingefärbt, durch eine Beschneidung oder Maske verborgen sein oder eine Funktion verwenden, die eine App nicht unterstützt. Das erneute Speichern eines leeren Dokuments kann eine wiederherstellbare Datei tatsächlich leer machen.

Öffne die Kopie in einem Browser und einem Vektoreditor. Dieser Vergleich ist die erste Verzweigung: Ist sie in einem sichtbar und im anderen leer, liegt es meist an Anwendungsunterstützung oder Dokumentstruktur. Ist sie überall leer, deutet das eher auf Ansichtsbereich, Darstellung, Beschneidung, ungültiges Markup oder fehlende Inhalte hin.

Die Prüfungen bilden einen Diagnoseplan, keine sieben voneinander unabhängigen Reparaturen. Bestätige, dass Geometrie vorhanden ist, und teste dann ihre Grenzen, Skalierung, Darstellung, Beschneidung, unterstützten Effekte und Abhängigkeiten, bevor du etwas ersetzt.

1. Bewahre die Datei auf und prüfe, ob sie Daten enthält

Erstelle eine Kopie mit neuem Namen. Prüfe dann ihre Dateigröße und öffne sie in einem einfachen Texteditor.

Eine Datei mit null Byte oder ein Dokument mit nur einem leeren <svg>-Wurzelelement bietet in dieser Kopie wenig zur Wiederherstellung. Eine Datei mit Pfaden, Gruppen, Stilen oder einem großen Block kodierter Daten ist nicht leer, nur weil die Zeichenfläche leer aussieht.

Ziehe aus einer großen Datei nicht zu viele Schlüsse. Sie könnte ein hochauflösendes eingebettetes Bild, wiederholte Stile oder fehlerhafte Daten enthalten. Die Größe sagt dir nur, dass sich eine weitere Untersuchung lohnt.

2. Vergleiche einen Browser und einen Vektoreditor

Ziehe das SVG in einen aktuellen Browser und öffne dieselbe Kopie dann in Inkscape, Illustrator, Figma oder einem anderen Vektoreditor.

Dass ein Browser die Datei anzeigt, beweist nicht, dass sie portable Vektorpfade enthält. Browser können eingebettete Rasterbilder und Webinhalte rendern, die CAD-Programme oder Vektoreditoren ignorieren.

3. Wähle alles aus und prüfe die Grenzen

Nutze im Vektoreditor Alles auswählen. Suche nach einem Auswahlrahmen, Koordinaten, Breite und Höhe.

• Ein Auswahlrahmen weit außerhalb der Seite bedeutet, dass die Grafik außerhalb der Zeichenfläche liegt.
• Eine riesige Auswahl kann auf einen verstreuten Punkt, ein Beschneidungsobjekt oder ein Hintergrundrechteck hinweisen.
• Ein normaler Auswahlrahmen mit unsichtbarer Grafik deutet auf Darstellung, Deckkraft oder Beschneidung hin.
• Keine auswählbaren Objekte sprechen für nicht unterstützte Inhalte, ein leeres Dokument oder einen fehlgeschlagenen Import.

Liegen die Objekte außerhalb der Zeichenfläche, verschiebe die Auswahl auf die Seite oder passe die Seitengröße an die Zeichnung an. Skaliere die Pfade nur, wenn auch ihre tatsächlichen Maße falsch sind.

4. Vergleiche die Grafik mit der viewBox

Öffne das SVG als Text und prüfe das Wurzelelement:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Die vier viewBox-Zahlen sind der minimale x-Wert, der minimale y-Wert, die Breite und die Höhe, wie die SVG-Spezifikation zum Koordinatensystem definiert. Grafiken mit Koordinaten um 10000,10000 erscheinen nicht innerhalb von viewBox="0 0 800 600". Eine viewBox-Abmessung von null oder ein negativer Wert deaktiviert das Rendern dieses Elements.

Korrigiere die sichtbaren Grenzen anhand der tatsächlichen Geometrie. Füge nicht irgendeine viewBox aus einer anderen Datei ein. Die Anleitung zu SVGs mit falscher Größe erklärt das Zusammenspiel von viewBox und Ansichtsbereichsabmessungen, wenn die Grafik sichtbar, aber falsch skaliert ist.

5. Prüfe Darstellung und Sichtbarkeit

Wähle ein Objekt aus und prüfe sowohl Füllung als auch Kontur. Häufige unsichtbare Zustände sind:

• fill="none" ohne Kontur;
• weiße Füllung auf weißer Zeichenfläche;
• opacity="0", fill-opacity="0" oder stroke-opacity="0";
• display="none" oder visibility="hidden";
• eine Klasse, deren Stylesheet einen dieser Werte anwendet;
• eine im aktuellen Maßstab extrem dünne Kontur.

Lege vorübergehend ein farbiges Rechteck hinter die Grafik oder gib einer Kopie eines Pfads eine auffällige Testfüllung. Erscheint er, stelle die vorgesehenen Stile wieder her, statt die Diagnosefarbe in der endgültigen Datei zu belassen.

Bleiben Füllungen sichtbar, verschwinden aber einzelne Linien nach dem Export, nutze die Anleitung zu verschwindenden SVG-Konturen, um Konturfarbe, Beschneidung, Maßstab und nicht unterstützte Darstellungen zu testen, ohne gute Geometrie erneut nachzuzeichnen.

6. Prüfe Funktionen, die das Ziel möglicherweise nicht unterstützt

Suche im Markup nach clipPath, mask, pattern, filter, <image> und <foreignObject>.

Beschneidungen und Masken können alles verbergen, wenn ihre Koordinatensysteme oder Referenzen fehlerhaft sind; das SVG-Renderingmodell ordnet Beschneidung, Maskierung, Filterung und Compositing in die Renderingpipeline ein. Muster und Filter können sich je nach Importer unterschiedlich darstellen. Ein <image>-Element bettet Bildinhalt in den SVG-Container ein, während <foreignObject> Inhalt aus einem anderen XML-Namensraum enthalten kann, wie die SVG-Spezifikation für eingebettete Inhalte beschreibt.

Bleiben Formen erhalten, verschwinden aber HTML-Beschriftungen, vergleiche foreignObject mit nativem SVG-Text und ersetze nur die fehlerhafte Beschriftung.

Sind die Pfade sichtbar, aber ein Schatten abgeschnitten, diagnostiziere einen beschnittenen SVG-Schatten, indem du Filterbereich und äußeren Ansichtsbereich getrennt testest.

Auch Referenzen können scheitern. Prüfe, ob die in url(#name) verwendeten IDs tatsächlich existieren und eindeutig sind. Benötigt das SVG ein externes Bild, eine Schrift, ein Stylesheet oder eine verknüpfte Datei, kann das Verschieben des SVG diese Ressource unzugänglich gemacht haben.

Für eine Qt-Anwendung trennt die Anleitung zum SVG-Renderer in Qt Modul- und Ladeprüfungen von Grenzen unterstützter Funktionen. Vergleiche zunächst eine kleine Quelle und prüfe die Grafik dann im gewählten Renderingweg.

Zeigt ein Browser das Design, aber CAD importiert nichts, suche nach gewöhnlicher Vektorgeometrie wie <path>, <rect> und <circle>. Ein sichtbares eingebettetes PNG hat keine Kurven, die CAD verwenden kann.

7. Validiere oder exportiere die Datei erneut

Fehlerhaftes XML, ungültige Attribute und exporterspezifische Strukturen können von einem Renderer toleriert und von einem anderen abgelehnt werden. Hast du das Quelldesign, öffne es erneut in der ursprünglichen Anwendung und exportiere eine einfache oder vereinfachte SVG-Kopie. Wandle nur die Funktionen, mit denen das Ziel nicht umgehen kann, in einfache Pfadgeometrie um, und vergleiche die neue Datei mit der Quelle.

Hast du die Quelle nicht, nutze einen SVG/XML-Validator oder einen Texteditor, der Syntaxfehler meldet. Arbeite an einer Kopie und behebe zuerst den ersten Strukturfehler, denn spätere Meldungen können seine Folgen sein.

Wende keinen Optimierer auf die einzige Kopie an. Optimierung schreibt die Struktur um und kann die Wiederherstellung erschweren, solange das Problem nicht verstanden ist.

Wann du neu aufbauen oder neu vektorisieren solltest

Eine neue Vektorisierung ist sinnvoll, wenn die Datei nur ein eingebettetes Rasterbild enthält, die erzeugte SVG-Struktur außerhalb eines Browsers unbrauchbar ist oder keine bearbeitbare Quelle mehr vorhanden ist. Extrahiere oder beschaffe das hochwertigste Rasterbild und zeichne es dann in echte Pfade nach.

Sie ist keine passende Lösung für Pfade außerhalb der Zeichenfläche, eine defekte viewBox, weiße Füllungen oder eine einzelne nicht unterstützte Maske. Diese Dateien haben bereits Geometrie. Sie zu erhalten vermeidet unnötigen Qualitätsverlust.

Wird das gesamte Design als ein Pixelbild ausgewählt oder bei starkem Zoom blockig, nutze vor dem Neuaufbau die Diagnose für versteckte Pixel.

Wo PerfectVector hilft

Der Bild-zu-Vektor-Workflow von PerfectVector ist für den Fall gedacht, dass nur Rasterinhalt vorhanden ist. Lade das beste PNG, JPG oder andere unterstützte Bild hoch und prüfe die Vektorvorschau auf echte Formen, saubere Kanten, Negativraum und handhabbare Pfade.

Er repariert kein beliebiges SVG-Markup und stellt keine externen Ressourcen wieder her. Enthält die Datei bereits gute Pfade, repariere Ansichtsbereich, Stile oder die nicht unterstützte Funktion in einem Vektoreditor. Ist sie nur ein Rasterbild in einer SVG-Hülle, erzeugt die Rekonstruktion der sichtbaren Grafik als Pfade einen portablen Vektor statt einer weiteren Hülle.

FAQ

Warum ist mein SVG in Illustrator leer, aber in Chrome sichtbar? Die Datei kann eine Funktion verwenden, die der Browser unterstützt, Illustrator aber nicht importiert, etwa eingebetteten Webinhalt, ein komplexes Muster, einen Filter, eine Maske oder eine Rasterhülle. Prüfe das Markup und ob es gewöhnliche Vektorpfade enthält, bevor du eine einfachere SVG-Kopie exportierst.

Wie finde ich SVG-Grafiken außerhalb der Zeichenfläche? Nutze Alles auswählen und prüfe die Auswahlgrenzen oder Koordinaten. Erscheint ein Rahmen weit von der Seite entfernt, verschiebe ihn auf die Seite oder passe die Seite an die Zeichnung an. Aktualisiere dann die viewBox passend zur vorgesehenen sichtbaren Geometrie.

Kann ein SVG weiß sein und leer aussehen? Ja. Weiße Füllungen oder Konturen verschwinden auf einer weißen Zeichenfläche. Die Datei kann außerdem null Deckkraft, display="none" oder visibility="hidden" verwenden. Teste sie auf farbigem Hintergrund und prüfe die berechneten Stile.

Warum wird mein SVG leer in Fusion oder eine andere CAD-App importiert? Die Datei kann ein eingebettetes Bitmap oder nicht unterstützten Webinhalt statt Vektorkurven enthalten. CAD benötigt importierbare Pfadgeometrie. Suche nach <path> und verwandten Formen und prüfe, ob der sichtbare Inhalt stattdessen in <image> oder <foreignObject> liegt.

Sollte ich ein leeres SVG in PNG und zurück in SVG umwandeln? Nur wenn das SVG keine wiederherstellbare Vektorgeometrie enthält und die Rasterdarstellung die beste erhaltene Quelle ist. Ein Umweg über PNG zerstört vorhandene Pfadstrukturen. Diagnostiziere zuerst Probleme mit Ansichtsbereich, Sichtbarkeit, Beschneidung und Unterstützung.

Quellen

1. W3C — Koordinatensysteme in SVG 2 — definiert Ansichtsbereiche, viewBox, Einheiten und Transformationen.
2. W3C — Renderingmodell von SVG 2 — dokumentiert Beschneidung, Maskierung, Filterung, Compositing und Renderingreihenfolge.
3. W3C — Eingebettete Inhalte in SVG 2 — definiert eingebettete Bilder und fremde Inhalte in SVG.
4. W3C — Markup-Validierungsdienst — bietet standardbasierte Dokumentvalidierung zur Fehlersuche im Markup.

Wenn die erhaltene Datei nur Pixel in einem SVG-Container enthält, rekonstruiere die Grafik als bearbeitbare Vektorpfade und prüfe die Vorschau. Sind bereits gute Pfade vorhanden, erhalte sie und repariere den kleinsten fehlerhaften Teil des Dokuments.