SVG blur – Weichzeichnen-Filter und Effekte

SVG FE – Filter-Effekte

Auch wenn es inzwischen die leichteren Optionen für Filtereffekte direkt mit CSS filter gibt – da fehlte zunächst noch der Support in IE11. Eine Übersetzung der CSS-Filter in SVG-Filter ist aber einfach. Die Tags für Filter beginnen mit fe für Filter Effect. Sie stecken in einem filter-Element, werden vorzugsweise in einem defs-Element (Definition) angelegt und über ihre ID auf Elemente, Texte oder Gruppen angewendet.

Natürlich sind Filter unter einer grafischen Benutzeroberfläche wie Inkscape oder Adobe Illustrator einfacher und verständlicher in ihrem Zusammenspiel. Filter in Handarbeit sind die Grundlage für Animationen.

Es gibt rund zwei Dutzend Filter, und ihre Anwendung als Filter-Primitive ist denkbar einfach. Die interessantesten Effekte entstehen aus dem Zusammenwirken von mehreren Filtern, die auf ein Element wie path, rect, circle oder text, ganze Gruppen von Elementen oder einen anderen Filter angewendet werden (verketten von Filtern, chaining). Filter funktionieren auf einzelnen Elementen oder auf Gruppen, Mustern (pattern) und Masken und können am Ende auch noch animiert werden.

feGaussianBlur

Weichzeichnen und Bewegungsunschärfe (Motion Blur)

feMorphology

Form erweitern (dilate) oder verdünnen (erode).

feOffset

Schlagschatten

feTurbulence

künstliche Texturen vom Rauschen bis zu Wolken, Holz und Marmor

feGaussianBlur – SVG Gausscher Weichzeichner

In seiner einfachsten Form braucht der feGaussianBlur-Filter nur eine Abweichung durch das stdDeviation-Attribut – den Grad der Weichzeichnung.

<filter id="blur">
   <feGaussianBlur stdDeviation="5" />
</filter>

<path filter="url(#blur)" d="m 352,43 c -3,0 -6,2  …" />

oder

<path style="filter:url(#blur)" d="m 352,43 c -3,0 -6,2  …" />

Wie gesagt: Das war die einfachste Anwendung. stdDeviation kann mit zwei Argumenten aufgerufen werden: x- und y-Richtung. Mit beiden Werte wird die einfache Weichzeichnung zur Bewegungsunschärfe (motion blur).

feGaussianBlur stdDeviation

stdDeviation – die Standardabweichung – kann zwei Werte annehmen: einen für die vertikale Abweichung und einen für die horizontale Abweichung. Damit erzeugt der Weichzeichnungseffekt den Eindruck von Bewegungsunschärfe.

<filter id="gaussian-blur">
	<feGaussianBlur stdDeviation="0 0" />
</filter>

Mit steigenden Werten für stdDeviation beschneidet der Filter das Bild sichtbar zu einem Rechteck, sobald die Weichzeichnung außerhalb der Filterregion liegt. Von Haus aus hat die Filterregion schon ein padding von 10%, aber diese Vorgabe kann überschrieben werden, um einen größeren Bereich für die Unschärfe zu schaffen.

Dafür bekommt der Filter width und height-Attribute sowie x und y für ein eigenes padding.

<filter id="smartGB" width="200%" height="200%" x="-50%" y="-50%">
	<feGaussianBlur stdDeviation="15"/>
</filter>

feOffset – Drop Shadow oder Schlagschatten

dx und dy versetzen ein Element in x- und y-Richtung. Setzt man noch feGaussianBlur in den Filter, entsteht ein Schlagschatten. SVG Effekte bilden dann Ketten

<filter id="drop" >
   <feOffset dx="10" dy="10" />
   <feGaussianBlur stdDeviation="5" />
</filter>

Filter Chain – Filter verketten

Die einfachste Variante des Blur-Filters hat einen Haken – der Schatten hat die Farbe des Elements. Von einem Schatten erwarten wir allerdings ein mehr oder minder helles Grau.

