Einleitung zu Filtern | |
<< < > >> | > Hauptteil > Elemente > zur Darstellung > Filter > Einleitung |
2. Hauptteil
2.5 Elemente
2.5.5 zur Darstellung
2.5.5.4 Filter
2.5.5.4.1 Einleitung
|
Auch beim Thema Filter sind wieder die Leser, die bereits Erfahrung mit Grafikprogrammen und Design allgemein gesammelt haben, im Vorteil. Filter stellen ein ausserordentlich mächtiges Instrument dar, da sie in SVG zahlreich vorhanden sind, sich vielfach kombinieren lassen und mit Hilfe unterschiedlichster Attribute zu vielfältigen Resultaten führen können. Mit Filtern können Schatten, Lichter, 3D-Effekte, Plastizität, Turbulenzen, Weichzeichner und noch viele andere Effekte mehr erzeugt werden. Im Folgenden wird nur eine Auswahl an Filtern, besser gesagt Filterprimitiven, die in SVG genutzt werden können, präsentiert, denn die Gesamtheit würde den Rahmen des Tutorials sprengen. Eine komplette Auflistung findet sich selbstverständlich beim W3C. In SVG werden Filter wie alle Elemente, die zu Kapitel 2.5.5 "zur Darstellung" gehören, innerhalb von <defs> definiert. Das <filter>-Element umschliesst die Filterprimitive die zusammen den individuellen Filter ergeben (wie gesagt: Filter lassen sich kombinieren!). Über die id des <filter>-Elements kann dann der Filter angewendet werden. Das Element, das den Filter referenzieren will, tut das über das Attribut filter="url(#id_des_Filters)". Die Attribute von <filter> ähneln auch denen der Elemente vorheriger Kapitel: x, y, width und height spannen ein Rechteck auf, in dem der Filter gerendert wird, default-Werte sind x="-10%", y="-10%", width="120%", height="120%". Das Attribut filterUnits kann die Werte userSpaceOnUse und objectBoundingBox besitzen, was diese Werte bedeuten, sollte - wenn nicht längst geschehen - in Kapitel 2.5.5.2 Muster nachgelesen werden. Zudem kann über das Attribut filterRes die Auflösung, genauer gesagt die Anzahl der Pixel, in x- und (optional) y-Richtung angegebene werden. Wird der y-Wert nicht angegeben, gilt der x-Wert für beide Ausdehnungen. Filter können sehr schnell sehr rechenaufwendig werden und die Darstellung dadurch stark verzögern. Die Werte von filterRes, x, y, width und height bestimmen nachhaltig den Rechenaufwand des Filters, hier sollte bei zu langsamer Darstellung angesetzt werden. Einige interessante Filterprimitive - child-Elemente des <filter>-Elements - werden in den folgenden Kapitel 2.5.5.4.2-2.5.5.6 vorgestellt, zuletzt wird dann eine Kombination aus vielen dieser Primitive zu einem komplexen Filter als Beispiel in Kapitel 2.5.5.4.7 beschrieben. |