Im dritten Teil der Serie erfahren Sie, wie feComponentTransfer funktioniert und wie Sie mit diesem leistungsstarken primitiven SVG-Filter Bilder posterisieren können.

Die vorgeschlagene Artikelserie "SVG Filtering Effects" von Sara Soueidan, freiberufliche UI / UX-Schnittstellenentwicklerin und Autorin vieler im Libanon ansässiger technischer Artikel, konzentriert sich auf die Arbeit von SVG-Filtern und besteht aus folgenden Artikeln:

SVG-Filtereffekte

1. SVG-Filtereffekte. Teil 1. SVG-Filter 101
2. SVG-Filtereffekte. Teil 2. Gliederungstext mit feMorphology
3. SVG-Filtereffekte. Teil 3. Bildposterisierungseffekt mit feComponentTransfer
4. SVG-Filtereffekte: Duotone-Bilder mit feComponentTransfer .
5. SVG-Filtereffekte: Anpassen von Text an Oberflächentextur mit feDisplacementMap

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit den Grundlagen von SVG-Filtern vertraut sind oder den ersten Artikel dieser Reihe gelesen haben - "SVG-Filter 101". Wenn Sie dies noch nicht getan haben, können Sie sich ein paar Minuten Zeit nehmen, um Ihre Wissensdatenbank zu füllen.

feComponentTransfer ist eines der leistungsstärksten SVG-Filterprimitive. Dadurch haben wir die Kontrolle über die einzelnen RGBA-Kanäle unserer Grafikquelle und können Effekte wie Photoshop in SVG erstellen. In diesem Artikel, der der erste Teil des Artikels über feComponentTransfer ist , werden wir dieses Grundelement kennenlernen und sehen, wie es zum Posterisieren von Bildern verwendet werden kann.

Die Posterisierung oder Vergröberung eines Bildes beinhaltet die Umwandlung eines kontinuierlichen Farbübergangs in mehrere Bereiche mit weniger Farben mit scharfen Übergängen von einer Farbe zur anderen. Dies geschah zunächst mit fotografischen Verfahren, um Plakate zu erstellen. - Wikipedia .

Die Posterisierung erfolgt im gesamten Bild, ist jedoch im Bereich einer subtilen Farbänderung am offensichtlichsten.

Abb_1. Ein Beispiel für ein Foto im JPEG-Format (24-Bit-Farbe oder 16,7 Millionen Farben) vor der Posterisierung, im Gegensatz zum Ergebnis seiner Speicherung im GIF-Format (256 Farben). (Quelle: Wikipedia)

In diesem Artikel verwenden wir feComponentTransfer , um die Anzahl der Farben im Bild zu reduzieren, was wiederum einen schönen Postereffekt erzeugt, ähnlich dem, was wir in kommerziellen oder grafischen Plakatentwürfen sehen.

Abb_2. Durch Anwenden des Posterisierungseffekts auf das linke Bild mit feComponentTransfer wird die Anzahl der Farben in diesem Bild (rechts) verringert.

Aber zuerst die technischen Grundlagen betrachten ...

FeComponentTransfer auf einen Blick

Mit dem Grundelement feComponentTransfer können Sie jede der in einem Pixel vorhandenen R- , G- , B- und A- Komponenten ändern. Mit anderen Worten, mit feComponentTransfer können Sie jeden Farbkanal unabhängig auf dieselbe Weise wie den Alphakanal am Grafikeingang bearbeiten. Hiermit können Sie die Helligkeitseinstellung, Kontrastanpassung, Farbbalance oder Schwellenwerteinstellung präzise steuern.

RGBA- Komponenten werden durch Ausführen der Übertragungsfunktionen dieser Komponenten geändert. Zu diesem Zweck verfügt jede Komponente über ein eigenes Element, das als Übertragungsfunktionselement bezeichnet wird . Im gesamten Artikel werde ich diese Elemente als " Komponentenelemente " bezeichnen - d. H. Elemente, die sich auf einzelne RGBA-Komponenten beziehen. Diese Elemente sind in feComponentTransfer verschachtelt. FeComponentTransfer platziert also nur einzelne RGB-Komponentenelemente. RGBA-Komponentenelemente sind: feFuncR , feFuncG , feFuncB und feFuncA .

Das type- Attribut wird im Komponentenelement verwendet, um den Funktionstyp zu bestimmen, mit dem Sie diese Komponente ändern möchten. Derzeit gibt es fünf Arten von Funktionen: Identität , Tabelle , diskret , linear und Gamma . Diese Arten von Funktionen werden verwendet, um die Komponenten der R / G / B / A- Grafikquelle zu ändern. Wir werden uns die meisten in dieser Serie ansehen und sehen, wie sie verwendet werden können.

<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>"> 

Für jeden Funktionstyp gibt es ein oder mehrere Attribute, mit denen Sie zusätzliche Informationen zu der verwendeten Funktion angeben können. Beispielsweise hat eine lineare Funktion das Steigungsattribut , mit dem die Steigung der linearen Funktion angegeben wird, mit der die Komponente geändert wird, auf die sie angewendet wird.

