Wie man mit SVG-Filtern über die Grundlagen hinausgeht

SVG-Filter

Filtereffekte wenden Grafikoperationen wie Unschärfen, Beleuchtung, Farbtransformationen und Verzerrungen auf Inhalte an. Heutige Browser implementieren drei Arten von Filtern:

  • CSS-Filter : eine Reihe von einfachen CSS-Eigenschaften wie Sepia() und Kontrast() Das kann auf jeden HTML-Inhalt angewendet werden.
  • SVG-Filter : Kombinationen von Grafikeffekten, die auf SVG-Inhalte (und HTML-Inhalte über einen CSS-Filter-Querverweis) angewendet werden können.
  • DX-Filter sind die proprietären Filtereffekte von Microsoft. DX-Filter wurden in Internet Explorer (IE) 9 nicht mehr unterstützt und dann in IE Version 10 entfernt (obwohl sie weiterhin über Gruppenrichtlinien reaktiviert werden können). Die DX-Filter von Microsoft wurden bisher nur im Internet Explorer unterstützt.

In diesem Tutorial beginnen wir mit einem einfachen Schlagschatten, passen dann die Schatteneffekte für Text an, gehen durch das Erstellen einer Textur und erstellen schließlich Gotham neu, einen nicht mehr erhältlichen Instagram-Filter. Ich hoffe, dass Sie am Ende des Tutorials die Grundlagen des Filters und einige nützliche Beispielcodes genau kennen.



Warum Filtereffekte?

Wenn Sie Bildern, Grafiken, Text oder Videos visuelle Effekte hinzufügen möchten, können Sie dies in der Vorproduktion mit Tools wie Photoshop oder Illustrator oder zur Laufzeit mithilfe von Canvas-, SVG- und / oder CSS-Effekten tun.

Laufzeiteffekte können animiert werden, und Sie können die Auswirkungen großer Bilddownloads auf die Leistung verhindern (z. B. bei Rauschtexturen). Im Vergleich zu Canvas- und CSS-Effekten sind SVG-Filter besonders nützlich für:

  • Fügen Sie SVG-Grafiken Texturen hinzu, ohne große Bilder herunterzuladen.
  • Integrieren Sie clientseitige Bildbearbeitungsfunktionen in Ihre Web-App.
  • Fügen Sie dem Text Beleuchtungs-, Präge- und Verzerrungseffekte hinzu, ohne den Text in ein Bild konvertieren zu müssen, und behalten Sie dabei die Zugänglichkeit und Durchsuchbarkeit bei.

Standardisierung und Browserunterstützung

SVG-Filter in heutigen Browsern entsprechen größtenteils der SVG 1.1-Spezifikation, die 2003 zur W3C-Empfehlung wurde. CSS-Filter sind in Arbeit und werden als Teil von Filter Effects 1.0 standardisiert, einer Spezifikation, die CSS, SVG und benutzerdefinierte Funktionen kombiniert Filter.

Diese werden in den neuesten Versionen von Chrome und Safari mit einem Präfix unterstützt. Benutzerdefinierte Filter sind die neuesten und definieren Vertex- und Pixel-Shader-Effekte, die auf reguläre Webinhalte angewendet werden können. Benutzerdefinierte Filter sind in neueren Versionen von Chrome in Alpha hinter einem Flag verfügbar.

SVG-Filter werden in allen aktuellen Desktop- und mobilen Browsern unterstützt. Laut caniuse.com unterstützen 73 Prozent der installierten Browser-Basis.

SVG-Filter

Eine unscharfe und versetzte Version des Alphakanals des Inhalts

Ein grundlegender Filter: Schlagschatten

Zunächst zeigen wir den vollständigen Code für einen Basisfilter für ein Inline-SVG-Fragment. Ein SVG-Filter ist in der definiert Abschnitt eines SVG-Inline-Fragments oder -Dokuments und durch Hinzufügen von a auf SVG-Inhalte angewendet Filter Eigenschaft zum Inhalt.

