Verwendung von SVG zur Erzeugung eines Duoton-Effekts auf Bildern

Mit SVG ist alles möglich, oder?!

Nach einem Jahr der Zusammenarbeit mit großartigen Designern und des Experimentierens, um einige ziemlich coole visuelle Effekte zu erzielen, fühlt es sich langsam danach an. Eine schnelle Suche nach „SVG“ auf CodePen wird dies bestätigen. Von Schriftzügen, Formen, Sprites, Animationen und Bildbearbeitung – alles ist besser mit Hilfe von SVG. Als also letztes Jahr ein neuer visueller Trend aufkam, war es keine Überraschung, dass SVG zur Rettung eilte, um uns bei der Umsetzung zu helfen.

Der Funke eines Trends

Kreative überall begrüßten das neue Jahr 2016 mit dem Funken einer Kolorierungstechnik, die durch Spotifys Website „Year in Music 2015“ popularisiert wurde (hier ist die des letzten Jahres), die kühne Duoton-Bilder in ihre Markenidentität einführte.

Diese Technik ist eine Halbtonreproduktion eines Bildes, indem eine Farbe (traditionell Schwarz) mit einer anderen überlagert wird. Mit anderen Worten, der dunklere Ton wird den Schatten des Bildes zugeordnet und der hellere Ton den Lichtern.

Wir können die Duoton-Technik in Photoshop erreichen, indem wir eine Farbverlaufsmaske (Ebene > Neue Einstellungsebene > Farbverlaufsmaske) aus zwei Farben über ein Bild legen.

Klicken Sie mit der rechten Maustaste auf die Einstellungsebene (oder Alt + Klick) und erstellen Sie eine Schnittmaske, um die Farbverlaufsmaske nur auf die direkt darunter liegende Bildebene anzuwenden, anstatt auf alle Ebenen.

Früher war es notwendig, das <canvas>-Element zu bearbeiten, um die Farbzuordnung zu berechnen und das Ergebnis in das DOM zu malen, oder CSS-Blend-Modi zu verwenden, um dem gewünschten Farbeffekt nahezukommen. Dank der potenziell lebensrettenden Kräfte von SVG können wir diese Photoshop-ähnlichen „Einstellungsebenen“ mit SVG-Filtern erstellen.

Lassen Sie uns anfangen zu *retten*!

Aufschlüsselung des SVG

Wir sind bereits mit der vektorreichen Großartigkeit von SVG vertraut. Neben der Erzeugung scharfer, flexibler und kleiner Grafiken unterstützt SVG auch über 20 Filtereffekte, die es uns ermöglichen, unsere SVG-Dateien zu verwischen, zu verformen und vieles mehr zu tun. Für diesen Duoton-Effekt verwenden wir zwei Filter, um unsere Farbverlaufsmaske zu erstellen.

feColorMatrix (optional)

Der feColorMatrix-Effekt ermöglicht es uns, die Farben eines Bildes basierend auf einer Matrix von rbga-Kanälen zu manipulieren. Una Kravets beschreibt die Farbmanipulation mit feColorMatrix in diesem ausführlichen Beitrag, und es ist eine sehr empfehlenswerte Lektüre.

Abhängig von Ihrem Bild kann es sich lohnen, die Farben im Bild auszugleichen, indem Sie sie mit der Farbmatrix in Graustufen umwandeln. Sie können die rbga-Kanäle nach Belieben anpassen, um den gewünschten Graustufeneffekt zu erzielen.

<feColorMatrix type="matrix" result="grayscale"
  values="1 0 0 0 0
    1 0 0 0 0
    1 0 0 0 0
    0 0 0 1 0" >
</feColorMatrix>

feComponentTransfer

Als Nächstes werden die beiden Farben über die Lichter und Schatten unseres Graustufenbildes mit dem feComponentTransfer-Filtereffekt gelegt. Es gibt spezifische Elementattribute, die man für diesen Filter beachten sollte.

Attribut	Was es tut	Zu verwendender Wert
color-interpolation-filters (erforderlich)	Gibt den Farbraum für Farbverlaufsinterpolation, Farb-Animationen und Alpha-Compositing an.	sRGB
result (optional)	Weist diesem Filtereffekt einen Namen zu und kann von einem anderen Filterprimitiv mit dem Attribut in verwendet/referenziert werden.	duotone

