Filterelement <filter>
Mit diesem Element wird eine Gruppe von Filtermöglichkeiten angeboten. Obwohl es wie ein gruppierendes Element daherkommt, wird es anscheinend nicht als ContainerElement bezeichnet. Was solls, ich will ja nur erst einmal eine Schematik erkennen.
Dazu gehört, dass Filter selbst nicht dargestellt werden. Das Ergebnis wird GrafikElementen übergeben. Selbst wird die Notation in der Definitionsgruppe abgelegt.
| <feBlend> Überblendung | |
| Alphabetisch vorn, also auch als erstes vorgenommen. Auh weia!
So beginnt man zwar nicht, allein ich kann nicht anders! Und somit (Stand: 6.2.16) kommentiere ich zuvorderst die Browser. Erste Darstellung habe ich versucht, zweite ist von: w3.org/TR/SVG/filters.html#feBlendElement. Änderung an der Schriftfarbe in grün - aus gutem Grund. Edge: Keine Verbesserung zu MSIE Chrome: Stellt die additive (screen) als auch subtraktive (multiply) Farbmischung dar. Scheitert aber im 2. Beispiel. Firefox: Scheitert an den ersten zwei! MSIE: Kann mit der ersten Darstellung nichts anfangen. Dafür ist er der einzige, der im 2. Beispiel das additive und subtraktive Farbmischen über dem Farbverlauf umsetzt. Im dritten geht garnichts. Opera: Identisch zu Chrome Safari (Windows): Ähnlich wie Firefox, gibt ohne Filtereffekte allerdings wenigsten den Text für das 2. Beipiel aus. Was soll ich dazu äußern. Wenn im ersten Beispiel nur Kreise <circle> - kein jpg oder png vorkommen und dies nur Opera und Chrome rendern, mag ich das Problem bei mir orten. Im 2. Beispiel ist außer einer kleinen Änderung nichts von mir. So sind die Ergebnisse doch unbefriedigend. Den QuellCode (eins&zwei) sowie (drei) stelle ich noch vor und so jemand Probleme erkennt und Hilfe weiß, kann ich nur dankbar sein. Vielleicht müssen aber nur die Brausemacher nachrüsten. |
Einen hab ich doch noch: von wiki.selfhtml.org entlehnt Den hier links! Jetzt scheint auch Firefox mitspielen zu wollen. Soll das wirklich nur daran liegen, dass es sich hierbei um tatsächliche images (jpg und darüberliegendes png) handelt. Chrome und Opera überzeugen nur mit erstem und dritten Beispiel. Safari ist in Bezug auf SVG wohl nichts für Windows. Insgesamt kommt keine Freude auf! Keine der drei Beispiele werden von den getesteten Browsern gleichermaßen gerendert. :-(( Schade! |
| <feColorMatrix> Farbtransformation | |
| Hier wird eine Farbtransformation inform einer Matrix vorgenommen. Zur Anwendung kommen die Attribute type=
"matrix" - Werteliste aus 20 Zahlen eine 4x5 Matrix für cyan, magenta, yellow und ja (?!?) weiteren 5 Ziffern, wovon eine abweichend von Null sein muss, sonst wird nichts abgebildet. Das war schon eine Überraschung nicht den RGB-Farbraum vorzufinden und zu definieren. Anders lautende Angaben sind einfach irreführend und es dauert bis man das mitbekommt! "saturate" - Sättigung "hueRotate" - Farbtondrehung "luminanceToAlpha" - Aufhellung des Alphakanals - ? Firefox ? |
|
| Da sich das Ganze nicht als meine Spielwiese entwickeln will, lass ich weiteres hierzu. Gute Demos für Images zum Gefallen für Fotografen konnte ich nicht entwickeln. Vielleicht noch nicht! | |
| <feComponentTransfer> | |
| Container für die Kindelemente: feFuncR feFuncG feFuncB feFuncA
Für jeden Bildpunkt nebst Alphakanal können die Werte neu bestimmt werden. Attribute: identity, table, discrete, linear, gamma identity: ändert nichts table: Wertefolge für eine lineare Funktion, die im Attribut tableValues="...." notiert werden. discrete: Wertefolge für eine Treppenfunktion, die im Attribut tableValues="...." notiert werden. linear: lineare Wertefolge, die in den Attributen slope="." und intercept="..." notiert werden. gamma: Exponentialfunktion, die in den Attributen amplitude=".", exponent="." und offset="." bestimmt werden. Außer für Images bin ich bemüht einen Sinn auszumachen. Bleibe ich also schon wieder an den JPGs und PNGs hängen. Wenn da nicht wenigsten eine Isohelie rauskommt, spar ich mir weiteres. NA BITTE! Geht doch! Und deshalb gibts auch was zum Spielen. Drei Werte sind für die Tabelle voreingestellt, zwei weitere können dazugezogen werden. Alle beziehen sich auf eine gleiche Verteilung der RGB-Kanäle. Den Alpha-Kanal habe ich außer Acht gelassen. Jedem Farbkanal könnten unterschiedliche Werte zugeordnet werden, ich habe aber genug gespielt. Hier lässt sich auch aus einem kleinformatigen Image eine Größenänderung nach oben gut bewerkstelligen, ohne spürbare Qualitätsverschlechterung. Es wird halt ein Poster! |
|
|
|
Oben ein Referenzfarbverlauf, dann der Filter für die Aufteilung in Farbstufen, darunter auf Bild angewendet.
Das kommt dem Posterisieren schon sehr nah, wenn es nicht sogar auf gleicher Schematik in Bildbearbeitungsprogrammen basiert. Je größer die Zahlenfolge in der Tabelle, um so differenzierter wird die Darstellung. Ansicht des Quellcodes für diesen Filter |
| <feComposite> | |
| Verarbeitet zwei Eingangssignale (in und in2). Diese können ein Ergebnis (result) aus einem anderem Filter sein, sowie die Definitionen: SourceAlpha | SourceGraphic | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint in="..." Filter in2="..." Filter result="..." Ausgabe Operatoren: over, in, out, atop, xor, arithmetic arithmetic benötigt die weiteren Attribute k1, k2, k3 und k4, 0 ist voreingestellt. Vorab: Zwei Eingangssignale werden mit einer Zusammensetzungsoperation ausgeführt. Soweit so gut. Was soll unter Eingangssignal verstanden sein. Ich zitiere mal: MDN: This filter primitive performs the combination of two input images pixel-wise in image space / Dieser primitive Filter führt die Kombination von zwei Eingangsbildern pixelweise im Bildraum aus. Ok, sind nun nur JPG- oder PNG-Images gemeint? Nein, es werden auch Elemente des SVG verarbeitet - nur - wenn keine Images (jpg oder png) als Inputs dienen, spielen weder Firefox noch MSIE/Edge mit. Ansicht des Quellcodes Browsertest des Beispieles |
Zur Wirkungsweise von arithmetic die Schieberegler für k1 bis k4 |
| <feConvolveMatrix> | |
| Mit diesem Filter sind Effekte möglich wie prägen, anfasen, scharfzeichnen oder Kanten betonen. Das kann man natürlich auch auf Images JPG oder PNG anwenden - ja schön.
Es ergeben sich solche Effekte wie Solarisation (Kantenbetonen). Das macht man aber mit einem Bildbearbeitungsprogramm. Das Image wird möglichst 1:1 eingefügt. Da ist nichts mehr mit Skalierung!!! Was soll das. Außer meinem kleinen Feuerwehrmännel(8.), das geschärft wurde, beschäftige ich mich mit den Grafikelementen. (1.) Die Filterbezeichnung und (2.) - Schärfen (3.)(5.) - Prägen, zitiert aus wiki.selfhtml.org/wiki/FeConvolveMatrix (4.) - Kantenbetonung, beim Versuch mit Images erinnerte mich das an den Solarisationseffekt. (6.) - angelehnt an Prägen (Merkwürdigkeit!) (7.) - tja, das soll auch sowas wie ein Körper sein. Und was ist an 6. merkwürdig? Wird in Zeile 16 (Quellcode) blau in gelb getauscht wird alles schwarz, dann muss divisor="1" entfernt werden. Ansicht des Quellcodes Fazit: Bis man sich durch die Matrix geackert hat, um überhaupt zu verstehen, was da passiert, ist das mit Photoshop erledigt. Wer hat schon die Zeit dazu! |
|
| <feDiffuseLighting> | |
| Filter für eine diffuse Beleuchtung. Die Kindelemente <fePointLight> Punktlicht, <feSpotLight> Scheinwerfer und <feDistantLight> entferntes Licht erzeugen namesgebend ihre Eigenschaft. <feComposite> als weiteres Kindelement mit dem operator="arithmetic" wird benötigt, um die Ausgabe des verwendeten Filters zu mischen. Von den ersten beiden Darstellungen kann man sich gutes Bild machen. Die dritte Darstellung bringt mit der gewählten Bedingung (rote Lichtquelle auf gelbem Kreis) nichts. Attribute: in="..." Filter in2="..." Filter diffuseConstant="0.7" Berechnung der Beleuchtung kernelUnitLength="1" Auflösung (natürliche Zahl) für x oder xy surfaceScale="10" Höhe der Beleuchtungsoberfläche lighting-color="farbangabe" Farbe der Beleuchtungsquelle result="..." Übergabebegriff Ansicht des Quellcodes Für die Attribute diffuseConstant, kernelUnitLength und surfaceScale habe ich lediglich für das Kindelement <feDistantLight> etwas nachvollziehbares feststellen können, wenn auch <feColorMatrix> zum Einsatz kommt.. Die erzeugten Effekte werden bei Bildvorlagen plausibel wie im folgenden Beispiel. |
<fePointLight> <feSpotLight> <feDistantLight> Rote Beleuchtung auf gelber Kuller Die Attribute diffuseConstant=".2" surfaceScale="10" kernelUnitLength="10" scheinen hier keinen Sinn zu ergeben. |
Ein Bild herbeizunehmen und das wie die Arbeit eines Stukkateurs aussehen zu lassen, ist dann wieder ganz lustig.
<feColorMatrix> als weiteres Kindelement dem Filter <feDiffuseLighting> vorangestellt, bringt dann den gewünschten Effekt. Wird <feColorMatrix> danach notiert, erhält man ein Schwarz/Weiß-Negativ. Was es so alles gibt! Ansicht des Quellcodes Mit Ausname von Firefox werden von den Browsern vergleichbare Ergebnisse erzielt. |
|
|
Der Lichteinfall von halb elf entspricht azimuth="225". Die adäquate Winkelangabe von "-135" wird nur von Firefox nicht akzeptiert. Licht kommt dann von drei Uhr. Naja, muss man halt nur wissen! Für diffuseConstant=".2" gilt ebenso eine veränderte Wertvergabe von ".7" für vergleichbares Aussehen zu anderen Browsern. Ist vielleicht wichtig, wenn daraus eine Maske erstellt werden soll. |
regelbare Attributewerte der Kindelemente:
Und wieder muss ich auf Browserverhalten hinweisen: Chrome und Opera ignorieren Veränderungen an kernelUnitLength. |
| <feDisplacementMap> | |
| Ich suche noch eine sinnvolle Anwendung | |
| <feFlood> | |
| Um einen eventuellen Farbstich zu beseitigen? Ich habe kein befriedigendes Beispiel gefunden. | |
| <feGaussianBlur> | |
| Gausscher Weichzeichner
Attribute: stdDeviation - Abweichung zur Vorlage. Es sind nur positive Ganzzahlen anzuwenden. Mit zwei Werten stdDeviation="10 5" wird die Abweichung ungleichmäßig erzeugt, mit stdDeviation="5" natürlich gleichmäßig. in bestimmt wie gefiltert wird: SourceAlpha, SourceGraphic (und ?). result muss als Referenz angegeben werden, wenn weitere Filter das Ergebnis verarbeiten sollen. oben: nur ein Schriftzug in="SourceAlpha" 2. der senkrechte Strich in="SourceGraphic" - die Farbigkeit wird übernommen MSIE scheitert bei dem Versuch bei wagerechten als auch senkrechten Strichen diesen Effekt zu rendern. 3. Kreise übereinander gelegt, der untere: in="SourceAlpha" mit unterschiedlicher Ausdehnung stdDeviation="4 12" 4. Kreise übereinander gelegt, der untere: in="StrokePaint"; stroke="DarkGreen" für den Kreis selbst. MSIE füllt den Filterraum, Firefox rendert nicht, Safari spielt sowieso nicht mit, braucht man garnicht weiter erwähnen, Chrome und Opera rendern dies, wie erwartet? Der Kreis hat eine weiße Füllung! Das wird also verarbeitet wie SourceGraphic 5. Rechteck (Effekt eingebunden) in="FillPaint" 6. Rechteck (Effekt eingebunden) in="FillPaint" Die von Alpha und Graphic abweichenden Inputs stellen sich doch anscheinend wie SourceGraphic dar. 5.B nimmt den Rand und den teiltransparenten Hintergrund mit. Im 6.B hatte ich erwartet, dass geltendes fill="none" für <feGaussianBlur in="FillPaint" .../> zumindest für Merkwürdigkeiten sorgt. Das merkt für beide aber nur MSIE. Firefox füllt wieder den Filterraum! OK, abweichende Inputs sollten dann vielleicht doch nicht verwendet werden. Gegenteiliges war nicht zu erkunden. |
Ansicht des Quellcodes |
| <feImage> | |
| Im Definitionsbereich wird ein Image eingefügt. Chrome und Opera refenzieren auch SVG-Fragmente. | |
| <feMerge> | |
| Zusammenfügen mehrerer Inputs. Jeder Filter wird über das Attribut result=".." je einem Kindelement von <feMerge> dem <feMergeNode> referenziert. Gerendert wird in der Reihenfolge der Notierung.
Ansicht des Quellcodes |
|
| <feMergeNode> | |
| Kindelement von <feMerge> | |
| <feMorphology> | |
| <feOffset> | |
| <feSpecularLighting> | |
| beleutet ein Input-Bild mit reflektierendem Licht unter Verwendung des Alpha-Kanals als Relief. Relieftiefe, die Intensität, Glanz des Lichts und Lichtfarbe werden durch Attribute beeinflusst. Die Lichtfarbe ist ohne Angabe: 'white'. Attribute: surfaceScale (Relieftiefe): 1 normal, > 1 Relief verstärken, < 1 Relief mindern specularConstant (Lichtintensität) Integer > 0 specularExponent (Glanz) 1 >= Integer <= 128 style="lighting-color: white || #fff" (Lichtfarbe) als zusätzliche Angabe, andere Farben nach Wunsch in="" und result="" Um die Ausgabe des Beleuchtungsfilters mit dem Original zu verschmelzen, muss feComposite angewendet werden. |
|
| <feTile> | |
| <feTurbulence> | |
| Zusammenfassung:
Mit ganz wenigen Ausnahmen sind die Filter für den Webeinsatz geeignet und das nach Jahren der Einführung des SVG-Modells. So bleibt offen, ob Browser noch soweit nachgerüstet werden, dass sich die Einarbeitung in die Materie überhaupt lohnt. Dies hätte zeitnah geschehen müssen. Ich sehe den Zeitpunkt als verpasst, da CSS3 mit weniger Einarbeitung hier besser punkten kann. Als Ausnahme betrachte ich die Verwendung von Images. In diesem Falle erscheint mir der Einsatz sinnvoll. Ansonsten bleibt mir auch weiterhin unklar, was Images mit skalierbarer Vektorgrafik zu tun haben sollte. | |