Sie können eine oder mehrere Komponenten gleichzeitig ändern . Dies bedeutet, dass feComponentTransfer ein, zwei, drei oder alle Komponentenelemente gleichzeitig enthalten kann. Sie können die Kanäle auch unabhängig voneinander wechseln und auf jedes Komponentenelement unterschiedliche Funktionen anwenden.

Durch die Möglichkeit, verschiedene Funktionen für verschiedene Komponentenelemente zu verwenden, haben Sie eine sehr gute Kontrolle über die Farben der Grafikquelle auf der niedrigsten Pixelebene. Sie können beispielsweise die roten und blauen Kanäle ändern, indem Sie sie mit zwei neuen Farben abgleichen und Grün unverändert lassen oder nur die Intensität erhöhen. Diese einfache Komponentenverwaltung bedeutet, dass Sie Funktionen wie Photoshop mit wenigen Codezeilen auf Bilder in Ihrem Browser anwenden können. Ich weiß nichts über dich, aber der (Anfänger-) Designer in mir findet das super interessant!

Beispiel: Verwenden einer Alpha-Komponente, um die Deckkraft eines Objekts zu verringern

Ein einfaches Beispiel aus der Praxis ist die Verwendung des Komponentenelements feFuncA , um die Deckkraft der Grafikquelle zu verringern. Im ersten Artikel dieser Reihe haben wir gesehen, wie feColorMatrix verwendet werden kann, um die Opazität eines Elements durch Ändern des Alphakanalwerts in der Farbmatrix zu verringern. Ich persönlich bevorzuge es, feComponentTransfer für diese Art von Arbeit zu verwenden.

Durch Anwenden des folgenden Filters auf eine Quelle wird die Deckkraft dieser Quelle auf 0,5 verringert:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

Wir haben oben erwähnt, dass wir fünf verschiedene Funktionen haben, mit denen wir RGBA-Komponenten steuern können. Der Typ der Tabellenfunktion funktioniert, indem die Werte der Komponente, in unserem Beispiel der Alpha-Kanal, mit der vom Attribut tableValues bereitgestellten Werteserie abgeglichen werden.

Was bedeutet das?

Der Alpha-Kanal eines Elements liegt normalerweise im Bereich [0, 1]. Mit der Tabellenfunktion und zwei Werten: 0 und 0,5 weisen wir den Browser an, den Alpha-Bereich [0, 1] dem neuen Bereich zuzuordnen: [0, 0,5]. In diesem Fall wird die Deckkraft um die Hälfte reduziert.

Wir werden im nächsten Artikel ein detaillierteres Beispiel für die Tabellenfunktion betrachten . Jetzt möchte ich die Art der diskreten Funktion beleuchten. Mal sehen, wie es funktioniert und was wir damit machen können.

Bildposterisierungseffekt: Reduzieren der Anzahl der Farben in einem Bild mithilfe der diskreten Funktion

Die diskrete Funktion wird verwendet, um die Anzahl der Farben in einem Bild oder einer Komponente zu reduzieren, wenn nur eine Komponente verwendet wird. Wenn Sie die Anzahl der Farben im Bild verringern, sehen Sie anstelle einer sanften linearen Farbänderung schärfere Farbübergänge, die das Bild wie Streifen oder Farbcluster aussehen lassen, was zu einem Effekt führt, der wie ein Poster aussieht.

Abb_3. Das Bild rechts ist eine Kopie des Bildes links, auf das eine diskrete Funktion angewendet wurde, um die Anzahl der darin enthaltenen Farben auf 5 pro Komponente zu reduzieren.

In der obigen Abbildung sehen Sie, dass sich die Farben anstelle von glatten Übergängen dramatisch ändern, wodurch Farbbalken und Cluster entstehen und das Bild „posterisierter“ wirkt.

Persönlich erinnert mich die diskrete Funktion an die Synchronisationsfunktion step () in CSS. Im Vergleich zu einer linearen Funktion bewegt sich eine schrittweise Funktion von einem Wert zum anderen, anstatt sich linear zwischen ihnen zu bewegen.

Wie die Tabellenfunktion nimmt die diskrete Funktion eine Reihe von Werten an, wie im Attribut tableValues angegeben. Die diskrete Funktion unterscheidet sich von der Tabelle darin, wie diese Werte verwendet werden.

Mit tableValues stellen Sie dem Browser eine endliche Liste von Werten zur Verfügung, mit denen er die Farbkomponente abbilden muss. Und da Sie eine endliche Liste von Werten bereitstellen, erhalten Sie eine endliche Anzahl von Farben, wodurch Farbbalken und Cluster erstellt werden, die ansonsten lineare Farbübergänge wären.

Diese Funktion wird durch die im Attribut tableValues angegebenen Funktionsschritte bestimmt, das eine Liste von n Werten zur Identifizierung der Schrittfunktion von n Schritten enthält. - SVG- Filterspezifikation

Mal sehen, was das in einfachen Worten bedeutet. Angenommen, wir haben das folgende Codefragment:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