Obwohl das Attribut result optional ist, füge ich es gerne hinzu, um jedem Filter zusätzlichen Kontext zu geben (und als praktische Notiz für zukünftige Referenzen).

Der feComponent-Filter verarbeitet die Farbzuordnung basierend auf Transferfunktionen jeder rbga-Komponente, die als Kindelemente des übergeordneten feComponentTransfer angegeben sind: feFuncR feFuncG feFuncB feFuncA. Wir verwenden diese rbga-Funktionen, um die Werte der beiden Farben in der Farbverlaufsmaske zu berechnen.

Hier ist ein Beispiel:

Die Pfirsich-Pink-Farbverlaufsmaske auf den obigen Screenshots verwendet eine Magenta-Farbe (#bd0b91) mit den Werten R(189) G(11) B(145).

Teilen Sie jeden RGB-Wert durch 255, um die Werte der ersten Farbe in der Matrix zu erhalten. Die RGB-Werte der zweiten Spalte ergeben #fcbb0d (Gold). Ähnlich wie in unserer Photoshop-Farbverlaufsmaske wird die erste Farbe (von links nach rechts) den Schatten zugeordnet und die zweite den Lichtern.

<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
  <feFuncR type="table" tableValues="(189/255) 0.9882352941"></feFuncR>
  <feFuncG type="table" tableValues="(11/255) 0.7333333333"></feFuncG>
  <feFuncB type="table" tableValues="(145/255) 0.05098039216"></feFuncB>
  <feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>

Schritt 3: Anwenden des Effekts mit einem CSS-Filter

Nachdem der SVG-Filter abgeschlossen ist, können wir ihn nun mit der CSS-filter-Eigenschaft auf ein Bild anwenden und die url()-Filterfunktion auf die ID des SVG-Filters setzen.

Es ist erwähnenswert, dass das SVG mit dem Filter einfach ein verstecktes Element direkt in Ihrem HTML sein kann. So wird es geladen und ist verwendbar, aber nicht auf dem Bildschirm sichtbar.

background-image: url('path/to/img');
filter: url(/path/to/svg/duotone-filters.svg#duotone_peachypink);
filter: url(#duotone_peachypink);

Browser-Unterstützung

Sie interessieren sich wahrscheinlich dafür, wie gut diese Technik unterstützt wird, richtig? Nun, SVG-Filter haben eine gute Browserunterstützung.

Daher ist die Unterstützung von CSS-Filtern nicht so weit verbreitet. Das bedeutet, dass einige Überlegungen zur sicheren Herabstufung erforderlich sind.

Zum Beispiel unterstützt Internet Explorer (IE) die CSS-Filter-url()-Funktion nicht, ebenso wenig wie CSS-Hintergrund-Blend-Modi, den nächstbesten Weg, um den Duoton-Effekt zu erzielen. Infolgedessen kann ein Fallback für IE ein absolut positionierter CSS-Farbverlaufs-Overlay über dem Bild sein, um den Filter zu imitieren.

Darüber hinaus hatte ich bei der ersten Implementierung dieses Ansatzes in einem Projekt Probleme in Firefox beim Zugriff auf den Filter selbst basierend auf dem Pfad für den SVG-Filter. Firefox schien nur zu funktionieren, wenn der Filter mit dem vollständigen Pfad zur SVG-Datei anstelle der reinen Filter-ID referenziert wurde. Dies scheint jetzt nicht mehr der Fall zu sein, ist aber erwähnenswert.

Alles zusammenbringen

Hier ist ein vollständiges Beispiel für den verwendeten Filter

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="duotone_peachypink">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" >
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
      <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>        
</svg>

Hier ist die Auswirkung, wenn er auf ein Bild angewendet wird

Sehen Sie sich den Pen Duotone Demo von Lentie Ward (@lentilz) auf CodePen an.

Für weitere Beispiele können Sie mit weiteren Duoton-Filtern in diesem Pen herumspielen.

Ressourcen

Die folgenden Ressourcen sind hervorragende Anhaltspunkte für die in diesem Beitrag verwendeten Techniken.

• SVG-Filter-Primitiv-Elemente – MDN-Dokumentation
• Finessing feColorMatrix – Ausführlicher Beitrag von Una Kravets auf A List Apart