SVG feColorMatrix: Umfärben ohne Füllwerte zu ändern

Ein SVG-Filter feColorMatrix verändert die Farben, die ein Renderer anzeigt. Er schreibt die fill-Werte deiner Pfade nicht um. Das macht ihn für reversible visuelle Effekte nützlich, aber eine gefilterte Vorschau und ein SVG mit tatsächlich bearbeiteter Farbpalette sind unterschiedliche Ergebnisse für die Weitergabe.

Wenn du eine Webvorschau benötigst, behalte den Filter und teste die Seite, auf der er läuft. Wenn jemand eine blaue Form auswählen und ihre blaue Füllung bearbeiten muss, ändere die Farben in der Quelle. Ist die Quelle ein PNG, erzeugen weder ein Filter noch eine SVG-Hülle bearbeitbare Vektorformen; dafür ist eine separate Vektorisierung erforderlich.

Das folgende Beispiel verwendet für beide Umfärbewege dasselbe Motiv mit zwei Blättern. Du kannst den Code speichern, die Quelle prüfen und den Filter entfernen, um genau zu sehen, was verändert wurde.

Wähle das benötigte Ergebnis der Umfärbung

Der Leitfaden zur SVG-Farbbearbeitung behandelt das Auffinden von Füllungen, Konturen und Stilregeln. Hier geht es gezielter darum, was ein Filter in der Datei hinterlässt. MDN beschreibt feColorMatrix als Transformation von Pixelfarbkanälen, während der Leitfaden zu Füllungen und Konturen die Farben beschreibt, die auf Formen angewendet werden.

Ein prüfbares Beispiel mit zwei Farben

Speichere dies als filtered-leaves.svg und öffne es im Browser. Das erste Blatt beginnt mit einer orangefarbenen Füllung, #cc6633; das zweite hat eine grüne Füllung, #339966, mit halber Deckkraft. Die Matrix vertauscht Rot- und Blaukanal und behält Grün und Alpha bei.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Wir haben vier Varianten dieses Originalmotivs im Browser gerendert: die ursprünglichen Farben, die gefilterte Version, eine direkte Bearbeitung und eine Kopie mit entferntem Filter. Bei der direkten Bearbeitung wurde die erste Füllung ohne Filter zu #3366cc und die zweite zu #669933 geändert. Beide Umfärbewege erzeugten ein blau-olivfarbenes Motiv. Die Prüfung des DOMs der gefilterten Version lieferte weiterhin die ursprünglichen orangefarbenen und grünen Füllattribute. Nach dem Entfernen des Filters erschien wieder die ursprüngliche Farbpalette.

Dies ist eine kleine Browserdemonstration, kein Kompatibilitätstest für jeden Editor oder jedes Exportformat. Die nützliche Prüfung für die Weitergabe ist einfach: Die gefilterte Datei hängt weiterhin davon ab, dass dieser Effekt erhalten bleibt und gerendert wird. Die Version mit direkt geänderten Füllungen trägt die neue Palette auf den Formen selbst.

Um die Quellprüfung zu wiederholen, öffne das SVG in einem Texteditor und suche nach fill=. Entferne dann nur filter="url(#swap-red-blue)" aus der Gruppe und aktualisiere den Browser. Behalte die unveränderte Datei daneben, damit du das Ergebnis vergleichen kannst.

Verstehe die vier Zeilen, ohne eine Matrix auswendig zu lernen

Bei type="matrix" enthält das Attribut values zwanzig Zahlen: vier Zeilen mit jeweils fünf Werten. Jede Zeile berechnet einen Ausgabekanal. Die Spalten verwenden Eingaberot, Grün, Blau, Alpha und einen konstanten Offset. MDNs Matrixreferenz zeigt die Gleichungen und die Einheitsmatrix.

In unserem Beispiel übernimmt Zeile eins Blau als neues Rot. Zeile zwei behält Grün. Zeile drei übernimmt Rot als neues Blau. Zeile vier behält Alpha:

0 0 0 1 0

Die letzte Zeile bedeutet „das vorhandene Alpha ohne zusätzlichen Offset verwenden“. Wenn du sie durch lauter Nullen ersetzt, wird das Ergebnis transparent. Eine Konstante in der letzten Spalte verändert die Transparenz auch dort, wo die Quelle transparent war. Das kann innerhalb des Filterbereichs ein unerwünschtes Rechteck erzeugen.

Die Matrix verarbeitet die gerenderte Eingabe des Filters. Sie weiß nicht, welche Pixel von einem Blatt, einem Buchstaben, einer Kontur oder einem eingebetteten Foto stammen. Wende sie auf die Gruppe oder das Objekt an, das du beeinflussen möchtest. Wenn du nur einen bestimmten inhaltlichen Teil eines Designs ändern musst, wähle diesen Teil aus und bearbeite stattdessen seine Farbe.

Wähle sRGB, wenn deine Zahlen aus einem RGB-Farbmuster stammen

SVG-Filterprimitive verwenden standardmäßig linearRGB. Ein Farbmuster wie rgb(128, 128, 128) wird normalerweise in sRGB angegeben. Deshalb bedeutet eine Matrixkonstante von 0.5 im standardmäßigen Filterfarbraum nicht dasselbe angezeigte Grau wie der halbe sRGB-Wertebereich. Verwende color-interpolation-filters="sRGB", wenn deine Matrix auf diesen sRGB-Kanalwerten arbeiten soll. Das unterscheidet sich von color-interpolation; eine Änderung dieses anderen Attributs wählt den Filterfarbraum nicht aus. MDN dokumentiert die Standardwerte und den Unterschied.

