Auswirkungen der Filterung von SVG. Teil 4. Zweifarbige Bilder mit feComponentTransfer

Ursprünglicher Autor: Sara Soueidan
  • Übersetzung

Dieser vierte Artikel der Serie befasst sich mit SVG-Filtern, in denen Sara Soueidan zeigt, wie Sie mit feComponentTransfer einen Zwei-Ton-Filtereffekt erzeugen.



Sara Soueidan, freiberufliche UI / UX-Schnittstellenentwicklerin und Autorin vieler im Libanon lebender Fachartikel, bietet eine Reihe von Artikeln zu folgenden SVG-Filtern an und besteht aus folgenden Artikeln:


Auswirkungen der Filterung von SVG


  1. Auswirkungen der Filterung von SVG. Teil 1. SVG-Filter 101
  2. Auswirkungen der Filterung von SVG. Teil 2. Umreißen Sie den Text mit feMorphology
  3. Auswirkungen der Filterung von SVG. Teil 3. Bildposterisierungseffekt mit feComponentTransfer
  4. Auswirkungen der Filterung von SVG. Teil 4. Zweifarbige Bilder mit feComponentTransfer .
  5. SVG-Filtereffekte: Anpassen von Text an Oberflächentextur mit feDisplacementMap



Im vorigen Artikel dieser Serie habe ich Ihnen das primitive feComponentTransfer vorgestellt , mit dem wir die Anzahl der Farben in einem Bild begrenzen und einen Posterisationseffekt erzeugen können. In diesem Artikel werden wir uns ansehen, wie dieses Grundelement verwendet werden kann, um den Duplex- Effekt zu erzeugen , wie z. B. Photoshop. Wir lernen auch, wie Sie damit die Intensität und den Kontrast von Farben in einem Bild steuern können.


Kurzer Überblick


Eine kleine Wiederholung.


Mit dem primitiven feComponentTransfer können Sie jede der im Pixel vorhandenen R-, G-, B- und A-Komponenten ändern. Mit anderen Worten, feComponentTransfer ermöglicht die unabhängige Bearbeitung jedes Farbkanals sowie des Alphakanals im Eingabeelement .


RGBA- Komponenten werden durch Ausführen verschiedener Arten von Funktionen für diese Komponenten modifiziert. Dafür hat jede Komponente ein eigenes Element. Diese Komponentenelemente sind in feComponentTransfer verschachtelt . Für RGBA sind dies die Komponentenelemente feFuncR , feFuncG , feFuncB und feFuncA .


Das type- Attribut wird im Komponentenelement verwendet, um den Typ der Funktion zu bestimmen, die Sie zum Ändern dieser Komponente verwenden möchten. Derzeit stehen fünf Arten von Funktionen zur Verfügung: Identität , Tabelle , diskret , linear und Gamma . Diese Arten von Funktionen werden verwendet, um die RGBA-Komponenten (Farben und Alphakanal) der Grafikquelle zu ändern. Wir haben erwähnt, dass Sie eine oder mehrere Komponenten gleichzeitig ändern können und dass Sie den Kanal unabhängig voneinander ändern können, indem Sie auf jedes Komponentenelement unterschiedliche Funktionen anwenden.


<feComponentTransfer>
    <!-- The RED component -->
    <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR>
    <!-- The GREEN component -->
    <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG>
    <!-- The BLUE component -->
    <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB>
    <!-- The ALPHA component -->
    <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA>
</feComponentTransfer>">

In dem vorherigen Artikel haben wir die diskrete Funktion geklärt und gesehen, wie sie zum Posterieren von Bildern verwendet werden kann. In diesem Artikel beginnen wir mit der Tabellenfunktion , um einen Duplex-Effekt zu erstellen, ähnlich dem, den Sie in Photoshop erstellen können.


Erstellen eines Zweifarbeffekts in Photoshop


Ich bin kein Designer und verstehe keine Grafikeditoren wie Photoshop . Als ich in SVG einen zweifarbigen Effekt erstellen wollte, suchte ich zuerst nach einer Möglichkeit, diesen Effekt in einem grafischen Editor zu erstellen, um zu sehen, ob ich ihn mit in SVG verfügbaren Filtervorgängen replizieren kann. Wie sich herausgestellt hat, sind die Schritte zum Erstellen von zweifarbigen Bildern in SVG dieselben wie in Photoshop.


Das folgende Video ist eine beschleunigte Version dieser Lektion , die ich auf YouTube gefunden habe.


In diesem Video erstellt der Designer einen zweifarbigen Effekt, indem Sie die folgenden Schritte ausführen:


  • Bildsättigung durch Graustufenbildung reduzieren.
  • Passen Sie den Bereich der Graustufen mit dem neuen Bereich an, der anstelle von Schwarz und Weiß an beiden Enden zwei verschiedene Farben hat, die Sie in einem zweifarbigen Effekt verwenden möchten. Mit anderen Worten, Sie müssen eine Verlaufskarte erstellen und verwenden, mit der Graustufen abgeglichen werden.