Das Filterelement ist ein Container für Filterprimitive. Ein Grundelement ist eine einzelne grafische Operation, die mit anderen Grundelementen kombiniert wird, um den endgültigen Effekt zu erzielen. Der folgende Schlagschattenfilter besteht aus vier Schritten:

  • Extrahieren Sie das SourceAlpha (eine Kopie des Originalinhalts - das SourceGraphic - mit auf RGB eingestellten RGB-Kanälen).
  • Wenden Sie eine Gaußsche Unschärfe mit einer Standardabweichung von vier Einheiten an.
  • Nehmen Sie den unscharfen Text und versetzen Sie ihn um 5 Einheiten in x und Y. .
  • Nehmen Sie den zuvor erstellten unscharfen Versatztext und legen Sie ihn unter Verwendung des zusammengesetzten Grundelements unter den ursprünglichen Inhalt (SourceGraphic). feComposite , und das Über Operator.
Shadow This!

feComposite hat andere mächtige Operatoren jenseits der einfachen ' Über 'Compositing haben wir gezeigt. Öffnen Sie den CodePen für dieses Beispiel und ändern Sie den ' Über 'auf folgende Werte:

  • im schneidet die Unschärfe auf den Bereich des Originaltextes ab, wodurch ein unscharfer Fülleffekt entsteht.
  • aus zeigt den Originaltext, subtrahiert jedoch den Schlagschatten und erzeugt einen dramatischen Gravureffekt.
  • frei kombiniert beide Eingaben, subtrahiert dann aber jede Überlappung. Hier ergibt sich der gleiche Effekt wie bei aus fügt aber den Schlagschatten hinzu.

SVG-Filter

Der Schlagschatten mit einer neu zugeordneten Deckkraft

Schlagschatten anpassen

Filter verfügen über leistungsstarke Funktionen zum Anpassen von Schatten. Wenn Sie eine Gaußsche Unschärfe nicht mögen, können Sie die verwenden feConvolve Grundelement zum Erstellen von Box-Unschärfen, Richtungsunschärfen oder anderen nicht-Gaußschen Unschärfen (einschließlich Oberflächenunschärfen im Photoshop-Stil).

wie Sie Ihre digitale Kunst verbessern können

Wenn Sie sich an eine Gaußsche Unschärfe halten, können Sie die Intensität und die Neigung des Schattens mit dem feComponentTransfer anpassen. Unten ist ein Kontureffekt dargestellt, der durch erneutes Zuordnen des Alpha-Kanals der Unschärfe erzeugt wird.

in=”SourceGraphic” in2=”dropBlur” result=”final”/>

Die Magie hier kommt von der feFuncA primitiv, das den Alpha-Kanal der Unschärfe (normalerweise eine sanfte Überblendung) in vier separate Bereiche von neu abbildet fünfzig% Alpha zu 0% Alpha. Dies erzeugt eine Kontur. Sie können den Alphakanal auch mit den anderen Typen neu zuordnen feComponentTransfer . 'Diskret' ordnet Wertebereiche bestimmten Werten zu und kann zur Erzeugung von Halo-Effekten verwendet werden. 'Gamma' wendet eine Gamma-Anpassung an. 'Linear' wendet eine Neigungs- und Schnittpunktanpassung an.

Sowohl Gamma- als auch lineare Anpassungen können zu subtilen Schattenanpassungen führen, die nicht auf sich aufmerksam machen.

Texturfilter erstellen

Filter können reichhaltige Texturen erzeugen. Zum Beispiel Ziegel, Marmor, Filz, Gewebe, Bastelpapier, Sandpapier, Filmkorn, Erde und Stuck. Es ist jedoch nicht immer einfach. Komplexe Texturen können einen Filter mit acht oder zehn Schritten verwenden. Inkscape (inkscape. Org), der Open-Source-SVG-Editor, enthält eine Sammlung von Texturfiltern, deren Quelle Sie zur Inspiration prüfen können.

Hier erkläre ich, wie Sie eine vereinfachte raue Papierstruktur erstellen, die ich aus einer der in Inkscape integrierten Texturen angepasst habe.

Zunächst erzeugen wir mit dem eine Rauschfläche feTurbulenz Filter. Dann beleuchten wir diese Oberfläche mit a feDiffuseLighting Effekt, der subtile Schatten erzeugt.

