SVG-Farben ändern
Fill- und Stroke-Farben in SVG-Code erkennen, ersetzen und das angepasste SVG kopieren oder herunterladen – lokal im Browser.
Mit „SVG-Farben ändern“ erkennst du alle Farben in einem SVG, also fill, stroke, stop-color und Farben in style-Angaben und Style-Blöcken. Du ersetzt jede Farbe einzeln oder setzt alles auf eine einheitliche Farbe, siehst Vorher und Nachher nebeneinander und kopierst den neuen Code oder lädst das SVG herunter. Die Verarbeitung passiert lokal im Browser.
Erkannte Farben
- #3b82f6 1× in fill
- #ffffff 1× in stroke
- #1d4ed8 1× in stroke
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" fill="#3b82f6"/>
<path d="M18 34l10 10 18-22" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="32" cy="32" r="30" fill="none" stroke="#1d4ed8" stroke-width="2"/>
</svg>SVG-Farben austauschen
SVGs speichern Farben als Text in Attributen wie fill="#3b82f6" oder in CSS-Angaben.
Das Tool liest diese Werte aus, gruppiert gleiche Farben und ersetzt sie gezielt. Struktur, Pfade
und alle übrigen Angaben bleiben unverändert.
Wo Farben in einem SVG stehen
| Eigenschaft | Wirkung |
|---|---|
fill | Füllung von Flächen und Text |
stroke | Linienfarbe |
stop-color | Farbstopp in Verläufen |
currentColor | Übernimmt die CSS-Textfarbe, wird nicht ersetzt |
So gehst du vor
- SVG einfügen oder laden.
- Neue Farben wählen oder eine einheitliche Farbe setzen.
- Ergebnis kopieren. Danach verkleinerst du es mit dem SVG-Optimierer und bindest es mit dem SVG-zu-CSS-Konverter im Stylesheet ein.
Beispiel
Ein blaues Häkchen-Icon soll zur Markenfarbe Limette passen. Du ersetzt #3b82f6 durch #c9f45b und den weißen Haken durch einen dunklen Ton. Ob Haken und Fläche genug
Kontrast haben, prüfst du im Farbkontrast-Prüfer.
Häufige Fragen
Welche Farben werden erkannt?
Farben in den Eigenschaften fill, stroke, stop-color, flood-color, lighting-color und color, egal ob als Attribut, in einer style-Angabe oder in einem <style>-Block. Hex-, rgb()-, hsl()-Werte und Farbnamen werden zusammengeführt.
Warum sehe ich keine Farben?
Viele Icons legen keine Farbe fest und erben sie oder zeigen Schwarz als Standard. Dann kannst du mit „fill am SVG setzen“ eine Farbe am Wurzelelement ergänzen. Icons mit currentColor färbst du in CSS über die Eigenschaft color.
Bleiben Verläufe erhalten?
Ja. Die Farben der Verlaufsstopps (stop-color) werden wie alle anderen erkannt und einzeln ersetzt, die Verlaufsstruktur bleibt unverändert.
Werden meine Dateien hochgeladen?
Nein. SVG-Code und Dateien werden nur im Browser gelesen und verarbeitet. Es findet keine Übertragung an einen Server statt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.