Mal sehen, wie diese Schritte in der SVG repliziert werden können.


Erstellen eines zweifarbigen Effekts in SVG


Um diesen Effekt in SVG wiederherzustellen, müssen Sie zunächst das Bild verfärben. Dies kann mit dem Filterelement feColorMatrix erfolgen .


Anschließend müssen Sie eine Verlaufskarte erstellen und an den Browser übertragen können, um ein neues Bild in Graustufen anzuzeigen.


Konvertieren Sie das Bild mithilfe von feColorMatrix in Graustufen


Mit feColorMatrix können Sie eine Farbmatrix festlegen, die den Anteil von Rot, Grün und Blau in Ihrem Bild bestimmt. Durch die Bereitstellung einer gleichen Anzahl dieser drei Komponenten erstellen wir eine Matrix, die unser Bild in Graustufen in eine eigene Version konvertiert:


<svg viewBox="0 0 266 400">
    <filter id="duotone">
        <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
             0   0   0  1 0">
        </feColorMatrix>
        <!-- ... -->
    </filter>
    <image xlink:href="..." width="100%" x="0" y="0" height="100%" 
        filter="url(#duotone)"></image>
</svg>

In der folgenden Abbildung ist das Bild rechts das Ergebnis der Anwendung des obigen Filters auf das Bild links:


Ergebnis (rechts) der Konvertierung des Bildes nach links in Graustufen mit der Filteroperation feColorMatrix
Fig_1. Das Ergebnis (rechts) der Konvertierung des Bildes in Graustufen nach links mithilfe der Filteroperation feColorMatrix .


In diesem Artikel von Una Kravets erfahren Sie alles über feColorMatrix und seine Verwendung .


Da unser Bild im Wesentlichen aus einem grauen Farbverlauf besteht, müssen wir eine zweifarbige Farbverlaufskarte erstellen, um den grauen Farbverlauf anzuzeigen.


Erstellen einer Verlaufskarte mit der Komponentenübertragungsfunktion für eine Tabelle


In SVG können Sie das FeComponentTransfer-Primitiv mit einer Typentabelle verwenden, um eine Verlaufskarte zu erstellen.


Im vorigen Artikel haben wir gesehen, wie Sie die Farben eines Bildes mit der Liste der Farben, die im tableValues- Attribut enthalten sind, mithilfe der diskreten Funktion abgleichen . Der Browser verwendet unsere tableValues- Liste , um Bereiche zu erstellen, in denen Farben mit den von uns angegebenen Werten abgeglichen werden.


Bei Verwendung der Tabellenfunktion werden auch Farbwerte im tableValues- Attribut angegeben . Wieder verwendet der Browser diese Werte, um die Farben des Bildes mit ihnen abzugleichen. Wie der Browser diese Farben anzeigt, ist jedoch unterschiedlich. Anstatt Farbbereiche einem diskreten Farbwert zuzuordnen, wird aus den angegebenen Werten ein Farbbereich erstellt und der Eingabebereich an diesen neuen Bereich angepasst.


Angenommen, wir möchten zwei Farben für unseren zweifarbigen Effekt verwenden:


Original zwei Farben
Fig_2. Original zwei Farben.


Diese beiden Farben werden zum Erstellen einer Verlaufsanzeige verwendet:


Farbverlauf, der durch zwei Farbwerte erstellt wird
Fig_3. Farbverlauf, der durch zwei Farbwerte erstellt wird.


... mit der wir unsere Graustufenkarte kartieren.


Anzeige einer zweifarbigen Karte zu einem zweifarbigen Farbverlauf
Fig_4. Zeigt eine zweifarbige Karte mit einem zweifarbigen Farbverlauf an.


Um diese Farben in feComponentTransfer zu verwenden , müssen wir die Werte der R-, G- und B-Kanäle jeder Farbe ermitteln. Da tableValues gebrochene Werte enthält, müssen wir RGB-Werte in Brüche umwandeln. Farbwerte liegen normalerweise im Bereich von [0,255]. Um sie in Brüche umzuwandeln, teilen Sie sie durch 255.


Zum Beispiel hat pink die folgenden RGB-Werte:


R: 254
G: 32
B: 141

Um sie in einen Bruch umzuwandeln, erhalten wir:


R: 254/255 = .996078431
G: 32/255  = .125490196
B: 141/255 = .552941176

In ähnlicher Weise erhalten wir für Gelb Werte:


R: .984313725
G: .941176471
B: .478431373