feTurbulenz hat drei Attribute, über die Sie sich Sorgen machen müssen: Art , baseFrequency und numOctaves .

  • Art Kann beides sein Fraktale Störungen oder Turbulenz . Fraktale Störungen erzeugt 'gasartiges' Rauschen, das eine gute Basis für Material- und gasbasierte Texturen (wie Wolken) ist. Turbulenz erzeugt ein 'flüssigkeitsähnliches' Geräusch, das eine gute Basis für wässrige Effekte ist.
  • baseFrequency Gibt die Körnung des Geräusches an. Sehr niedrige Werte (wie z. B. 0,001) erzeugen große Muster, und sehr hohe Werte (wie z. B. 0,5) erzeugen winzige Muster. Werte im Bereich von 0,02 bis 0,2 sind nützliche Ausgangspunkte für die meisten Texturen.
  • numOctaves Gibt die Anzahl der Detailstufen im Rauschen an. Jede zusätzliche Oktave fügt eine weitere Detailebene mit einer höheren Frequenz hinzu (wie eine höhere Oktave in der Musik). Fünf Oktaven sind normalerweise die höchsten, die Sie benötigen. Der Effekt einer sechsten Oktave ist normalerweise nicht spürbar. Das feTurbulenz Filter selbst erzeugt Rauschen über alle Kanäle einschließlich des Alphas. Wenn Sie eine undurchsichtige Textur wünschen, müssen Sie den Alphakanal auf eine Konstante 1 einstellen. Sie können dies mit a tun feComponentTransfer mit einer feFuncA Kind.

SVG-Filter

Eine einfache raue Papierstruktur, die aus einer Kombination des Rauschgenerators des SVG-Filters und einer Lichtquelle erstellt wurde

In SVG-Filtern stehen zwei Beleuchtungsarten zur Verfügung: diffuse und spiegelnde. Hier verwenden wir diffuses Licht und eine entfernte Lichtquelle. (Spiegelbeleuchtung erzeugt glänzende Glanzlichter: Sie wird verwendet, um Kunststoff-, Metall- oder andere stark reflektierende Oberflächen zu simulieren.)

Eine Filterlichtquelle behandelt den Alpha-Wert eines Pixels in der Eingabe als die Höhe dieses Pixels in der Z-Dimension und berechnet anhand dieser Höhe eine virtuelle Oberfläche, die eine bestimmte Lichtmenge von der Lichtquelle reflektiert. weil feTurbulenz erzeugt einen Alphakanal voller verrauschter Werte von 0 bis 1, es erzeugt ein schönes variables Z-Terrain, das Glanzlichter erzeugt, wenn wir unser Licht darauf richten.

Das Oberflächenskala Wert in feDiffuseLighting ist der z-Index
Multiplikator. Wenn Sie dies erhöhen, werden steilere virtuelle Steigungen in Ihrer Textur erzeugt. EIN Oberflächenskala von 20 erzeugt eine Stuckstruktur und a Oberflächenskala von 50 wird zerknitterten Kunststoff erzeugen.

Bilder bearbeiten

Ein letzter Bereich, in dem SVG-Filter verwendet werden können, ist die Bitmap-Bildmanipulation. Obwohl Canvas über Pixel-Twiddling-Funktionen auf niedrigerer Ebene verfügt, bieten SVG-Filter eine Toolbox auf höherer Ebene.

In diesem Beispiel erstellen wir einen Filter, der vom jetzt nicht mehr existierenden Gotham-Filter von Instagram inspiriert ist. Zu seiner Zeit war Gotham bekannt für dramatische Schwarz-Weiß-Bilder mit dunklem Himmel. Obwohl der genaue Instagram-Algorithmus unbekannt ist, scheint der allgemeine Konsens zu sein, dass der Gotham-Filter aus fünf Anpassungen bestand:

  • Ein Mittelton-Kontrastschub
  • Eine Schwarz-Weiß-Konvertierung mit rotem Kanal
  • Ein kleines Schärfen
  • Ein Boost im blauen Kanal für die unteren Mitteltöne
  • Eine Abnahme des blauen Kanals für die oberen Mitteltöne

Dies alles ist mit der SVG-Filter-Toolbox in nur wenigen Markup-Zeilen einfach zu erledigen:

100001 0 0 0 0.030 0 0 1 0”/>

Wir starten den Filter mit dem feComponentTransfer für den roten Kanal (wir werden die anderen Kanäle bald verwerfen). Die Tabellenzuordnung entspricht der Kurvenanpassungssteuerung in einem Bildeditor. In diesem
tableValues Array ordnen wir die Mitteltöne einem größeren Bereich zu und passen die Lichter nach oben und die Schatten nach unten an.

