Key Takeaways

SVG-Filter wenden GPU-beschleunigte visuelle Effekte wie Unschärfe, Schatten und Verzerrung direkt im Browser an
Filterprimitive (feGaussianBlur, feColorMatrix, feTurbulence, etc.) können verkettet werden, um komplexe Effekte zu erzeugen
Kreative Rezepte wie Milchglas, Neon-Leuchten und Prägung werden durch Kombination einfacher Filterprimitive erstellt
Die Performance variiert stark — feColorMatrix ist leichtgewichtig, während feTurbulence rechenintensiv ist
Verwenden Sie CSS-Filter als Fallback für einfache Effekte und reservieren Sie SVG-Filter für fortgeschrittene Kompositionen

Die Kraft der SVG-Filter

SVG-Filter ermöglichen anspruchsvolle visuelle Effekte ohne Rasterbilder. Von einfachen Schatten bis zu komplexen Verzerrungen transformieren Filter Vektorgrafiken auf leistungsstarke Weise.

Übersicht der SVG-Filtereffekte mit Unschärfe, Schatten und Farbtransformationen — SVG-Filter verwandeln einfache Formen in beeindruckende visuelle Kompositionen

Filter-Grundlagen

Filterstruktur

xml

<defs>
  <filter id="myFilter">
    <!-- Filterprimitive hier -->
  </filter>
</defs>

<rect filter="url(#myFilter)" .../>

Filterregion

Filtergrenzen kontrollieren:

xml

<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
  <!-- Erweitert den Filterbereich über das Element hinaus -->
</filter>

Pro Tip: Erweitern Sie immer die Filterregion (z.B. x="-20%"), wenn Sie Unschärfe- oder Schatteneffekte verwenden. Wenn Ihre Filterausgabe abgeschnitten aussieht, ist die Filterregion zu klein.

Gängige Filtereffekte

Unschärfe (feGaussianBlur)

xml

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

Variable Unschärfe:

xml

<!-- Nur horizontale Unschärfe -->
<feGaussianBlur stdDeviation="10 0"/>

<!-- Nur vertikale Unschärfe -->
<feGaussianBlur stdDeviation="0 10"/>

Schlagschatten (feDropShadow)

Einfacher Schatten:

xml

<filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>

Benutzerdefinierter Schatten

Mehr Kontrolle:

xml

<filter id="custom-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feOffset in="blur" dx="4" dy="4" result="offset"/>
  <feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
  <feComposite in="color" in2="offset" operator="in" result="shadow"/>
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Farbeffekte

Farbmatrix (feColorMatrix)

Graustufen-Konvertierung:

xml

<filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

Sepia-Ton:

xml

<filter id="sepia">
  <feColorMatrix type="matrix"
    values="0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0     0     0     1 0"/>
</filter>

Farbton-Drehung:

xml

<filter id="hue-rotate">
  <feColorMatrix type="hueRotate" values="90"/>
</filter>

Farbanpassung

Helligkeit/Kontrast:

xml

<filter id="bright">
  <feComponentTransfer>
    <feFuncR type="linear" slope="1.5" intercept="0"/>
    <feFuncG type="linear" slope="1.5" intercept="0"/>
    <feFuncB type="linear" slope="1.5" intercept="0"/>
  </feComponentTransfer>
</filter>

"

SVG-Filter sind das Photoshop des Browsers — schichten Sie sie klug und Sie können Effekte erzeugen, die sonst schwere Bildbearbeitungssoftware erfordern würden.

— Sara Soueidan, SVG-Expertin

Verschiebung und Verzerrung

Turbulenz

Rauschen erzeugen:

xml

<filter id="turbulence">
  <feTurbulence type="turbulence"
                baseFrequency="0.05"
                numOctaves="2"/>
</filter>

Verschiebungskarte

Verzerrung mit Muster:

xml

<filter id="displace">
  <feTurbulence type="turbulence"
                baseFrequency="0.02"
                numOctaves="3"
                result="noise"/>
  <feDisplacementMap in="SourceGraphic"
                      in2="noise"
                      scale="30"
                      xChannelSelector="R"
                      yChannelSelector="G"/>
</filter>

Beleuchtungseffekte

Diffuse Beleuchtung

3D-ähnliche Beleuchtung:

xml

<filter id="diffuse">
  <feDiffuseLighting lighting-color="#white" surfaceScale="5">
    <fePointLight x="100" y="100" z="200"/>
  </feDiffuseLighting>
</filter>

Spiegelnde Beleuchtung

Glänzende Highlights:

xml

<filter id="specular">
  <feSpecularLighting specularConstant="1"
                       specularExponent="30"
                       lighting-color="white"
                       surfaceScale="5">
    <fePointLight x="150" y="60" z="200"/>
  </feSpecularLighting>
</filter>

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Filter kombinieren

Zusammenführungsoperationen

Ergebnisse überlagern:

xml

<filter id="glow">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Kompositionsoperationen

Mit Operatoren kombinieren:

xml