Jetzt, da wir Farbwerte haben, ist es Zeit, unsere Verlaufskarte zu erstellen. Wir haben bereits erwähnt, dass der Browser tableValues verwendet , wenn wir tableValues zur Verwendung in der Tabellenfunktion bereitstellen , um einen Bereich zu erstellen. Deshalb werden wir zunächst zwei RGB-Farbwerte als RGB-Werte für Komponentenelemente angeben:


<feComponentTransfer color-interpolation-filters="sRGB">
    <feFuncR type="table" tableValues=".996078431  .984313725"></feFuncR>
    <feFuncG type="table" tableValues=".125490196  .941176471"></feFuncG>
    <feFuncB type="table" tableValues=".552941176  .478431373"></feFuncB>
</feComponentTransfer>


Im vorigen Artikel haben wir gesehen, dass der Browser bei Verwendung der diskreten Funktion n Bereiche für n Werte in tableValues ​​erstellt . Wenn wir die Tabellenfunktion verwenden , erstellt der Browser einen n-1- Bereich für n Werte. Weil Wir haben zwei tableValues für jede Komponente bereitgestellt , was bedeutet, dass wir für jede Komponente einen Bereich ([pink, gelb]) erhalten.


Jetzt macht feComponentTransfer seine Sache: Der Browser scannt nacheinander jedes Pixel der Bildquelle. Für jedes Pixel erhält es den Wert der roten, grünen und blauen Komponenten. Da unser Bild Graustufen aufweist, liegen die R / G / B-Werte im Bereich [0, 1] = [Schwarz, Weiß] (0 ist vollständig schwarz, 1 ist vollständig weiß und Graustufen dazwischen). Dann wird der Wert jeder Komponente mit dem neuen Wert in tableValues ​​abgeglichen .


Also:


  • Der Wert der roten Komponente wird auf den Bereich [.996078431, .984313725] abgebildet.
  • der blaue Wert der Komponente wird dem Bereich [.1249490196, .941176471] zugeordnet.
  • Der grüne Wert der Komponente wird dem Bereich [.552941176, .478431373] zugewiesen.

Wenn der Browser alle Pixel im Bild durchläuft, werden Sie alle RGB-Werte im Verlauf der Graustufen durch die RGB-Werte der Zweifarben-Verlaufsanzeige ersetzen. Als Ergebnis wird das Bild zweifarbig.


Das Ergebnis (rechts) ist die Anzeige des Graustufenbildes (links) in unserer Verlaufskarte
Fig_6. Ergebnis (rechts) zeigt das Graustufenbild (links) in unserer Verlaufskarte.


Unser vollständiger Code sieht jetzt so aus:


<svg viewBox="0 0 266 400">
    <filter id="duotone">
        <!-- Grab the SourceGraphic (implicit) and convert it to grayscale -->
        <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0">
        </feColorMatrix>
        <!-- Map the grayscale result to the gradient map provided in tableValues -->
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues=".996078431  .984313725"></feFuncR>
            <feFuncG type="table" tableValues=".125490196  .941176471"></feFuncG>
            <feFuncB type="table" tableValues=".552941176  .478431373"></feFuncB>
        </feComponentTransfer>
    </filter>
    <image xlink:href=".." width="100%" x="0" y="0" height="100%" 
       filter="url(#duotone)"></image>
</svg>

Sie können mit der Demo hier spielen:



Sie können weitergehen und anstatt nur zwei Farbwerte für eine Verlaufskarte anzugeben , geben Sie in tableValues drei Farbwerte an , und erstellen Sie eine Verlaufskarte mit drei Farben anstelle von zwei Farben.


Kontrast- und Farbsteuerung mit der Gamma-Transferfunktion


Mit der Gamma- Komponententransferfunktion können wir eine Gamma-Korrektur unserer Grafikquelle durchführen. Die Gammakorrektur ist eine Funktion zur Steuerung der Lichtintensität eines Bildes.


Die Gammafunktion verfügt über drei Attribute, mit denen Sie die Gammakorrekturfunktion steuern können, die zur Steuerung der Lichtintensität verwendet wird: Amplitude, Exponent und Offset. Zusammen bilden sie die folgende Übertragungsfunktion:


C' = amplitude * pow(C, exponent) + offset

Gamma kann verwendet werden, um den Gesamtbildkontrast zu steuern. Eine Erhöhung des Exponentenattributs macht dunkle Bereiche dunkler, während eine Erhöhung des Amplitudenattributs helle Bereiche stärker zum Leuchten bringt. Dies wiederum erhöht den Gesamtkontrast des Bildes. Das Offset- Attribut wird verwendet, um die Intensität jeder Komponente zu erhöhen, und wirkt sich auch auf das gesamte Bild aus: sowohl helle als auch dunkle Bereiche.


