SVG-Farben ändern

Über das Ändern der Farben in einem SVG

Ein SVG ist Text. Irgendwo darin sagt eine Form fill="#1f2937", und das ist der ganze Grund, warum das Symbol dunkelgrau ist. Ändern Sie diese sieben Zeichen, und das Symbol ist, was immer Sie wollen.

Das Problem ist, sie zu finden. Ein echter Export aus Illustrator oder Figma legt seine Farben nicht an eine offensichtliche Stelle — er verstreut sie über fill-Attribute, style-Attribute, einen <style>-Block voller Klassenregeln und die Stopps in einem Verlauf. Öffnen Sie die Datei in einem Texteditor, und Sie suchen in tausend Zeilen nach den elf, auf die es ankommt.

Dieses Werkzeug liest die ganze Datei, sammelt jede verwendete Farbe und listet sie in einer Tabelle auf. Ändern Sie die Farbe rechts in einer Zeile, und jede Form mit dieser Farbe ändert sich mit — im bearbeiteten Bild, während Sie wählen. Zurück kommt Ihre Datei mit neuen Farbwerten — sonst ist nichts angefasst.

Zwei Wege, eine Farbe zu ändern

• Nach Farbe — die Tabelle unter den Bildern listet jede einzelne Farbe der Datei: links, was sie ist, rechts, was sie wird. Jede Zeile beginnt bei ihrem eigenen Original, es ändert sich also nichts, bevor Sie es sagen. Ändern Sie eine, und alle ihre Verwendungen ändern sich gemeinsam. Das wollen Sie für „mach die blauen Teile grün" und für das Umfärben eines Symbols auf eine Markenpalette.
• Nach Form — klicken Sie im Bild auf eine beliebige Form und färben Sie nur diese, auch wenn sie ihre Farbe mit zwanzig anderen teilt. Füllung und Kontur bekommen eigene Werte, und sonst bewegt sich nichts.

Beides greift ineinander: erst die Palette setzen, dann die eine Form korrigieren, die anders sein musste.

Alles in einer Farbe

Die mit Abstand häufigste Aufgabe. Ein Symbol kommt in fünf Grautönen an, und Sie brauchen es flach weiß für einen dunklen Kopfbereich, flach schwarz für den Druck oder in einer Markenfarbe für eine Reihe von Schaltflächen.

Farbe wählen, Anwenden drücken, und jede Farbe der Datei wird zu dieser einen. Formen ohne Füllung bleiben ohne Füllung, Konturen bleiben also Konturen und Löcher bleiben Löcher.

Wo es nach Farben sucht

• fill und stroke als Attribute geschrieben
• Dieselben Eigenschaften innerhalb eines style-Attributs
• <style>-Blöcke — Klassenregeln wie .cls-1 { fill: #231f20; }, wie Illustrator praktisch jeden Export schreibt
• stop-color in Verläufen, sodass ein Verlauf Stopp für Stopp umgefärbt werden kann
• flood-color und lighting-color an Filtern

Farben in jeder von CSS erlaubten Schreibweise werden verstanden — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) und Namen wie red oder darkslategray. Transparenz bleibt erhalten: eine halbtransparente Form bleibt in ihrer neuen Farbe halbtransparent.

Was es nicht anfasst

• Verläufe und Muster als solche. Die Stopps in einem Verlauf lassen sich umfärben; der Verlauf selbst wird nicht in eine flache Farbe verwandelt, und eine Form mit url(#pattern) bleibt unangetastet.
• Eingebettete Bitmaps. Ein in ein SVG eingefügtes PNG ist ein Foto, keine Form, und hat keine Füllung zum Ändern. Dafür gibt es Bildfarben-Picker oder einen Bildeditor.
• Alles, was keine Farbe ist. Deckkraft, Konturbreite, Transformationen und Text kommen so heraus, wie sie hineingegangen sind.

Nichts wird hochgeladen

Die Datei wird in Ihrem Browser gelesen, umgefärbt und neu geschrieben. Sie erreicht nie einen Server, worauf es ankommt, wenn die Datei ein unveröffentlichtes Logo, eine Kundenmarke oder Grafik unter Geheimhaltung ist.

Es bedeutet außerdem: kein Warten auf einen Upload, keine Größenbegrenzung, und das Werkzeug arbeitet offline weiter, sobald die Seite geladen ist.

Eine bewusste Ausnahme von „nichts wird verändert": Enthält die Datei einen <script>-Block, wird er entfernt, und die Seite sagt es Ihnen. Ein Bild hat keinen Grund, ausführbaren Code mitzuführen, und dieses Werkzeug muss die Datei zeichnen, um sie Ihnen zu zeigen.

Wofür Leute es benutzen

• Einen Symbolsatz auf eine Markenpalette umfärben, ohne ein Grafikprogramm zu öffnen
• Ein Logo flach weiß für einen dunklen Kopfbereich machen, oder flach schwarz für den Druck
• Die eine Form korrigieren, die in der falschen Farbe herauskam
• Helle und dunkle Fassungen derselben Grafik herstellen
• Die Stopps eines Verlaufs ändern, ohne den Verlauf neu zu bauen
• Schnell Farben ausprobieren, weil sich das Bild beim Auswählen mit ändert

Gut zu wissen

• Die beiden Vorschauen sind die Datei vorher und nachher, im selben Maßstab gezeichnet — und die bearbeitete ist das tatsächliche Dokument, was Sie sehen, ist also genau das, was heruntergeladen wird
• Eine Änderung an einer einzelnen Form wird als schlichtes fill- oder stroke-Attribut geschrieben, wo das reicht, und nur dann als inline style, wenn eine <style>-Regel in der Datei es sonst überstimmen würde — das Werkzeug prüft, was tatsächlich passiert ist, statt zu raten
• Farben werden nach ihrem Wert gruppiert, #FFF, #ffffff und white sind also eine Zeile
• Jede Zeile hat ihr eigenes Rückgängig, und Alle Farben zurücksetzen bringt die ganze Datei in den Zustand zurück, in dem sie ankam
• Eine Datei mit Hunderten Farben ist fast immer ein nachgezeichnetes Foto; gelistet werden nur die meistverwendeten
• Um den leeren Rand um das Ergebnis zu entfernen, gibt es SVG zuschneiden
• Um das Ergebnis in ein PNG zu verwandeln, gibt es SVG in PNG

So wird es benutzt

• Auf Klicken zum Hochladen klicken oder das SVG auf das Feld ziehen
• Jede Farbe der Datei erscheint als Zeile in der Tabelle, das Original links
• Rechts die Farbe setzen — mit dem Wähler oder durch Eintippen eines Hex-Werts — um sie überall dort zu ändern, wo sie vorkommt
• Oder im bearbeiteten Bild auf eine Form klicken, um nur diese zu färben
• Alles in einer Farbe für eine flache einfarbige Fassung benutzen
• Auf SVG herunterladen drücken oder mit SVG-Code kopieren direkt in eine Seite einfügen

Verwandte Werkzeuge

• SVG zuschneiden — den leeren Rand um das Ergebnis entfernen
• SVG in PNG — aus dem umgefärbten SVG ein Bitmap machen
• SVG in JPG — ein SVG als flaches Bild
• Bild in SVG — ein Logo zuerst in Vektorpfade nachzeichnen
• Farbpalette aus Bild — eine Palette aus einem Foto ziehen
• Farbkontrast prüfen — prüfen, ob die gewählten Farben lesbar sind