<filter id="cutout">
  <feImage href="mask.svg" result="mask"/>
  <feComposite in="SourceGraphic"
               in2="mask"
               operator="in"/>
</filter>

Kreative Rezepte

Milchglas

xml

<filter id="frosted">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
  <feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
  <feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
  <feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>

Neon-Leuchten

xml

<filter id="neon">
  <feFlood flood-color="#ff00ff" result="flood"/>
  <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
  <feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Präge-Effekt

xml

<filter id="emboss">
  <feConvolveMatrix
    order="3"
    kernelMatrix="-2 -1 0
                  -1  1 1
                   0  1 2"/>
</filter>

Animierte SVG-Effekte einschließlich Leuchten, Turbulenz und dynamischer Übergänge — Die Animation von SVG-Filtern fügt Tiefe und Interaktivität zu Webgrafiken hinzu

Animation mit Filtern

Animierte Unschärfe

xml

<filter id="animated-blur">
  <feGaussianBlur stdDeviation="0">
    <animate attributeName="stdDeviation"
             values="0;10;0"
             dur="2s"
             repeatCount="indefinite"/>
  </feGaussianBlur>
</filter>

Dynamische Turbulenz

xml

<feTurbulence baseFrequency="0.02">
  <animate attributeName="baseFrequency"
           values="0.01;0.05;0.01"
           dur="5s"
           repeatCount="indefinite"/>
</feTurbulence>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Performance-Überlegungen

Performance-Auswirkungen

Filter-Performance:
feGaussianBlur: Schwer (radiusabhängig)
feColorMatrix: Leicht
feTurbulence: Sehr schwer
feDisplacementMap: Schwer
Verkettete Filter: Kumulativ

Optimierungstipps

Filterregion minimieren
Unschärfe-Radius reduzieren
Verkettete Effekte begrenzen
Statische Filter cachen
CSS-Filter verwenden, wenn möglich

Für einfache Effekte wie Unschärfe, Graustufen oder Schlagschatten ist der CSS-filter deutlich schneller als SVG-Filter, da er hardwarebeschleunigtes Compositing nutzt. Reservieren Sie SVG-Filter für Effekte, die CSS nicht replizieren kann.

CSS-Filter-Alternative

Wenn möglich, verwenden Sie CSS:

css

.blurred {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

Browser-Kompatibilität

Support-Status

Breite Unterstützung:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge

Variable Unterstützung:
- feDisplacementMap
- feTurbulence
- feDiffuseLighting

Fallback-Strategien

css

.element {
  /* Fallback */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@supports (filter: url(#shadow)) {
  .element {
    box-shadow: none;
    filter: url(#shadow);
  }
}

Fazit

SVG-Filter ermöglichen anspruchsvolle Effekte, die mit CSS allein unmöglich sind. Obwohl rechenintensiv, bieten sie präzise Kontrolle über visuelle Behandlungen. Setzen Sie sie gezielt für wirkungsvolle Effekte ein und berücksichtigen Sie dabei immer die Performance und stellen Sie Fallbacks bereit.

Gefilterte Vektor-Effekte erstellen

Filterprimitiv	Effekt	Performance-Kosten
feGaussianBlur	Weiche Unschärfe / Milchglas	Mittel (GPU-beschleunigt)
feColorMatrix	Farbverschiebung, Entsättigung	Niedrig
feTurbulence	Rauschen, organische Texturen	Hoch (Berechnung auf Pixelebene)
feDisplacementMap	Verzerrung, Welleneffekte	Hoch
feDropShadow	Schlagschatten	Niedrig–Mittel

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Quellen & weiterführende Lektüre

MDN Web Docs: SVG-Filtereffekte — Detaillierte Referenz für jede SVG-Filterprimitiv und ihre Attribute
W3C SVG 2: Filtereffekte — Offizielle Spezifikation der SVG-Filter-Pipeline und des Compositing-Modells
CSS-Tricks: SVG-Filter — Visuelle Beispiele und Rezepte für kreative SVG-Filter-Kombinationen
Smashing Magazine: SVG-Filter — Fortgeschrittene Tutorials zum Verketten von Filterprimitiven für Produktions-Visuals

Key Takeaways

Filterstruktur

Filterregion

Unschärfe (feGaussianBlur)

Schlagschatten (feDropShadow)

Benutzerdefinierter Schatten

Farbmatrix (feColorMatrix)

Farbanpassung

Turbulenz

Verschiebungskarte

Diffuse Beleuchtung

Spiegelnde Beleuchtung

Zusammenführungsoperationen

Kompositionsoperationen

Milchglas

Neon-Leuchten

Präge-Effekt

Animierte Unschärfe

Dynamische Turbulenz

Performance-Auswirkungen

Optimierungstipps

CSS-Filter-Alternative

Support-Status

Fallback-Strategien

Try VectoSolve Now

Related articles

Wie wir die Ladezeit um 70 % reduziert haben mit SVG-Optimierung: eine echte Fallstudie

Leitfaden für Webentwickler: Best Practices für SVG-Integration

Druckfertige Vektoren erstellen: Vom Bildschirm zum professionellen Druck

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?