SVG -Filtereffekte
| Filtereffektmodul Level 1 | |
 Holzstextur und Dropschatten simuliert mit SVG -Filter | |
| Status | Arbeitsentwurf (WD) |
|---|---|
| Jahr begann | 15. Oktober 2012 |
| Erstmals veröffentlicht | 15. Oktober 2012 |
| Letzte Version | 18. Dezember 2018 |
| Vorschau -Version | Entwurf des Herausgebers 30. Oktober 2019 |
| Organisation | W3c |
| Komitee | CSS -Arbeitsgruppe |
| Redakteure |
|
| Domain | Visuelle Effekte |
SVG -Filtereffekte sind Effekte angewendet auf Skalierbare Vektorgrafiken (SVG) Dateien. SVG ist ein offener Standard XML -Format für zweidimensionale Vektorgrafiken wie definiert durch die World Wide Web Konsortium (W3C). EIN Filtereffekt besteht aus einer Reihe von Grafikoperationen, die auf eine bestimmte Quellvektorgrafik angewendet werden, um eine modifizierte Erstellung zu erstellen bitmapped Ergebnis.
Filtereffekte werden durch Filterelemente definiert. Das filter Die Eigenschaft wird auf einem Containerelement oder einem Grafikelement eingestellt, um einen Filtereffekt darauf anzuwenden. Jeder filter Das Element enthält eine Reihe von Filterprimitiven als seine Kinder. Jeder Filterprimitive führt eine einzelne grundlegende grafische Operation aus (z. B. a Gaußsche Unschärfe oder einen Beleuchtungseffekt) auf ein oder mehrere Eingänge, wodurch ein grafisches Ergebnis erzeugt wird. Da die meisten Filterprimitive eine Form der Bildverarbeitung darstellen, ist die Ausgabe eines Filterprimitiven in den meisten Fällen einzeln RGBA Bitmap -Image (es wird jedoch regeneriert, wenn eine höhere Auflösung aufgerufen wird).
Die ursprüngliche Quellgrafik oder das Ergebnis eines Filterprimitiven kann als Eingabe in einen oder mehrere andere Filterprimitive verwendet werden. Eine gemeinsame Anwendung besteht darin, die Quellgrafik mehrmals zu verwenden. Ein einfacher Filter kann beispielsweise eine Grafik für zwei ersetzen, indem eine schwarze Kopie der ursprünglichen Quellgrafik hinzugefügt wird, aber ein Versatz zum Erstellen von a Schatten fallen. Tatsächlich gibt es jetzt zwei Grafikschichten, beide mit derselben ursprünglichen Quellgrafik.
SVG -Filterprimitive
| Texturen: | Feturbulenzen, FediffusLighting, Fedistantlight, Fecomposit und Feblend |
| Schatten: | Fegaussianblur, Feoffset, Fecolormatrix und Feblend |
In der folgenden Tabelle sind die Filterprimitiven aufgeführt, die sowohl in SVG 1.0 als auch in SVG 1.1 verfügbar sind. SVG Tiny unterstützt die Filtereffekte nicht SVG Basic Unterstützt nur die gezeigten Filterprimitive:
| Name | Element | SVG Basic |
|---|---|---|
| Mischung | Feblend | Ja |
| Farbmatrix | Fecolormatrix | Ja |
| Komponentenübertragung | fecomponenttransfer | Ja |
| Zusammengesetzt | Fecomposit | Ja |
| Convolve Matrix | feconvolvematrix | Nein |
| Diffuse Beleuchtung | FediffusLighting | Nein |
| Verdrängungskarte | FediSplacementMap | Nein |
| Flut | Feflood | Ja |
| Gaußsche Unschärfe | Fegaussianblur | Ja |
| Bild | Feimage | Ja |
| Verschmelzen | Femerge | Ja |
| Morphologie | Geforphologie | Nein |
| Offset | Feoffset | Ja |
| Spiegelbeleuchtung | Fespkularlicht | Nein |
| Fliese | Fettlähte | Ja |
| Turbulenz | Feturbulenzen | Nein |
Der aktuelle Entwurf des Filtereffektmoduls Level 1 fügt einen Filterprimitiv für hinzu Schatten fallen. Dieser primitive, Fedropshadow, ist nur eine Abkürzung für eine Kombination anderer Filterprimitive.[1]
Rahmen für die Anwendung eines Filters
xmlns ="http://www.w3.org/2000/svg" Version ="1.1" viewbox ="0 0 400 300"> id ="Afilter"> x ="10" y ="100" filter ="URL (#afilter)">ein Filter angewendet Externe Links
- W3C SVG -Seite Spezifikationen, Liste der Implementierungen
- W3C SVG Primer: Filter W3C Primer (Entwurf) Kapitel und Beispiele in Bezug auf Filter.
- Fildrop Ein Satz benutzerdefinierter SVG -Filtereffekte und Generatorfiltereffekte
- SVG Filter Builder Ein interaktives, visuelles SVG -Filterprogrammierwerkzeug, mit dem sowohl zum Visualisieren vorhandener Filter (durch Hochladen eines SVG) als auch zum Entwerfen Ihrer eigenen von Grund auf und gespeichert werden können.