CSS-Filter in SVG-Filter übersetzen

SVG Filter wirken auf SVG-Elemente und also solche auch auf Bitmap-Bilder, also auf Fotos. Die einfachen Filter lassen sich kombinieren, so dass unendliche Variationen entstehen, die sich durchaus mit der Vielfalt der Photoshop-Filter und -Ebenen vergleichen lassen.

Es gibt zwar auch die CSS-Filter, die aber von IE bis einschließlich IE 11 nicht unterstützt werden. SVG-Filter hingegen werden von Internet Explorer (auch IE10 und älter) unterstützt. Also übersetzen wir einfach CSS-Filter in SVG-Filter.

SVG-Filter sind ausgesprochen flexibel. Sie können sequentiell verkettet und gemischt werden und wirken auf einzelne Farbkanäle.

feColorMatrix: Farbe zu Schwarzweiß

Der Schwarzweißfilter ist der einfachste Kandidat: Er braucht nur feColorMatrix mit Werten, die Rot, Grün und Blau in die Helligkeitsstufen eines Graustufenbilds umsetzen.

<filter id="sw" style="color-interpolation-filters:sRGB">
   <feColorMatrix 
      values="0.21  0.72  0.072  0   0
              0.21  0.72  0.072  0   0
              0.21  0.72  0.072  0   0 
              0     0     0      1   0 "/>
</filter>

Schwarzweiß oder Graustufen sind keinesfalls die einfache Verteilung 33% Rot, 33% Grün und 33% Blau. Die Gewichtung beim Umwandeln von Farbfotos in Schwarzweißfotos in Photoshop liegt bei 0.21 : 0.72 : 0.072. Der grüne Kanal (0.72) liefert die meisten Details und darum ein höheres Gewicht.

Für ein Standard-Schwarzweißbild gilt: Rot + Grün + Blau = 1. Insgesamt höhere oder niedrigere Werte können dennoch eingesetzt werden – das Ergebnis ist dann eine Tonung.

Nur Rot-Kanal anzeigen

<feColorMatrix
     values = "1   0   0   0   0
               0   0   0   0   0
               0   0   0   0   0
               0   0   0   1   0 "/>

Die Mischung von Rot und Grün erzielt eine helle Gelb-Tonung.

<feColorMatrix
     values = "1   0   0   0   0
               0   1   0   0   0
               0   0   0   0   0
               0   0   0   1   0 "/>

Die vierte Spalte ist der Alpha-Kanal, die fünfte Spalte ein zusätzlicher Helligkeitswert.

Soweit kommt uns der RGB-Farbraum der feColorMatrix entgegen, aber dieser RGB-Farbraum ist linearisiert und liefert nicht die Farb- und Helligkeitswerte, die wir z.B. in Fotoshop bei Änderungen von Farben und Helligkeiten erwarten würden.

CSS vs SVG-Filter

So mächtig und kreativ SVG-Filter auch sein mögen – sie sind alles andere als intuitiv. Deutlich einfacher ist der Umgang mit der CSS-Eigenschaft filter und ihren einfachen Werte für Grayscale, Sepia, Hue und Opacity, dort aber stoßen wir auf unwillige Browser.

CSS-Filter lassen sich allerdings in einfache SVG-Filtern übersetzen.

SVG-Filter Farbverschiebung

Das entspricht dem CSS-Filter hue – Farbverschiebung:

<svg viewBox="0 0 640 390" width="100%" height="100%">
    <filter id="hue" style="color-interpolation-filters:sRGB">
        <feColorMatrix values="180" type="hueRotate"/>
    </filter>
    <image xlink:href="tulpen.jpg" height="390" filter="url(#hue)" width="640" y="0" x="0"/>
</svg>

Werte auf einem Farbkreis von 0 bis 360. Bei 70 beginnt Grün, bei 180 beginnt Blau, 270 geht gegen Violett, 40 Gelb.

Sättigung, Saturation

Wie CSS saturation

<filter id="saturation" style="color-interpolation-filters:sRGB">
	<feColorMatrix values="0.3" type="saturate" />
</filter>

Werte größer als 1 führen zu einer Übersättigung, Werte kleiner als 1 entsättigen die Farben. feColorMatrix values="0" type="saturate" wird zum Graustufenbild – allerdings zu langweiligen flachen Graustufen.

Graustufen

<filter id="grayscale" style="color-interpolation-filters:sRGB">
    <feColorMatrix values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "/>
</filter>

Blur – Weichzeichnung

feGaussianBlur hat zwei Werte für die Weichzeichnung stdDeviation: horizontales Weichzeichnen und vertikales Weichzeichnen. Sind die Werte unterschiedlich, entsteht eine Bewegungsunschärfe.

<filter id="blur" style="color-interpolation-filters:sRGB" >
    <feGaussianBlur stdDeviation="8 2" />
</filter>

Invert – Negativ

<filter id="invert" style="color-interpolation-filters:sRGB" >
    <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/>
</filter>

feGaussianBlur kann mit zwei Werten für stdDeviation aufgerufen werden: horizontales Weichzeichnen und vertikales Weichzeichnen. Sind die Werte unterschiedlich, bildet sich eine Bewegungsunschärfe.

Grayscale Invert – Negativ vom Graustufenbild

result und in schalten SVG-Filter in Serie. Das Bild wird in Graustufen umgewandelt und das Ergebnis invertiert.

<filter id="invertgrayscale" style="color-interpolation-filters:sRGB" >
    <feColorMatrix values="0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0 0 0 1 0 " result="grayscale"/>
    <feColorMatrix in="grayscale" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/>
</filter>

SVG-Filter

feBlend
überblenden von einfachen Filtern (ähnelt den Modi für das Überblenden von Ebenen in der Bildbearbeitung)
feComponentTransfer
regelt Helligkeit, Farbbalance und Schwellenwert
feComposite
over, in, atop, out, xor und lighter
feConvolveMatrix
Matrix Convolution – kombiniert benachbarte Pixel und ist die Grundlage für Filter wie Schärfen, Weichzeichnen und Verstärken des Kantenkontrasts.
feDiffuseLighting
Diffuses Licht
feDisplacementMap
Verschiebung
feFlood
Füllt einen Bereich mit Farbe und Opacity (Deckkraft) – flood-color und flood-opacity.
feGaussianBlur
Weichzeichnungsfilter
feImage
lädt ein externes Bild (SVG, JPG oder PNG) oder ein Fragment desselben Dokument.
feMerge
Filter mischen statt sequentiell anwenden
feMorphology
Kanten erodieren oder ausweiten
feOffset
Effekte um dx und dy verschieben
feSpecularLighting
Reflektierendes Licht, Glanzlicht
feTile
füllt ein Rechteck mit einem wiederholten Muster und erzeugt Effekte wie pattern.
feTurbulence
synthetische Texturen, basiert auf Procedural Noice (Rauschen) und erzeugt z.B. Wolken, Holz und Marmor.
FILTER