SVG-Farben ändern und häufige Probleme beheben

Es gibt drei echte Wege, die Farbe einer SVG-Datei zu ändern, und alle sind kostenlos. Lade sie in ein Online-Werkzeug zum Ändern von SVG-Farben hoch und klicke auf das Farbfeld, das du ersetzen möchtest. Öffne sie in einer Vektor-App wie Inkscape, wähle die Form und eine neue Füllung aus. Oder öffne die Datei in einem Texteditor und tausche den Hexcode aus, denn ein SVG ist einfach Text. Das Umfärben eines Vektors ist außerdem verlustfrei: Du schreibst eine Anweisung um, statt Pixel neu einzufärben. Daher wird nichts unscharf oder schlechter.

Welche Methode du wählst, hängt vom Inhalt deiner Datei ab. Wenn sich die Farbe eines SVG nicht ändern lässt, liegt es fast immer am Dateiinhalt, nicht am verwendeten Werkzeug. Dieser Leitfaden behandelt zuerst die drei Methoden und dann die Diagnose: die sechs häufigen Gründe, warum Umfärben nicht funktioniert, einschließlich des einen, den kein Farbwerkzeug beheben kann.

Wo ein SVG seine Farben speichert

Eine SVG-Datei ist eine als Text geschriebene Liste von Formen. Jede Form kann ein fill für die Fläche und ein stroke für den Umriss haben, wie in MDNs Anleitung zu SVG-Füllungen und Konturen beschrieben. Es gibt keine einzelne „Bildfarbe“, die du an einer Stelle austauschen kannst. Ein Design, das am Bildschirm einfarbig erscheint, kann ein einzelner ordentlicher Pfad sein oder vierzig separate Pfade, die zufällig alle dieselbe Füllung haben.

Darum geht es insgesamt. Jede folgende Umfärbemethode ist nur ein anderer Weg, Formen zu finden und ihr fill oder stroke umzuschreiben. Deshalb unterscheiden sich die Ergebnisse zwischen Dateien so stark: Je weniger und je sauberer die Formen, desto leichter das Umfärben.

Wähle deine Methode

Methode 1: ein Online-Werkzeug zum Ändern von SVG-Farben

1. Öffne ein kostenloses SVG-Farbwerkzeug im Browser und lade die Datei hoch; gute Werkzeuge akzeptieren auch eingefügten SVG-Code.
2. Das Werkzeug listet die gefundenen Farben auf. Nützliche Werkzeuge gruppieren identische Füllungen, sodass „das Blau“ ein Farbfeld ist, auch wenn es Dutzende Formen umfasst.
3. Klicke auf ein Farbfeld, wähle den Ersatz und beobachte die Vorschau.
4. Lade das Ergebnis herunter und öffne es zur Bestätigung einmal in einem Browsertab.

Für die meisten Menschen ist dies meistens die richtige Methode. Prüfe zwei Dinge, bevor du einem Werkzeug echte Arbeit anvertraust: ob es auch Konturfarben auflistet und wie es mit Verläufen umgeht. Zeigt ein Werkzeug weniger Farben, als du am Bildschirm siehst, ist ein Teil der Datei ein Verlauf oder ein eingebettetes Bild. Ein einfacher Farbfeldaustausch erreicht ihn nicht.

Methode 2: ein Vektordesignprogramm

Inkscape ist kostenlos und kann alles, was diese Aufgabe braucht; Illustrator und Figma funktionieren ähnlich.

1. Öffne das SVG und klicke auf den Teil, den du ändern möchtest. Wird das ganze Design als ein Block ausgewählt, ist es gruppiert: Doppelklicke, um die Gruppe zu öffnen, oder hebe die Gruppierung auf.
2. Ändere die Füllung im Bedienfeld Füllung und Kontur (Inkscape) oder über das Füllungsfarbfeld (Illustrator, Figma).
3. Ist eine sichtbare Farbe auf viele Formen verteilt, klicke sie nicht einzeln an. Rechtsklicke eine Form und nutze Gleiches auswählen → Füllfarbe in Inkscape oder Illustrators dokumentiertes Auswahl → Gleich → Flächenfarbe. Alle Formen mit dieser Füllung sind nun ausgewählt, und eine Änderung färbt sie alle um.
4. Exportiere oder speichere als einfaches SVG.

