Grafische Effekte mit SVG-Filtern

Teil 3: Grafische Effekte · Kapitel 9 von 12 · Aktualisiert am 10. Oktober 2026 · 4 Minuten Lesezeit

Filter arbeiten wie eine kleine Bildbearbeitung im Browser. Sie nehmen das, was eine Form zeichnet, als Pixelbild und schicken es durch eine Kette von Bearbeitungsschritten.

Aufbau eines Filters

Ein Filter steht in einem <filter>-Element mit einer id und wird mit filter="url(#id)" auf eine Form oder Gruppe angewendet. Im Inneren stehen sogenannte Filterprimitive, erkennbar am Präfix fe für „filter effect“. Jedes Primitiv bekommt ein Eingangsbild über in und kann sein Ergebnis mit result benennen, damit spätere Schritte darauf zugreifen.

Zwei Eingänge stehen immer zur Verfügung: SourceGraphic ist die Form selbst mit ihren Farben, SourceAlpha nur ihre Silhouette in Schwarz. Ohne Angabe von in nimmt ein Primitiv das Ergebnis des vorherigen Schritts, beim ersten Schritt die Ausgangsgrafik.

Weichzeichnen mit feGaussianBlur

Der Gaußsche Weichzeichner ist das meistgenutzte Primitiv. Der Wert stdDeviation bestimmt die Stärke. Mit zwei Werten, etwa stdDeviation="8 0", wird nur in eine Richtung verwischt, was nach Bewegungsunschärfe aussieht.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 110" width="330" height="110">
  <defs>
    <polygon id="fi-stern" points="0,-40 11,-12 40,-12 17,6 26,36 0,18 -26,36 -17,6 -40,-12 -11,-12" fill="#1f5fd1"/>
    <filter id="fi-weich"><feGaussianBlur stdDeviation="3"/></filter>
    <filter id="fi-wisch" x="-40%" width="180%"><feGaussianBlur stdDeviation="8 0"/></filter>
  </defs>
  <use href="#fi-stern" x="55" y="55"/>
  <use href="#fi-stern" x="165" y="55" filter="url(#fi-weich)"/>
  <use href="#fi-stern" x="275" y="55" filter="url(#fi-wisch)"/>
</svg>

Der Filterbereich ist standardmäßig nur etwas größer als die Form, nämlich zehn Prozent in jede Richtung. Bei starker Unschärfe wird der Effekt deshalb an den Rändern hart abgeschnitten. Mit x, y, width und height am filter-Element vergrößerst du den Bereich, wie beim dritten Stern.

Schatten

Früher brauchte ein Schlagschatten eine Kette aus vier Primitiven: Silhouette weichzeichnen, verschieben, einfärben und unter das Original legen. Heute gibt es dafür feDropShadow mit dx, dy, stdDeviation und einer Farbe. Die lange Form lohnt sich trotzdem zu kennen, weil sie zeigt, wie Primitive zusammenarbeiten.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
  <defs>
    <filter id="fi-schatten-kurz">
      <feDropShadow dx="5" dy="6" stdDeviation="4" flood-color="#14171c" flood-opacity="0.45"/>
    </filter>
    <filter id="fi-schatten-lang">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weich"/>
      <feOffset in="weich" dx="5" dy="6" result="versetzt"/>
      <feFlood flood-color="#14171c" flood-opacity="0.45" result="farbe"/>
      <feComposite in="farbe" in2="versetzt" operator="in" result="schatten"/>
      <feMerge>
        <feMergeNode in="schatten"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="25" y="20" width="110" height="70" rx="8" fill="#ffe3d3" stroke="#c2410c" stroke-width="2" filter="url(#fi-schatten-kurz)"/>
  <rect x="190" y="20" width="110" height="70" rx="8" fill="#ffe3d3" stroke="#c2410c" stroke-width="2" filter="url(#fi-schatten-lang)"/>
</svg>

Rauschen mit feTurbulence

feTurbulence erzeugt aus dem Nichts eine Textur auf Grundlage der Perlin-Noise-Funktion, einem Verfahren, das Ken Perlin in den 1980er-Jahren für Computergrafik im Film entwickelt hat. Mit type="fractalNoise" entstehen weiche, wolkenartige Strukturen, mit turbulence eher Adern wie in Marmor. baseFrequency bestimmt die Körnung, numOctaves die Feinheit der Details und seed den Zufallswert.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
  <defs>
    <filter id="fi-wolken" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="4" seed="3"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0.12  0 0 0 0 0.37  0 0 0 0 0.82  0 0 0 1.6 -0.3"/>
    </filter>
    <filter id="fi-marmor" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="turbulence" baseFrequency="0.015 0.05" numOctaves="3" seed="8"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0.76  0 0 0 0 0.25  0 0 0 0 0.05  0 0 0 2 -0.2"/>
    </filter>
  </defs>
  <rect x="10" y="10" width="145" height="100" fill="#fff"/>
  <rect x="10" y="10" width="145" height="100" filter="url(#fi-wolken)"/>
  <rect x="175" y="10" width="145" height="100" fill="#fff"/>
  <rect x="175" y="10" width="145" height="100" filter="url(#fi-marmor)"/>
</svg>

Verzerren mit feDisplacementMap

Dieses Primitiv verrechnet zwei Bilder: Es verschiebt die Pixel des ersten Eingangs um Beträge, die es aus den Farbkanälen des zweiten Eingangs liest. Kombiniert mit Rauschen aus feTurbulence entstehen so Effekte wie Wasser, Hitzeflimmern oder ausgefranste Kanten. scale steuert die Stärke, xChannelSelector und yChannelSelector legen fest, welcher Farbkanal die Verschiebung bestimmt.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 100" width="330" height="100">
  <defs>
    <filter id="fi-welle">
      <feTurbulence type="turbulence" baseFrequency="0.02 0.08" numOctaves="2" seed="2" result="rauschen"/>
      <feDisplacementMap in="SourceGraphic" in2="rauschen" scale="12" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <text x="165" y="64" text-anchor="middle" font-family="Georgia, serif" font-size="44" font-weight="bold" fill="#1f5fd1" filter="url(#fi-welle)">Wasserspiegel</text>
</svg>

Farben verändern mit feColorMatrix

feColorMatrix rechnet jede Farbe mit einer Matrix um. Für häufige Fälle gibt es Kurzformen: type="saturate" mit einem Wert von 0 (Graustufen) bis 1 (unverändert), type="hueRotate" mit einem Winkel und type="luminanceToAlpha", das Helligkeit in Transparenz umwandelt. Die volle Matrix mit 20 Werten erlaubt beliebige Umfärbungen, wie bei den Texturen oben.

Eine Liste aller Primitive mit ihren Attributen bietet die Referenz bei MDN. Filter lassen sich auch animieren, etwa ein Weichzeichner, der beim Erscheinen nachlässt. Wie Werte über die Zeit verändert werden, zeigt das Kapitel Animation.