<filter id="drop-shadow">
   <!-- Nimm die Grafik mit dem in-Attribut, 
        setze den Blur-Filter darauf an
        und nenne das Ergebnis "shadow". -->
   <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="shadow" />

   <!-- Verschiebe die Ausgabe des vorherigen Filters
        um 12 Pixel nach rechts und um 8 Pixel nach unten
        und reiche das Ergebnis unter demselben Namen weiter. -->
   <feOffset in="shadow" dx="12" dy="8" result="shadow" />

   <!-- Wandle das Ergebnis in Graustufen  
        und helle es auf -->
   <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0" result="shadow" />

   <!-- Setze das Original über den Schatten -->
   <feBlend in="SourceGraphic" in2="shadow" />
</filter>

SVG Shadow nach innen – Inset

Einen Schatten nach innen wie mit CSS box-shadow inset gibt es in SVG nicht, aber dafür gibt es den Composite in-Operator. Der in-Operator schneidet den Schlagschatten an der Grenze des Elements sauber ab.

<filter id="insetshadow">
    <feGaussianBlur stdDeviation="1" />
    <feComposite operator="in" in2="SourceGraphic"/>
</filter>

SVG Motion Blur – Bewegungsunschärfe

Bewegungsunschärfe ist auch nur Unschärfe, also blur … das Attribut stdDeviation hat einen zweiten optionalen Parameter, der den Effekt einer Bewegungsunschärfe erzeugt.

<filter id="motionblur" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="15,0" />
</filter>

Der erste Wert erzeugt die Abweichung in x- und der zweite optionale Filter in y-Richtung.

color-interpolation-filters bestimmt den Farbraum des SVG-Filters. Per Vorgabe ist der Farbraum linearRGB; damit der Effekt nicht so schwach ausfällt, ist color-interpolation-filters hier auf den sRGB-Farbraum gesetzt.

feTurbulence – Rauschen, zerkratzen, Woken und Marmor

feTurbulence erzeugt Rauschen (farbige Pixel wie bei digitalen Fotos mit hohem ISO-Wert) ist von Haus aus komplexer – und rechenintensiver im Client. Ohne weitere Zutaten füllt feTurbulence nicht die Form, sondern das vollständige umfassende Rechteck um das Element. Erst ein clipPath schneidet die Form aus dem Block.

<defs>
   <filter id="noise" >
      <feTurbulence baseFrequency="0.5" />
   </filter>
		
   <clipPath id="outline">
      <path d="m 352,43 c -3,0 …" />
   </clipPath>
</defs>

<rect … filter="url(#noise)" clip-path="url(#outline)"/>

Das baseFrequency-Attribut kann genauso wie stdDeviation mit zwei Argumenten (für die x/y-Richtung) aufgerufen werden.

baseFrequency | num[,num]

Ein einzelner Wert gibt die Rauschfrequenz in x und y-Richtung an.

numOctaves | num

Je höher der Wert, desto detaillierter und feiner werden die Turbulenzen. Vorgabe ist 1, bei 0 entsteht kein Rauschen.

seed | num

Zufallsgenerator. 0 ist die Vorgabe und Wiederholungen werden schnell als Muster sichtbar.

stitchTiles | stitch | noStitch

stich setzt weiche Übergänge zwischen den Kacheln des Musters (Kacheln entstehen durch die Wiederholung des Musters). noStitch ist die Vorgabe.

type | fractalNoise | turbulence

Variationen des feTurbulence-Filters. turbulence ist die Vorgabe.

feMorphology

Der SVG-Morph-Filter verdünnt (erode) eine Form oder weitet sie aus (dilate) und liefert Text-Effekte wie emboss (eingravieren) und Neonschein. Das Attribut radius bestimmt die Ausdehnung der Erosion bzw. Verdickung.

<filter id="morphp" >
   <feMorphology operator="dilate" radius="9" />
</filter>

<text fill="lightslategray" stroke="darkslategray" stroke-width="2" filter="url(#morphp)">WEST</text>
<text fill="darkslategray" stroke="green" stroke-width="2">WEST</text>