SVG-Filter für HTML-img-Elemente

SVG Filter für Bitmap-Bilder

SVG Filter wirken auf SVG-Elemente auf Bitmaps, also auf Fotos. Filter lassen sich kombinieren, so dass unendliche Variationen entstehen, die sich durchaus mit der Vielfalt der Photoshop-Filter und -Ebenen vergleichen lassen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Bitmap-Bild mit SVG-Filter 'Kräuseln'
Bitmap-Bild mit SVG-Filter 'Versatz'
Bitmap-Bild mit SVG-Filter 'Schwarzweiß'
Bitmap-Bild mit SVG-Filter 'Tupfer'

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.

CSS
img {
	filter:url(#wellig)
}
HTML
<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.

Original vor Anwendung des feColorMatrix-Filters
Vier mal feColorMatrix: Rot, Grün, Blau und Schwarzweiß
<feColorMatrix values = " 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 "/> <feColorMatrix values = " 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 "/> <feColorMatrix values = " 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 "/> <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"/>

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.

[ R' G' B' A' 1 ] = [ r1 r2 r3 r4 r5 g1 g2 g3 g4 g5 b1 b2 b3 b4 b5 a1 a2 a3 a4 a5 0 0 0 0 1 ] * [ R G B A 1 ]

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.

feColorMatrix für Bitmap-Bilder und SVG-Elemente
<filter id="colorfilter">
	<feColorMatrix type="matrix" 
		values="1   0   0   0   0
			     0   1   0   0   0
			     0   0   1   0   0
			     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.