Warum wird meine SVG schwarz oder verliert ihre Farben?
Finde heraus, warum eine SVG im Browser, in Canva, Cricut oder einem Importprogramm schwarz oder falsch gefärbt erscheint, und repariere sie sicher.
Kurzantwort
Eine SVG wird häufig schwarz, weil ihre Formen keine direkte Füllfarbe besitzen, externes CSS benötigen, currentColor aus einer neuen Umgebung übernehmen oder beim Import eine referenzierte Farbe, Maske beziehungsweise Formatierung verlieren. Schwarz ist die Standardfüllung, wenn keine andere Farbe an der Form ankommt. Prüfe die Datei vor dem Umfärben: Bereinige unsicheres Markup mit dem SVG-Sicherheitsreiniger und nutze den SVG-Farbwechsler erst, wenn die richtigen Farben bekannt sind.
Herausfinden, wo die Farbe verloren geht
Öffne dieselbe Datei direkt im Browser, in der Zielanwendung und in einem Vektorprogramm. Ist sie im Browser korrekt, aber nach dem Upload schwarz, ignoriert der Import vermutlich einen Stilblock, eine Klasse, einen Filter oder eine geerbte Farbe. Ist sie überall schwarz, fehlen wahrscheinlich nutzbare Füllwerte.
| Symptom | Wahrscheinliche Ursache | Sinnvoller Schritt |
|---|---|---|
| Alle Formen werden schwarz | Füllfarben fehlen oder CSS wurde entfernt | Direkte fill-Werte ergänzen |
| Icon folgt der Textfarbe | currentColor ist beabsichtigt | Farbe im Umfeld setzen oder ersetzen |
| Nur Verlauf wird schwarz | Defekte Referenz auf Farbquelle | Verlauf-ID reparieren oder flache Farben verwenden |
| Grafik verschwindet | fill none, Deckkraft null oder Maske fehlerhaft | Füllung, Deckkraft und Masken prüfen |
| Farben ändern sich beim Upload | Begrenzte SVG-Unterstützung | Wichtige Stile in Attribute überführen |
Datei ohne Zerstörung reparieren
- Speichere eine unveränderte Kopie.
- Nutze den SVG-Datei-Check und notiere Stilblöcke, currentColor, Masken, Filter, Verläufe und eingebettete Bilder.
- Überführe notwendige CSS-Klassen in direkte Füll- und Konturattribute.
- Erhalte beabsichtigte Transparenz. Ersetze nicht jede Fläche durch eine Farbe, wenn das Motiv mehrfarbig sein soll.
- Vergib eindeutige IDs für Verläufe und Masken, wenn mehrere SVGs auf einer Seite stehen.
- Öffne die reparierte Datei auf weißem, dunklem und kariertem Hintergrund sowie in der Zielanwendung.
Besonderheiten bei Websites und Designprogrammen
Für ein eingebettetes Website-Icon ist currentColor praktisch, weil CSS die Farbe steuert. Als Bilddatei oder nach dem Upload erhält dieselbe SVG diese Farbe möglicherweise nicht. Für eine verlässliche Übergabe sind direkte Farben besser, wenn ein festes Erscheinungsbild wichtiger als Theme-Vererbung ist.
Manche Schneide- und Designprogramme unterstützen nur einen vereinfachten SVG-Umfang. Flache Füllungen und Pfade werden zuverlässiger übertragen als verknüpftes CSS, Browserfilter oder komplizierte Masken. Vereinfachung bedeutet dabei nicht, die Grafik zu rastern.
Häufige Fragen
Warum ist die SVG in Cricut oder Canva schwarz, im Browser aber farbig?
Der Browser wendet möglicherweise CSS oder geerbte Werte an, die der Importer ignoriert. Schreibe notwendige Stile als direkte Attribute.
Lassen sich die Originalfarben automatisch wiederherstellen?
Nur wenn sie noch in der Datei stehen oder die freigegebene Palette bekannt ist. Verlorene Information lässt sich nicht sicher erraten.
Ist eine schwarze SVG immer defekt?
Nein. Viele Icons sind absichtlich einfarbig und verwenden currentColor, damit die umgebende Anwendung die Farbe festlegt.