Datenschutz & Speicher

Wir nutzen notwendige Browser-Speicher fuer Sprache, Login-Zustand und Editor-Ablauf. Zuletzt verwendete Schriften und Symbole speichern wir nur, wenn du Komfortspeicher erlaubst.

Kein Marketing-Tracking, keine Werbe-Cookies.

SVG-Filter und Effekte: Schatten, Blur und mehr

Fortgeschrittene SVG-Techniken für beeindruckende Grafiken

SVG & Vektorgrafik

SVG-Filter ermöglichen Effekte, die sonst nur in Bildbearbeitungsprogrammen möglich wären — direkt im Browser, skalierbar und performant. Von Weichzeichnern über Schatten bis hin zu Farbmanipulationen.

Generierte Grafik zum Artikel SVG-Filter und Effekte: Schatten, Blur und mehr

So funktionieren SVG-Filter

Filter werden in einem <defs>-Block definiert und per filter="url(#id)" auf Elemente angewendet:

<defs>
  <filter id="shadow">
    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3" />
  </filter>
</defs>
<text filter="url(#shadow)">Logo</text>

Die wichtigsten Filter-Primitives

  • feGaussianBlur — Weichzeichner
  • feDropShadow — Schlagschatten
  • feColorMatrix — Farbmanipulation (Graustufen, Sättigung, Hue-Rotation)
  • feBlend — Zwei Grafiken überblenden (multiply, screen, etc.)
  • feComposite — Boolesche Operationen (in, out, atop, xor)
  • feMorphology — Erode/Dilate (dünner/dicker machen)
  • feTurbulence — Rauschen und organische Texturen

Praxisbeispiele für Logos

Subtiler Schatten: Gibt dem Logo Tiefe auf hellen Hintergründen.

Glow-Effekt: feGaussianBlur + feMerge für einen leuchtenden Schein.

Gravur-Effekt: feMorphology + feComposite für einen eingeprägten Look.

Performance-Hinweise

SVG-Filter können resource-intensiv sein:

  • Vermeide große stdDeviation-Werte (Blur-Radius)
  • Setze filterUnits und primitiveUnits bewusst
  • Limitiere die Filter-Region mit x, y, width, height
  • Teste auf mobilen Geräten

SVG-Filter eröffnen kreative Möglichkeiten direkt im Browser. Nutze sie sparsam und gezielt — sie können dein Logo von der Masse abheben. Starte mit dem Logo Editor.

Bereit, dein Logo zu erstellen?

Kostenloser visueller Editor mit SVG-Export.

Verwandte Artikel