SVG-Filter für HTML-img-Elemente

Verketten und Mischen – chainging und mix

SVG-Filter sind ausgesprochen flexibel. Sie können sequentiell verkettet und gemischt werden und wirken auf einzelne Farbkanäle. Filter wie Grayscale oder Schwarzweiß gibt es so auch in CSS, aber SVG-Filter haben ein viel größeres Potential.

SVG-Filter auf HTML-img-Elemente

Die Bitmap-Bilder müssen nicht in eine SVG-Datei eingebettet werden, sondern können im HTML als normales img-Tag stehen. Nur der Filter ist SVG.

img {
	filter:url(#wellig)
}

<img loading="lazy" src="tulpen.jpg" height="427" width="640" alt="…">

<svg>
	<filter id="wellig" style="color-interpolation-filters:sRGB">
		<feGaussianBlur stdDeviation="3" result="result5" in="SourceGraphic"/>
		<feTurbulence baseFrequency="0.02" seed="0" result="result1" numOctaves="3" type="fractalNoise"/>
		<feDisplacementMap scale="30" yChannelSelector="G" in2="result1" result="result3" xChannelSelector="R" in="SourceGraphic"/>
		<feComposite operator="out" result="result4" in2="result1" in="result3"/>
		<feComposite in2="result4" k3="0.3" k2="1" k1="0.3" result="result6" operator="arithmetic"/>
		<feComposite operator="over" in2="result5" in="result6"/>
	</filter>
</svg>	

Der Vorteil: Wir können das Laden der Bilder mit loading lazy verzögern, mit srcset und sizes für angemessene Bildgrößen sorgen oder verschiedene Seitenverhältnisse per picture-Element nutzen.

feColorMatrix: Tonung – Bilder färben

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

Die Gewichtung des blauen Kanals mit 0.072 ist also kein Tippfehler. 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.

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.

feColorMatrix – Demo

Jeder neue Farbwert [R, G, B, A] eines Pixels wird durch eine Matrixmultiplikation in einer 5x5-Matrix berechnet.

Bitmaps / SVG-Elemente werden durch Eliminieren oder Mischen von Farbkanälen gefärbt. Cyan entsteht durch Grün und Blau bei Abwesenheit von Rot, Gelb durch Rot und Grün ohne Blau.

<filter id="colorfilter">
	<feColorMatrix type="matrix" result="grayscale"
		values="1   0   0   0   0
			     0   1   0   0   0
			     0   0   1   0   0
			     0   0   0   1   0"/>
	<feColorMatrix id="result" in="grayscale" 
	values="-1   0   0   0   1
		      0  -1   0   0   1
	 	      0   0  -1   0   1
	 	      0   0   0   1   0"/>
</filter>

Am Rande: Mal vergleichen zwischen Schwarzweiß nach der Photoshop-Formel und dem einfachen Graustufenbild aus dem grünen Kanal.

Die Wahl Graustufen Negativ verkettet zwei Filter: Der erste Filter erzeugt ein Graustufenbild nach bekanntem Rezept und schreibt das Ergebnis als result="grayscale". Der zweite Filter beruft sich auf dieses Ergebnis und stiftet die Invertierung in seinem values-Attribut.

Mehr Online feColorMatrix mit Reglern für Einstellungen

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 in einfache SVG-Filter übersetzen, SVG-Filter auf HTML-img-Elemente anwenden.

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.

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.