Mit SVG zum Erstellen einer Duplex-Effekt auf Bilder

0
159

Alles ist möglich mit SVG, richtig?!

Nach einem Jahr der Zusammenarbeit mit einigen großen Designer und Experimentieren zu erreichen, einige ziemlich Coole visuelle Effekte, es beginnt zu fühlen, wie es ist. Eine schnelle Suche nach “SVG” auf CodePen wird dies bestätigen. Von Schriften, Formen, sprites, Animationen, Bildbearbeitung, alles ist besser mit Hilfe von SVG. Also, wenn Sie ein neues visual trend die web hit im letzten Jahr, war es keine überraschung, dass die SVG kam die Rettung, um uns zu erlauben, es zu implementieren.

Der Funke, der einen trend

Creatives überall begrüßt 2016 neue Jahr mit dem Funken ein einfärben der Technik popularisiert durch Spotify das Jahr 2015 in der Musik-website (hier ist im letzten Jahr), die eingeführt bold, duotone-Bilder, um Ihre Marke Identität.

Die Spotify-Jahr 2015 in der Musik-Website zeigt die duotone-Bild-Technik.

Diese Technik ist eine Halbton-Reproduktion eines Bildes durch überlagerung einer Farbe (traditionell schwarz) mit einer anderen. In anderen Worten, der dunklere Ton zugeordnet werden, um den Schatten des Bildes und der leichtere Ton, zugeordnet zu den highlights.

Wir erreichen die Duplex-Technik in Photoshop durch die Anwendung einer Verlaufsumsetzung (Ebene > Neue Einstellungsebene > Verlaufsumsetzung) von zwei Farben auf einem Bild.

Wählen Sie die gewünschte Farbe Kombination für die Verlaufsumsetzung
Ein Vergleich mit dem Originalbild (Links), und wenn der gradient map angewendet wird (rechts)

Rechts-Klick (oder alt + Klick) in die layer-Einstellungen, und erstellen Sie eine Schnittmaske anwenden den Verlauf anzeigen, um nur das Bild Schicht direkt darunter statt der Anwendung auf allen Ebenen.

Es verwendet, um überlistung der <canvas> – element zur Berechnung der Farb-Zuordnung und wenden Sie das Ergebnis auf den DOM oder verwenden Sie CSS-blend-Modi zu nahe zu kommen, um den gewünschten Farbton-Effekt. Gut, Dank der potenziell lebensrettenden Mächte des SVG haben, erstellen wir diese Photoshop-like “Einstellungsebenen” mit den SVG-filtern.

Lasst uns Sparen!

Abbau der SVG

Wir sind bereits vertraut mit dem vectorful Größe von SVG. Neben der Herstellung von scharfen, flexiblen und kleinen Grafiken, SVGs unterstützen auch die über 20 filter-Effekte, die uns erlauben, zu verwischen, morph, und so viel mehr tun, um unsere SVG-Dateien. Für dieses Duplex-Effekt, verwenden wir zwei Filter, die zu konstruieren unsere Verlaufsumsetzung.

feColorMatrix (optional)

Die feColorMatrix Effekt ermöglicht es uns zu manipulieren, die Farben eines Bildes auf der Basis einer matrix von rbga-Kanäle. Una Kravets details Farbe manipulation mit feColorMatrix in diesem deep dive und es ist sehr empfehlenswert zu Lesen.

Je nach Bild, kann es sich lohnen, den Ausgleich der Farben im Bild, indem Sie es in ein Graustufenbild mit der Farbe matrix. Sie können einstellen, dass das rbga-Kanälen, wie Sie möchten für die gewünschten Graustufen-Effekt.

<feColorMatrix type=”matrix” Ergebnis=”grayscale”
Werte=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
feComponentTransfer

Weiter ist die Karte der beiden Farben über die highlights und Schatten unserer Graustufen-Bild mit dem filter feComponentTransfer Wirkung. Es gibt bestimmte Attribute von Elementen beachten Sie für diesen filter.

Attribut
Was es Tut
Wert
color-interpolation-Filter (erforderlich) Gibt den Farbraum für Gradienten-Interpolation, color-Animationen und alpha-compositing. sRGB
Ergebnis (optional) Vergibt einen Namen für diese filter-Effekt und kann verwendet/verwiesen wird, die von einem anderen filter primitive mit in-Attribut. duotone

Während die Ergebnis-Attribut ist optional, ich mag, um es einzufügen, um zusätzlichen Kontext zu den jeweiligen filter (und praktisch als Hinweis für zukünftige Referenz).

Die feComponent filter bearbeitet, die Farbe, die Zuordnung basiert auf transfer-Funktionen der einzelnen rbga angegebene Komponente als untergeordnete Elemente des übergeordneten feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Wir verwenden diese rbga Funktionen zur Berechnung der Werte der beiden Farben im Farbverlauf anzeigen.

Hier ein Beispiel:

Der Peachy Pink gradient map in den screenshots oben verwendet eine magenta Farbe (#bd0b91) , wobei die Werte von R(189) G(11) B(145).

Teilen jeden RGB-Wert von 255 zu erhalten, werden die Werte der ersten Farbe in der matrix. Die RGB-Werte der zweiten Spalte Ergebnis in #fcbb0d (gold). Ähnlich wie in unserem Photoshop-Verlauf anzeigen, wird die erste Farbe (von Links nach rechts) abgebildet in den Schatten, und die zweite zu den highlights.

<feComponentTransfer color-interpolation-filters=”sRGB” Ergebnis=”duotone”>
<feFuncR type=”Tabelle” tableValues=”(189/255) 0.9882352941″></feFuncR>
<feFuncG type=”Tabelle” tableValues=”(11/255) 0.7333333333″></feFuncG>
<feFuncB type=”Tabelle” tableValues=”(145/255) 0.05098039216″></feFuncB>
<feFuncA type=”Tabelle” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
Schritt 3: Wenden Sie den Effekt mit CSS-Filter

Mit der SVG-filter komplett, jetzt können wir es anwenden, um ein Bild mit der CSS-Eigenschaft filter festlegen und die url () – filter-Funktion, um die ID des SVG-filter.

Es ist erwähnenswert, dass das SVG mit dem filter kann nur ein hidden-element direkt in den HTML-Code. So es lädt und ist verfügbar für den Einsatz, aber nicht Rendern auf dem Bildschirm.

background-image: url(‘path/to/img’);
filter: url(/Pfad/zu/svg – /Duplex-Filter.svg#duotone_peachypink);
filter: url(#duotone_peachypink);
Browser-Unterstützung

Sie sind wahrscheinlich daran interessiert, wie gut unterstützt wird diese Technik ist, richtig? Gut, SVG-filtern haben gute browser-Unterstützung.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
8 9 3 10 12 6

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1 10 alle 4.4 62 57

Das heißt, die CSS-Filter nicht so stark unterstützt. Das bedeutet, dass einige graceful degradation überlegungen benötigt werden.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Keine 17 6*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 37* Keine 4.4* 62 57

Zum Beispiel, Internet Explorer (IE) nicht unterstützt CSS-Filter url () – Funktion, noch die Unterstützung für CSS-background-blend-Modi, die nächste beste Weg zur Verwirklichung der Duplex-Effekt. Als ein Ergebnis, ein fallback für IE kann ein absolut positioniert, CSS-Gradienten-overlay auf dem Bild zu imitieren, um den filter.

Zusätzlich habe ich Probleme im Firefox beim Zugriff auf die filter an sich basiert auf den Pfad für die SVG-filter, wenn ich zunächst umgesetzt wird dieser Ansatz auf ein Projekt. Firefox scheint zu funktionieren, nur wenn der filter auf die verwiesen wurde, mit dem vollständigen Pfad zur SVG-Datei, anstatt die filter-ID allein. Dies scheint nicht der Fall zu sein, mehr aber lohnt sich im Auge zu behalten.

Bringen Sie Alle Zusammen

Hier ist ein vollständiges Beispiel für das filter in Gebrauch ist:

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”duotone_peachypink”>
<feColorMatrix type=”matrix” Ergebnis=”grayscale”
Werte=”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” Ergebnis=”duotone”>
<feFuncR type=”Tabelle” tableValues=”0.7411764706 0.9882352941″></feFuncR>
<feFuncG type=”Tabelle” tableValues=”0.0431372549 0.7333333333″></feFuncG>
<feFuncB type=”Tabelle” tableValues=”0.568627451 0.05098039216″></feFuncB>
<feFuncA type=”Tabelle” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
</filter>
</svg>

Hier ist die Auswirkung, dass, wenn auf ein Bild angewendet:

Ein Vergleich des Originalbildes (Links) mit den gefilterten Effekt (rechts) mit SVG!

Finden Sie die Stift-Duplex-Demo von Lentie Gemeinde (@lentilz) auf CodePen.

Für mehr Beispiele, Sie können spielen, um mit mehr duotone-Filter in diesem Stift.

Ressourcen

Die folgenden Ressourcen sind die großen Bezugspunkte für die Techniken, die in diesem Beitrag verwendet.

  • SVG-Filter-primitive-Elemente – MDN-Dokumentation
  • Raffiniert feColorMatrix – Una Kravets’ ausführlichen Beitrag auf A List Apart