Filter in SVG

Der Begriff filter ist mehrdeutig.
Weitere Bedeutungen sind unter Filter aufgeführt.

Mit Grafikfiltern kann man die Darstellung eines SVG- oder HTML-Elements verändern, beispielsweise durch Unschärfe, Veränderung der Farbintensität, Verzerrungen oder Beleuchtungseffekte.

Typischerweise werden Elemente, einschließlich ihrer Kind-Elemente, als RGB-Bild in einen Puffer gezeichnet und dieser Puffer dann in die Darstellung des übergeordneten Elements integriert (Compositing). Grafikfilter dienen dazu, diesen Puffer vor dem Compositing noch einmal zu modifizieren. Welche Pixelauflösung dieser Puffer hat, hängt vom verwendeten Gerät ab. In SVG 1.1 konnte die Auflösung noch mit der filterRes-Eigenschaft beeinflusst werden, mittlerweile ist sie missbilligt und wird in der Filter Effects-Spezifikation^[1] nicht mehr erwähnt. Dort steht nur noch

To provide high quality rendering, all filter primitives should operate in a device dependent coordinate space, the operating coordinate space, taking device pixel density, user space transformations and zooming into account.

Ursprünglich wurden Filter für die Verwendung in SVG entwickelt. Da aber HTML Elemente ebenfalls über RGB-Puffer gezeichnet werden, lag der Gedanke nahe, die Filterspezifikation aus SVG herauszulösen und eine neue, gemeinsame Spezifikation zu erstellen. In einem SVG-Element oder -Dokument erstellte Filter können so mittels einer CSS-Eigenschaft auch auf HTML-Elemente angewendet werden.

Einbinden
- SVG: filter-Attribut
- CSS: filter-Eigenschaft
- mehrere Filter
Anwendung in CSS
- CSS-Eigenschaft
- CSS Filter-Funktionen
  - blur()
  - brightness()
  - contrast()
  - drop-shadow()
  - grayscale()
  - hue-rotate()
  - invert()
  - opacity()
  - sepia()
  - saturate()
- CSS-Animationen
Eigene Filter
- Erstellen
- Einbinden
- Filtereffekte verketten
- Filterregionen
Licht und Schatten

Realistische Beleuchtungs- und Schattierungseffekte mit SVG
Bildmanipulation

Grafiken direkt im Browser kreativ verändern
Wasser und Wolken mit feTurbulence