Das Anpassen des Kontrasts sowohl in dunklen als auch in hellen Bereichen eines Bildes kann manchmal nützlich sein, wenn Sie nicht die gewünschte „Glanzleistung“ erhalten, die Sie im Bild sehen möchten.


Wenn Sie beispielsweise den Duplex- Filter aus dem vorherigen Abschnitt auf das nächste Bild anwenden , ist das Ergebnis nicht so "lebendig", wie Sie möchten:


Das Ergebnis des Filters Duoton
Fig_7. Das Ergebnis des Filters Duoton.


Das zweifarbige Bild rechts sieht etwas blass aus und die Farben sind leicht verschwommen. Ich möchte Kontrast hinzufügen, damit er lebendiger wirkt. Erhöhen Sie die Amplitude und den Exponent etwas :


<feComponentTransfer color-interpolation-filters="sRGB">
    <feFuncR type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncR>
    <feFuncG type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncG>
    <feFuncB type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncB>
</feComponentTransfer>

Ich konnte die hellen Bereiche und die dunklen Bereiche intensiver machen:


Das Ergebnis des vorherigen Codes
Fig_8. Das Ergebnis der Gamma-Korrektur.


Dies ist natürlich nur ein Beispiel. Möglicherweise bevorzugen Sie eine hellere Version des Bildes, vor allem, um es mit Text oben besser aussehen zu lassen. Ich denke, die Gammakorrektur ist am nützlichsten für die Kontraststeuerung von Schwarzweißbildern. Wenn ich dieselbe Gammakorrektur auf die Graustufenversion des Bildes anwende, bekomme ich ein günstigeres Bild:


Das Ergebnis der Gammakorrektur für das Bild in Graustufen
Figure_9. Das Ergebnis der Gammakorrektur für das Bild in Graustufen.


Natürlich können Sie das Gegenteil tun, und anstatt den Kontrast zu erhöhen, können Sie die dunklen Bereiche ein wenig aufhellen. In diesem Fall sollten Sie die Werte der Amplituden- und / oder Exponentenattribute verringern und nicht erhöhen. Der Standardwert für beide ist 1. Der Standardattributwert für den Offset ist 0.


Spielen Sie mit den Gamma- Funktionswerten in der folgenden Demo, um besser zu verstehen, wie sie die Helligkeit und den Kontrast des Bildes beeinflussen:



SVG-Verlaufskarten-Werkzeug


Yoksel spielt seit einiger Zeit mit SVG-Filtern und hat kürzlich ein fantastisches visuelles Werkzeug entwickelt , mit dem Sie ein Bild laden und verschiedene Zwei- und sogar Dreifarbeffekte anwenden können. Das erzeugt einen SVG-Filtercode, der zum Kopieren und Einfügen an eine beliebige Stelle bereit ist. Dies ist ein großartiges Werkzeug, um feComponentTransfer näher kennenzulernen .


SVG-Filterwerkzeug ** Verlaufskarte ** von Yoksel
Abbildung 10. Werkzeug SVG-Filter Gradient Karte von Yoksel.


Mit dem Tool können Sie sogar den mit feColorMatrix erstellten Graustufeneffekt anpassen . In unserem Code haben wir eine gleiche Anzahl von R-, G- und B-Kanälen verwendet, um die Wirkung von Graustufen zu erzielen. Dies ist eine Möglichkeit, ein Graustufenbild zu erstellen. Es gibt aber auch andere Möglichkeiten. Sie können beispielsweise für jeden Kanal einen Graustufeneffekt erstellen, der für jeden Kanal unterschiedliche Graustufen ergibt:


Das Ergebnis der Erstellung eines Graustufenbildes auf andere Weise.
Fig_11. Das Ergebnis der Erstellung eines Graustufenbildes auf andere Weise.


Ich empfehle, etwas mit dem Tool zu spielen und zu prüfen, wie der Effektcode durch die Wahl des Effekts geändert wird, da dies eine der besten Möglichkeiten ist, mehr über SVG-Filter zu erfahren.


Fazit


Primitive feComponentTransfer gibt uns eine umfassende Kontrolle über die Farb- und Alphakomponenten von Bildern und ermöglicht Ihnen das Erstellen von Effekten der Photoshop-Klasse in den Komfort unserer Code-Editoren.


Im nächsten Artikel dieser Serie werden wir uns einige weitere Grundelemente ansehen, die es uns ermöglichen, einen anderen Photoshop-Effekt mit fast denselben Schritten wie in Photoshop zu reproduzieren, und erneut zeigen, wie SVG die Leistungsfähigkeit von Grafikeditoren auf eine Webplattform bringen kann. Wir lernen, Text mit der Farbe und Textur des Hintergrundbilds zu mischen, um attraktive Ergebnisse zu erzielen. Bleib bei uns


Jetzt auch beliebt: