Warum das SVG umfärben statt des PNG?

In einem PNG ist eine Farbe über Tausende Pixel verteilt, kantengeglättete Ränder eingeschlossen – sie zu ändern heißt also malen. In einem SVG aus gefüllten Pfaden ist eine Farbe ein Wert an jeder Form: Änderst du den Wert, bleibt jede Kante genau, wo sie war. Deshalb sollten die zweite Palette einer Marke, eine Version für den Dunkelmodus oder eine einfarbige Druckversion aus dem SVG entstehen.

Drei Schritte: Ebenen, eine Pipette und ein Farbeimer

Wie färbe ich einen Teil um?

Öffne die Datei im SVG-Editor. Ein nachgezeichnetes Bild öffnet sich mit jedem Objekt als eigener Ebene; darin sind die Formen danach verschachtelt, was was umschließt (ein Auge in einem Gesicht).

  1. Im Tab Ebenen zeigt jede Zeile ihre Farben als kleine Farbfelder: eins bei einer einfarbigen Form, mehrere nebeneinander bei einer Gruppe.
  2. Klick ein Farbfeld an. Daneben öffnet sich eine Auswahl mit festen Farben, den Farben der Zeichnung, einem Hex-Feld und einer Pipette.
  3. Zeig auf eine Farbe, um sie auf der Leinwand in der Vorschau zu sehen. Ein Klick wendet sie auf jede Füllung in dieser Zeile an (die ganze Ebene, die Gruppe oder die einzelne Form), als ein Rückgängig-Schritt. Esc stellt die alte Farbe wieder her.

Eine Zeile mit mehreren Farben kannst du einfarbig machen oder nur eine ihrer Farben ändern. Um stattdessen etwas auf der Leinwand auszuwählen: Ein Klick nimmt das ganze Objekt, ein Doppelklick geht hinein, und die Kontextleiste über der Leinwand zeigt, wo du bist („Zeichnung › Objekt 2 › Form“). Ein Klick dort geht wieder heraus.

Wie ändere ich eine Farbe überall?

Nimm den Tab Farben. Er listet die Palette der Zeichnung. Ein Klick auf ein Farbfeld wählt jede Form aus, die diese Farbe verwendet, damit du siehst, wo die Farbe vorkommt, und Überall ändern in ersetzt sie in der ganzen Zeichnung in einem einzigen Rückgängig-Schritt.

Das Eulen-Logo „Study“ viermal: in seinem eigenen Indigo und Bernstein, dann in Marineblau und Koralle, in Grün und Limette und in Schwarz und Grau

Eines unserer Beispiel-Logos, umgefärbt, indem seine zwei Farben überall geändert wurden. Jede Form und jede Kante ist unverändert; nur die beiden Füllwerte unterscheiden sich.

Im selben Tab findest du Füllung und Kontur der Auswahl (mit einer Pipette, um eine Farbe von der Leinwand zu übernehmen) und bei einem Rechteck seine Ecken. Position, Größe, Anordnen, Ausrichten und das Raster liegen unter Mehr.

Wie mache ich eine einfarbige Version?

Nutze „Überall ändern in“ nacheinander für jede Farbe und setz alle auf dieselbe Tinte. Oder wähl alles aus und nutze die Füllung der Auswahl. Such dann nach Formen, die nur wegen ihrer Farbe sichtbar waren: Ein Auge, das auf einem dunklen Gesicht weiß war, verschwindet, wenn beides schwarz wird. Lösch diese Formen oder gib ihnen eine zweite Farbe, etwa die Papierfarbe, damit die Zeichnung lesbar bleibt.

Wie prüfe ich das Ergebnis?

  • Kontrast. Text und kleine Details brauchen genug Kontrast zu ihrem Untergrund. Die WCAG verlangen für normalen Text mindestens 4,5:1.
  • Kleine Größen. Exportiere im Editor ein PNG mit 32 und 64 px und sieh es dir in dieser Größe an, nicht vergrößert.
  • Dunkle Hintergründe. Ein Logo, das für Weiß gemacht ist, braucht auf einer dunklen Seite oft eine hellere Version seiner dunkelsten Farbe.

Speichern und exportieren

Speichern legt in deinem Konto eine neue Version des SVG ab, und frühere Versionen bleiben verfügbar. PNG exportieren rendert die Zeichnung in einer Breite deiner Wahl, von 16 bis 4.096 px. Nicht gespeicherte Änderungen bleiben als Entwurf in deinem Browser und werden dir beim nächsten Öffnen derselben Datei wieder angeboten. Für den Editor brauchst du ein Konto. Dateien darin, bearbeitete Versionen eingeschlossen, werden für die Speicherdauer deines Kontos aufbewahrt, die bei jeder Datei angezeigt wird.