Für eine einfarbige Silhouette in #3366cc sind die normalisierten RGB-Werte 51/255, 102/255 und 204/255, also 0.2, 0.4 und 0.8. Der folgende Filter verwirft die RGB-Eingabewerte und setzt diese Konstanten, während er das Eingabealpha erhält:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Verweise vom Objekt aus mit filter="url(#solid-blue)" auf diesen Filter. Er entfernt bewusst Unterschiede zwischen deckenden Quellfarben. Er eignet sich für eine Silhouette, nicht zum Erhalten der Tonwertdetails eines Fotos. Die Spezifikation zu Filtereffekten definiert die Kanaltransformation und ihren Umgang mit nicht vormultiplizierten Farbwerten.

sRGB festzulegen ist eine Wahl des Berechnungsfarbraums, keine Garantie für identische Farben auf jedem Bildschirm oder im Druck. Bei allgemeineren Unterschieden nach der Weitergabe nutze die Checkliste zu SVG-Exportfarben.

Prüfe die gelieferte Datei, nicht nur die Vorschau

Eine filterbasierte Umfärbung bleibt reversibel, solange Originalgrafik und Filterdefinition erhalten bleiben. Ein Screenshot oder Rasterexport hält das sichtbare Ergebnis als Pixel fest. Keine der beiden Operationen macht für sich genommen die neue Farbpalette als bearbeitbare Pfadfüllungen verfügbar.

Prüfe vor der Weitergabe eines Vektors das tatsächliche Ziel:

1. Öffne das gespeicherte SVG über denselben Import- oder Exportweg, den der Empfänger verwenden wird.
2. Vergleiche Farben und halbtransparente Kanten mit der Browservorschau.
3. Wähle eine Form aus und prüfe ihre Füllung. Enthält sie den gewünschten neuen Wert oder die ursprüngliche Farbe unter einem Effekt?
4. Speichere und öffne die Datei einmal erneut. Bestätige, dass Filterdefinition und Referenz erhalten geblieben sind, wenn der Effekt benötigt wird.
5. Wenn der Empfänger gewöhnliche bearbeitbare einfarbige Füllungen benötigt, verwende die Version mit direkt geänderten Füllungen und entferne den nun unnötigen Filter aus dieser Ausgabekopie.

Bei Verläufen, Konturen, Deckkraft oder vermischten Überlappungen ist eine globale Matrix kein allgemeines Suchen-und-Ersetzen-Werkzeug. Um die gewünschte Darstellung als Quellfarben nachzubauen, musst du möglicherweise mehr als ein Paar Hexwerte bearbeiten. Wenn eine Rasterausgabe akzeptabel ist, kannst du die geprüfte Darstellung alternativ als PNG exportieren. Bewahre das Vektororiginal separat auf.

Wann PerfectVector in diesen Workflow gehört

Wenn du diese beiden Pfade bereits hast, bearbeite sie direkt. Es gibt keinen Grund, sie zu rastern und erneut nachzuzeichnen, um einen Farbfilter zu entfernen.

PerfectVector wird relevant, wenn deine Ausgangsgrafik ein PNG oder JPG ist und du bearbeitbare Bereiche benötigst. Nutze die Bild-zu-Vektor-Konvertierung, um einen Vektorkandidaten vorzubereiten, und prüfe dann Formgrenzen und kleine Details vor dem Umfärben. Ein Filter auf einem Bitmap kann dessen Darstellung verändern, aber das Bitmap bleibt Pixelinhalt. Die Prüfung auf eingebettete Rasterbilder hilft, diesen Fall von auswählbaren und bearbeitbaren Pfaden zu unterscheiden.

Bei Fotos, die du lediglich einfärben möchtest, bleibe bei einem Rasterworkflow. Verwende bei einem Logo mit vorhandenem Vektororiginal dieses Original. Der Überblick zur Vektorisierung erklärt, wann die Rekonstruktion von Geometrie aus Pixeln sinnvoll ist.

FAQ

Ändert feColorMatrix die Füllwerte in meinem SVG? Nein. Es transformiert gerenderte Farbkanäle. Die Füllattribute der Quelle bleiben unverändert, solange du sie nicht separat bearbeitest.

Warum ist mein gewähltes Grau heller als erwartet? Prüfe den Berechnungsfarbraum des Filters. SVG-Filterprimitive verwenden standardmäßig linearRGB. Setze color-interpolation-filters auf sRGB, wenn die Matrixkonstanten normalisierte sRGB-Farbmusterwerte darstellen.

Wie erhalte ich beim Umfärben die Transparenz? Behalte die Alphazeile als 0 0 0 1 0 bei. Das erhält das Eingabealpha. Prüfe halbtransparente Kanten und füge keinen Alpha-Offset hinzu, außer du möchtest die Transparenz verändern.

Kann ein gefiltertes PNG zu einem bearbeitbaren Vektor werden? Ein Farbfilter verändert die Darstellung, nicht die Geometrie. Um einzelne Vektorformen zu bearbeiten, beschaffe das Vektororiginal oder vektorisiere das Rasterbild und prüfe die entstandenen Pfade.

Quellen

1. MDN: feColorMatrix — Definiert Matrixzeilen, Kanäle und verfügbare Transformationstypen.
2. MDN: color-interpolation-filters — Erklärt den Standardwert linearRGB und die ausdrückliche Auswahl von sRGB.
3. W3C: Filter Effects, feColorMatrix — Legt das Verhalten der Farb- und Alphatransformation fest.
4. MDN: Füllungen und Konturen — Beschreibt die von SVG-Formen verwendeten Quellfarben.

Wenn deine Grafik nur als Pixel vorliegt und getrennte bearbeitbare Farben benötigt, konvertiere dein Bild in einen Vektorkandidaten. Prüfe die Pfade, färbe die Quellfarben um und öffne die gelieferte Datei erneut, um Darstellung und Bearbeitbarkeit zu kontrollieren.