Wir nehmen dann das Ergebnis und führen es durch a feColorMatrix . Dadurch wird der rote Kanal in den blauen und den grünen Kanal kopiert, wobei die vorhandenen Werte überschrieben werden. Dies gibt uns eine Graustufe, die nur aus dem roten Kanal erzeugt wird. Während wir die Farbmatrix anwenden, passen wir auch den Schwarzpunkt durch Hinzufügen an 0,03 zum blauen Kanal, was uns einen schwachen Blauton für unsere Schwarzen gibt.

Als nächstes machen wir eine unscharfe Maske, um das Bild zu schärfen, indem wir eine Unschärfe von 1 Einheit unseres Zwischenbildes nehmen und 30% davon von 130% des Zwischenbildes subtrahieren. Und schließlich noch eine feComponentTransfer um den blauen Kanal in den unteren Mitteltönen zu verstärken und in den oberen Mitteltönen zu verringern. Dies verleiht den mittleren bis hellen Grautönen einen leichten Gelbstich, während den mittleren bis dunklen Grautönen eine zusätzliche Blautönung hinzugefügt wird.

Und da haben Sie es: Sie haben einen einfachen Filter im Gotham-Stil erstellt.

SVG-Filter

Kombinieren Sie In-Filter-Texturen, eingefügte Schatten, Farbkurvenanpassungen und Multiplikationsmischungen

Filter, CSS und JavaScript

Es wäre sehr praktisch, Filtereinstellungen über CSS erstellen und ändern zu können. Leider sind relativ wenige Filtereinstellungen Eigenschaften, die mit CSS angegeben werden können. Die meisten sind SVG-Attribute. Die wichtigsten SVG-Filtereigenschaften sind Farbinterpolationsfilter , Flutfarbe , Flutopazität und Lichtfarbe . Fast alles andere ist ein Attribut.

Das Erstellen und Animieren von Filtern kann natürlich mit JavaScript durchgeführt werden (wenn Sie unformatierte DOM-Methoden verwenden, denken Sie daran, die * NS-Syntax zu verwenden, wenn Sie den SVG-XML-Namespace verwenden). Eine Alternative ist die Verwendung einer deklarativen Animation mit SMIL. Obwohl der IE SMIL nicht unterstützt, gibt es eine praktische Bibliothek namens fakeSMIL, die die gängigsten SMIL-Deklarationen für den IE mehrfach ausfüllt.

Sie können Formen, die Sie zeichnen, mithilfe gängiger Bibliotheken Filtereffekte hinzufügen. In d3.js sieht eine Filterdefinition ungefähr so ​​aus:

var filter = svg.append(“defs”).append(“filter”).attr(“id”, “blur”).append(“feGaussianBlur”).attr(“stdDeviation”, 5);

Dies wird ein anhängen Element und eine Unschärfefilterdefinition für Ihre d3-Visualisierung. Die vollständige Verwendung finden Sie im vollständigen Beispiel von Mike Bostock unter bl.ocks.org/mbostock/1342359. Sie können auch einen Filter definieren und anwenden, wenn Sie Grafiken mit Sencha Touch oder Ext JS erstellen.

Die beste Vorgehensweise bei Ext.Draw ist das Hinzufügen eines neuen svgFilter Attribut für Ihre Zeichnungssprites, das den Filter definiert, der für diese Sprites verwendet werden soll. Anschließend müssen Sie die DOM-Elemente generieren und die Filteranwendung in die in Ext.draw integrierte Behandlung von Füllung und Strich integrieren. Hier sehen Sie ein Arbeitsbeispiel Kern .

Weitere Effekte lernen

Zusätzliche Effekte, die Sie mit Filtern erstellen können, sind selektive Graustufen, undurchsichtige Unschärfen im iOS 7-Stil, Fokusunschärfen wie Tilt-Shifts, Vignetten, Weichzeichner, Textverzerrungen und Posterisierung. Sie können einige von ihnen in meinem sehen Öffentliche CodePen-Sammlungen .

Wörter :: Michael Mullany

wie man Wasser mit Aquarellen malt

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 251.