Im obigen Codefragment verwenden wir eine diskrete Funktion, um den roten Kanal in der Bildquelle zu ändern. Wir bieten 3 verschiedene Werte an, mit denen der Browser den roten Werten entsprechen muss. Im SVG-Filter werden die Komponentenwerte als Brüche im Bereich [0, 1] dargestellt. Dies bedeutet, dass der Wert der roten Komponente in einem beliebigen Pixel 0 (0% rot / vollständig schwarz), 1 (100% rot) oder ein beliebiger Wert (Rotton) zwischen ihnen sein kann. Gleiches gilt für grüne, blaue und Alpha-Kanäle.

Für eine beliebige Anzahl von ( n ) Werten, die Sie eingeben, erstellt der Browser n Bereiche. Insbesondere wird [0, 1] in n Bereiche unterteilt. Dann werden die Farbwerte, die innerhalb dieser Bereiche liegen, um n Werte angezeigt. Wenden Sie diese Logik auf unser Code-Snippet an:

• Der Browser sieht drei verschiedene Rotwerte in tableValues .
• es teilt die Rotwerte im Bereich [0, 1] in drei gleiche Teile. Unsere drei Bereiche lauten also wie folgt:
  
  • [0, 0,33]
  • [0,33, 0,66]
  • [0,66, 1]
• Ferner überprüft der Browser den Rotwert jedes Pixels im Bild und bestimmt, in welchem ​​Bereich es sich befindet;
• Dann werden alle Rotwerte eines Bereichs mit dem neuen Wert angezeigt, der diesem Bereich von den von Ihnen angegebenen Werten zugeordnet ist. Die Anzeige ist wie folgt:
  
  • Farben im Bereich [0, 0,33] werden als 0 angezeigt;
  • Farben im Bereich [0,33, 0,66] werden als 0,5 angezeigt;
  • Farben im Bereich [0,66, 1] werden als 1 angezeigt.

Sie können sich diesen Vorgang auch als Ein- oder Ausschalten von Farbtönen vorstellen. Wenn Sie diskrete Werte für eine Farbe angeben, teilen Sie dem Browser mit, dass nur diese Werte enthalten sind. Wenn das Pixel einen Wert enthält, der nicht einem von ihnen entspricht, sollte es deaktiviert und durch einen der zulässigen Werte ersetzt werden. So wird beispielsweise der Farbwert von 0,8 als deaktiviert betrachtet und durch 1 ersetzt (da dieser Wert im dritten Bereich liegt).

Das Folgende ist eine handgezeichnete Illustration dieses Farbdisplays, das ich gemalt habe, als ich darüber nachdachte. Vielleicht werden Sie nützlich sein.

Abb_4. Zuordnen von Farbwerten zu Bereichsfarben.

Wenn der Browser alle Pixel des Bildes durchläuft, ersetzen Sie eine große Anzahl von Rotwerten durch die kleine Zahl, die Sie in tableValues ausgewählt haben . Dadurch werden glatte Farbänderungen durch scharfe Übergänge ersetzt, und das Bild sieht aus, als ob es aus Clustern oder Clustern besteht Farbstreifen.

Das Folgende ist eine Demo zum Anwenden des obigen Code-Snippets auf ein Bild mit viel Rot. Durch Begrenzen der Anzahl von Rottönen in Pixeln eines Bildes und Nullstellen von Rottönen in einigen von ihnen zeigt das Bild insgesamt eine merkliche Abnahme von Rot, insbesondere am unteren Rand des Bildes:

Durch Ändern der Anzahl der diskreten Werte und / oder der Werte selbst wird das Gesamtergebnis geändert. Möglicherweise möchten Sie den Farbwert 0 nicht angeben, um einige schwarze Bereiche des Bildes zu entfernen. Zum Beispiel sollte es im Bild des Himmels oben in der Version der Posterisierung des Bildes wahrscheinlich keine schwarzen Cluster oder Streifen geben, da es sich immer noch um ein Bild des Himmels handelt. Dazu müssen Sie mehr als zwei oder drei Farben haben, sonst verliert das Bild den größten Teil seines Bildes.

Um diesen Effekt zu erzielen, habe ich die Anzahl der RGB-Farben auf fünf begrenzt, beginnend mit dem niedrigsten Wert von 0,25:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

Sie können mit dem Effekt in der folgenden Demo spielen:

Fazit

Ich hoffe, dieser Artikel hat dazu beigetragen, feComponentTransfer ein wenig zu verdeutlichen und Ihnen zu zeigen, wie leistungsfähig die Steuerung von Pixel- und Komponentenfarben sein kann.

Im nächsten Artikel werden zwei leistungsstärkere Typen der feComponentTransfer- Übertragungsfunktion betrachtet. Wir werden untersuchen, wie Sie den Effekt eines zweifarbigen Photoshop- Bildes simulieren und wie Sie die Helligkeit, den Kontrast und die Farbintensität eines Bildes mit feComponentTransfer steuern können . Bleib bei uns.