Ein Designprogramm nutzt du auch für mehr als Farben, etwa zum Verschieben von Formen oder Überarbeiten von Kurven. Diesen größeren Werkzeugkasten erklärt unser Leitfaden zum Bearbeiten eines SVG.

Methode 3: ein Texteditor

Weil SVG Text ist, funktioniert jeder Editor: Notepad, TextEdit, VS Code.

1. Öffne die .svg-Datei und suche nach fill=.
2. Ändere den Wert, zum Beispiel fill="#1e3a5f" in fill="#c2410c", und speichere.
3. Aktualisiere die Datei in einem Browsertab, um das Ergebnis zu prüfen.

Drei Einschränkungen: Farben können als Namen (fill="black") oder als Hexwerte angegeben sein. Umrisse stehen in stroke=, nicht in fill=. Und viele exportierte Dateien setzen die Farbe gar nicht direkt an die Form: Sie verwenden Klassen, deren tatsächlicher Hexwert in einem <style>-Block am Anfang steht (.st0{fill:#1e3a5f;}). Bearbeite den Hexwert im Stilblock, und jede Form dieser Klasse folgt der Änderung.

Diese Methode ist hervorragend für einfarbige Icons, bei denen einmal Suchen und Ersetzen genügt, und für Stapelbearbeitung in einem Ordner. Für eine Illustration mit vierzig Farben ist sie der langsame Weg.

Wenn dein SVG auf einer Website liegt

Kannst du die Farbe eines SVG mit CSS ändern? Der direkteste Weg ist SVG-Markup inline im HTML. Dann funktioniert fill als CSS-Eigenschaft, und mit currentColor als Füllung erbt das Icon die umgebende Textfarbe. Ein als externes <img> geladenes SVG wird als Bild behandelt; MDN weist darauf hin, dass JavaScript in dieser Einbindung die SVG-Struktur nicht manipulieren kann, und Seitenstile wählen seine internen Pfade nicht direkt aus.

Kannst du die Datei nicht inline einbinden, nutze wieder die oben beschriebenen Dateibearbeitungsmethoden: Ändere die Farbe im SVG selbst und lade es neu. Vergleiche für die Einbindungswahl inline eingebundenes SVG mit einem externen Bild anhand derselben Grafik und eines Tests mit Seiten-CSS.

Für eine einfarbige Silhouette in einer Benutzeroberfläche bieten SVG-CSS-Masken und transparente Iconformen einen weiteren Weg: Färbe das Icon-Element mit CSS, während die Pfadfarben des Ausgangsbilds unverändert bleiben.

Für einen reversiblen Farbeffekt vergleiche feColorMatrix mit direkten Füllungsänderungen. Ein Filter ändert die dargestellten Farben, während die ursprünglichen Farbangaben erhalten bleiben. Das ist bei der Übergabe bearbeitbarer Grafik relevant.

Warum dein SVG seine Farbe nicht ändert

Diesen Teil überspringen Tutorials, und hier scheitert Umfärben meist tatsächlich. Gehe die Tabelle von oben nach unten durch.

Zwei davon verdienen einen genaueren Blick.

Die Überraschung mit dem Hintergrundkasten

Manche SVGs enthalten ein Hintergrundrechteck in voller Größe, das du auf einer weißen Seite nicht siehst. Färbst du „alles“ um, erscheint der Kasten als farbiger Block hinter deinem Design; manche Apps wählen ihn beim Klicken ebenfalls aus. Er ist eine normale Form, also wähle ihn aus und lösche ihn oder gib ihm die tatsächlich gewünschte Farbe. Wird der Kasten in anderer Software weiß, ist das ein verwandtes, aber anderes Problem, das unser Leitfaden zum Erhalten eines transparenten Hintergrunds behandelt.

Das SVG, das kein Vektor ist

Der hartnäckige Fall sieht so aus: Keine Form ist auswählbar, jede Füllungsänderung bleibt wirkungslos, und beim Zoomen verpixeln die Kanten. Öffne die Datei im Texteditor, und statt <path>-Elementen findest du ein einzelnes <image>-Tag mit einer Wand aus base64-Text. Das ist ein Rasterbild in einer .svg-Hülle. Konverter, die nicht tatsächlich nachzeichnen, erzeugen solche Dateien. Kein Farbwerkzeug kann helfen, weil keine Formen zum Umfärben existieren. Filter, die es „kolorieren“, tönen nur die Pixel, meist schlecht. Am Bildschirm sehen beide Dateien identisch aus, im Code ist der Unterschied aber offensichtlich:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Die Lösung: Gehe zurück zum Bild selbst, idealerweise dem Original-PNG oder -JPG, und wandle es in einen echten Vektor mit echten Pfaden um. Unser Leitfaden zu SVGs, die weiterhin pixelig aussehen, erklärt ausführlicher, wie solche Attrappen entstehen und wie du sie erkennst, bevor du dich auf sie verlässt. Sobald echte Formen existieren, funktionieren alle Methoden dieses Leitfadens.

Eine Schnittdatei umfärben: Jede Farbe ist eine Ebene

Ein Cricut oder eine Silhouette behandelt jede Farbe in deinem SVG als Ebene. Jede Ebene bedeutet einen weiteren Durchgang, ein weiteres Materialblatt und mehr Entgittern. Das Umfärben einer Schnittdatei ist deshalb eigentlich Ebenenplanung: Gibst du zwei Elementen dieselbe Füllung, werden sie in einem Schnitt zusammengefasst; trennst du eine Farbe, entsteht eine neue Ebene.

Dadurch ist ein Bearbeitungsschritt für Bastler besonders wertvoll: fast identische Farben zusammenzuführen. Nachgezeichnete Grafik enthält häufig drei beinahe identische Blautöne, die Ebenen hinzufügen, ohne sichtbar etwas beizutragen. Fasse sie zu einer Farbe zusammen, dann schneidet die Datei schneller und lässt sich viel leichter entgittern. Der Workflow zum Reduzieren einer SVG-Farbpalette zeigt, wie du nach visueller Funktion zusammenführst, ohne Kontrast oder die Bedeutung von Bearbeitungsschritten zu verlieren. Wenn du bewusst mehrschichtige Designs erstellst, behandelt unser Leitfaden zu SVGs mit Ebenen den vollständigen Workflow, und die Cricut-SVG-Seite erklärt die Vorbereitung von Grafiken für Schneidemaschinen von Anfang bis Ende.

Brauchst du nach dem Umfärben separate Downloads, speichere jede exakte Farbe als ausgerichtete SVG-Datei.

So sieht das mit PerfectVector aus

Zuerst eine ehrliche Einschränkung: PerfectVector bearbeitet keine bereits vorhandenen SVG-Dateien. Es wandelt Bilder (PNG, JPG, WebP) in SVGs um. Erstaunlich viele Schwierigkeiten bei „Wie färbe ich dieses SVG um?“ gehen jedoch auf diesen Umwandlungsschritt zurück: Die widerspenstige Datei ist meist ein unordentlich nachgezeichnetes Ergebnis oder überhaupt kein echter Vektor.

Wenn das SVG also aus einem Bild entstand oder du das Originalbild noch hast, gelingt das sauberste Umfärben an der Quelle. Wandle das Bild in ein SVG um, das zum Bearbeiten gedacht ist: saubere Pfade, wenige Knoten und jede Farbe als eigene bearbeitbare Form. Nutze dann vor dem Download den integrierten Farbeditor, um beliebige Farben auszutauschen oder ähnliche zusammenzuführen — nach Farbe statt durch Suchen einzelner Pfade. So erhältst du in einem Schritt die gewünschte Palette und eine einfachere Datei. Deine ersten Umwandlungen sind kostenlos, ohne Kreditkarte.

Was Umfärben nicht leisten kann

• Verläufe sind kein einzelnes Farbfeld. Ein Verlauf ist ein Übergang zwischen Farbstopps. Du kannst die Stopps bearbeiten, aber ein einfacher „Diese Farbe ersetzen“-Durchgang ändert möglicherweise nur einen Teil des Übergangs. Deshalb sehen Verlaufsgrafiken nach einem unbedachten Austausch seltsam aus.
• Bildschirmfarben sind keine Druckfarben. SVG speichert auf Bildschirmdarstellung ausgerichtete Farbanweisungen, während ein Druckauftrag eine exakte Markenfarbe, Sonderfarbe oder einen bestimmten Schwarzaufbau verlangen kann. Ändert ein Export die sichtbare Farbe, diagnostiziere die SVG-Farbverschiebung, bevor du die Palette ersetzt; das von der Druckerei verlangte Produktionsformat bleibt die maßgebliche Farbgrundlage.
• Umfärben bereinigt keine Geometrie. Neue Füllungen führen keine schmalen Fragmente zusammen, schließen keine Lücken und reduzieren keine Knoten. Eine unordentliche Vektorisierung mit neuen Farben bleibt unordentlich.

Vor dem Speichern

• Öffne die umgefärbte Datei frisch in einem Browsertab und vergleiche sie mit dem Original.
• Prüfe Umrisse: Haben sich Konturen zusammen mit Füllungen dort geändert, wo sie sollten?
• Suche nach einem unerwünschten Hintergrundrechteck, das du versehentlich umgefärbt hast.
• Zähle bei Schnittdateien nach dem Zusammenführen von Farben die Ebenen; weniger ist fast immer besser.
• Behalte eine unveränderte Kopie der Originaldatei.

FAQ

Wie ändere ich die Farbe einer SVG-Datei ohne Illustrator oder Photoshop? Nutze ein kostenloses Online-Werkzeug zum Ändern von SVG-Farben (hochladen, Farbfeld anklicken, herunterladen) oder Inkscape, einen kostenlosen Vektoreditor für den Desktop. Bei einem einfarbigen Icon funktioniert auch ein beliebiger Texteditor, in dem du den Hexwert nach fill= änderst. Keine dieser Optionen kostet etwas.

Warum bleibt mein SVG schwarz, egal was ich versuche? Auf einer Website kann CSS ein über ein img-Tag geladenes SVG nicht umgestalten; binde es inline ein oder bearbeite die Datei. Prüfe im Editor, ob eine Gruppe im Weg ist, eine Kontur die Farbe bestimmt oder Farben in einem Stilblock definiert sind. Lässt sich nichts auswählen und zeigt Zoomen Pixel, ist die Datei ein Rasterbild in einer .svg-Hülle ohne Formen zum Umfärben.

Kannst du ein SVG in Canva umfärben? Laut Canvas eigenem SVG-Editor kannst du ein SVG kostenlos ohne Wasserzeichen hochladen, umfärben und herunterladen. Komplexe SVG-Funktionen können in verschiedenen Editoren trotzdem unterschiedlich dargestellt werden. Prüfe die heruntergeladene Datei deshalb, bevor du das Original ersetzt.

Kann eine SVG-Datei mehr als eine Farbe verwenden? Ja. Jede Form in der Datei hat ihre eigene Füllung und Kontur, sodass ein SVG so viele Farben wie Formen enthalten kann, zusätzlich zu Verläufen. Deshalb bedeutet das Umfärben mehrfarbiger Grafik auch, mehrere Füllungen statt einer globalen Einstellung zu ändern.

Wie ändere ich SVG-Farben für ein Cricut-Projekt? Du kannst Ebenen in Cricut Design Space umfärben, aber das geschieht pro Ebene, nicht pro Form. Um neu festzulegen, welche Teile dieselbe Farbe haben und zusammen geschnitten werden, bearbeite das SVG vor dem Upload: Führe Farben zusammen, die du auf einer Ebene möchtest, und gib allem, was separat geschnitten werden soll, eine eigene Füllung.

Verringert das Ändern einer SVG-Farbe die Qualität? Nein. Die Farbe eines Vektors ist eine Textanweisung. Ihre Änderung schreibt diese Anweisung um, ohne die Geometrie anzutasten. Anders als beim Bearbeiten eines PNG kannst du ein SVG beliebig oft ohne jeden Qualitätsverlust umfärben.

Quellen

1. MDN: SVG-Füllungen und Konturen — Erklärt fill, stroke, Deckkraft und verwandte SVG-Farbeigenschaften.
2. MDN: Vektorgrafiken im Web einbinden — Vergleicht inline eingebundenes SVG mit über <img> geladenem SVG.
3. Adobe Illustrator: Objekte mit gleicher Füllung und Kontur auswählen — Dokumentiert die Auswahl von Grafik nach gemeinsamen Farbeigenschaften.
4. W3C: Eingebettete Inhalte in SVG 2 — Definiert Rasterinhalt als <image> in SVG-Dokumenten.
5. Canva: SVG-Editor — Aktuelle Quelle für Canvas Aussagen zu SVG-Upload, Umfärben und Download.

Ein SVG umzufärben geht schnell, sobald die Datei mitmacht: Wähle die passende Methode für deine Datei und diagnostiziere, bevor du gegen deine Werkzeuge kämpfst. Wenn die Datei selbst das Problem ist, erspare dir den Kampf. Wandle das Originalbild in ein sauberes, bearbeitbares SVG um und wähle deine Farben, solange es noch einfach ist.