SVG/ Effekte

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |

Filtereffekte mit SVG

SVG-Filter sind ein mächtiges Werkzeug, um in SVG Licht und Schatten, einfache 3D-Effekte, Plastizität, Weichzeichner und vieles mehr zu realisieren. Filter lassen sich beliebig verschachteln und kombinieren.

Ausgehend von darstellbaren SVG-Elementen, allgemeiner einer Quellgraphik, wird die graphische Repräsentation für einen Filtereffekt in einer Zwischenablage abgelegt. Von solch einer Vorlage werden Farbkanäle und Transparenz verwendet, um die Präsentation nach der Anwendung des Filters zu berechnen, welcher also eine Änderung der Präsentation bewirkt.

Filter sind so definiert, dass ein Autor sehr leicht die inhaltliche Struktur und Information des Dokumentes beibehalten und trotzdem die graphische Präsentation des Inhaltes mit Filtern 'aufhübschen' kann. Ähnlich wie bei Stilvorlagen und Skripten liegt der Trick darin, das Dokument mit der eigentlichen inhaltlichen Information zunächst komplett und ohne Einsatz von Filtern fertigzustellen und dann die Filter in einem zweiten Schritt hinzuzufügen. So bleibt das Dokument und die beabsichtigte Information, vor allem Textinhalt auch mit solchen Darstellungsprogrammen zugänglich, die keine Filter interpretieren.

Weil Filtereffekte praktisch pixelweise in der Auflösung des Bildschirmes berechnet werden müssen, ist dies für ein Darstellungsprogramm eine vergleichsweise anspruchsvolle Aufgabe, welche hohe Anforderungen an den Prozessor stellen kann. Nicht immer haben die Darstellungsprogramme auch einen Zugriff auf leistungsfähige Graphikprozessoren, die derartige Filter viel effektiver berechnen können als herkömmliche Prozessoren, was eine weitere Komplikation darstellt.

Daher können Filtereffekte (eventuell auch noch kombiniert mit Animationen oder Skripten) Darstellungsprogramme auf alten Rechnern oder mobilen Geräten schnell überfordern, weswegen Filter in den dafür gedachten Profilen gar nicht oder nur eingeschränkt verfügbar sind. Damit auch mit diesen Geräten eine Darstellung von Dokumenten sinnvoll möglich ist, welche Filter verwenden, ist dabei immer bereits beschriebenes Vorgehen zu empfehlen, bei dem der Inhalt auch ohne Interpretation von Filtern verfügbar bleibt.

Folgendes Beispiel zeigt, wie sich ein Filter auf eine Quellgraphik auswirkt. Das Beispiel ähnelt dem Symbol für dieses Buch, oben sind die Ausgangselemente ohne Filter dargestellt, darunter nach Anwendung einiger Filtereffekte:

Ungefiltertes und gefiltertes SVG-Buch-Symbol

In den tiny-Varianten von SVG sind Filter nicht vorgesehen, in der basic-Variante von SVG 1.1 werden nur einige definiert. Nur die Vollversion von SVG 1.1 bietet alle Möglichkeiten.

Funktion	Elemente	SVG Basic
Kombination, Überblendung	feBlend	Ja
Farb-Matrix	feColorMatrix	Ja
Farbkanaltransferfunktionen	feComponentTransfer, feFuncR, feFuncG, feFuncB, feFuncA	Ja
Komposition	feComposite	Ja
Faltung	feConvolveMatrix	Nein
Diffuse Beleuchtung	feDiffuseLighting	Nein
Lokale Verschiebung	feDisplacementMap	Nein
Gleichmäßige Füllung	feFlood	Ja
Gaußscher Weichzeichner	feGaussianBlur	Ja
Bild einfügen	feImage	Ja
Zusammenfügen, fusionieren	feMerge, feMergeNode	Ja
Verdicken oder verdünnen	feMorphology	Nein
Räumlicher Versatz	feOffset	Ja
Glanzlicht	feSpecularLighting	Nein
Kacheln	feTile	Ja
Turbulenz	feTurbulence	Nein

Filtersystem für Kameras

Als nicht direkt dargestellte Elemente sollten SVG-Filter innerhalb des Elementes defs notiert werden. Die jeweiligen Einzelfilter sind im Element filter untergebracht. Soll ein derart definierter Filter auf ein graphisches Element oder ein Gruppierungselement angewendet werden, so wird dafür die Eigenschaft oder das Präsentationsattribut filter bei jeweiligen Element verwendet, um den Filter zu referenzieren.

Ein Filter in SVG hat eine gewisse Analogie zu einem Filter in der Photographie, als eine Glasplatte, die vor das Objektiv geschraubt oder gehalten wird, um einen bestimmten optischen Effekt zu erreichen.

Die Ausgabe eines Filters ist eine Pixelgraphik, die allerdings je nach Vergrößerung neu berechnet wird, so dass ein pixelige Wiedergabe weitestgehend vermieden wird.

Eingangsbeispiel

Eingangsgraphik dieses Buches

Variation zum Eingangsbeispiel

Folgendes Beispiel entspricht der Eingangsgraphik dieses Buches. Der profane Inhalt besteht aus Ellipsen und dem Text 'SVG', in der Mitte der Ellipsen angeordnet. Die Füllung von zwei Ellipsen ist teiltransparent weiß ausgelegt.

Die Filter werden jeweils mit dem Element filter umschlossen. Filter sind immer rechteckig, somit gibt es dafür die entsprechenden Attribute. In diesem Beispiel gibt es zwei filter.

Der erste Filter ist ein einfacher Weichzeichner für zwei Ellipsen. Darüber werden nochmal die gleichen Ellipsen ohne Filter gesetzt, was hier explizit erfolgt, aber auch mit einem Filter erledigt werden könnte. Der Effekt ist ein etwas weicherer Rand für die beiden Ellipsen.

Der zweite Filter ist deutlich komplizierter. Dieser täuscht eine Lichtquelle mit Schattenwurf vor, so dass der Eindruck erweckt wird, als schwebe der Inhalt über der Zeichenfläche und werfe einen Schatten auf diese. Ferner wird eine reliefartige Oberflächenstruktur vorgetäuscht, einschließlich einiger Glanzlichter von der Lichtquelle, links oben angeordnet.

Dazu wird zunächst der Alpha-Kanal des Inhaltes verwendet, also der Kanal für Transparenz, dies Bild wird mit einem Weichzeichner behandelt und nach unten rechts verschoben, grob den Effekt einer unendlich entfernten, ausgedehnten Lichtquelle simulierend. Die teiltransparente Füllung sorgt lediglich für eine Abschwächung des Lichtes, während die Striche und der Text komplett undurchsichtig sind. Bedingt durch den Weichzeichner ergibt sich allerdings kein scharfer Schatten, also eine Simulation einer ausgedehnten Lichtquelle, welche sehr weit weg ist, wie die Sonne.

Ein weiteres Abbild des Inhaltes wird mit einem Weichzeichner behandelt. Dies wird verwendet, um Glanzlichter eine Punktlichtquelle und eine Oberflächenstruktur vorzutäuschen. Von dem Ergebnis wird aber nur der Alpha-Kanal verwendet. Dieser wird schließlich vereint mit dem Schatten, welcher bereits zuvor mit der Originalgraphik vereint wurde.

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 150 1000 700"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:lang="de">

<title>SVG</title>
<desc>
...
</desc>

<defs>
<filter id="weich"
  filterUnits="userSpaceOnUse"
  x="0" y="150" width="1000" height="700">
  <feGaussianBlur in="Source" stdDeviation="2" />
</filter>

<filter id="LichtUndSchatten"
  filterUnits="userSpaceOnUse"
  x="0" y="150" width="1000" height="700">

<feGaussianBlur in="SourceAlpha" stdDeviation="12"
x="0" y="150" width="1000" height="700"  result="Gauss" />
<!-- der diffuse Schatten wird aus der Alphamaske erzeugt
     und nach rechts unten verschoben -->
<feOffset in="Gauss" dx="20" dy="40" result="OffsetGauss"/>

<!-- Der diffuse Schatten wird mit der Graphik vereint -->
<feComposite in="SourceGraphic" in2="OffsetGauss"
   operator="over" result="Composite"/>

<!-- Ein weiteres diffuses Abbild wird erstellt... -->
<feGaussianBlur in="SourceAlpha"
   stdDeviation="6" result="blur"/>

<!-- ... und mit Glanzlichtern versehen... -->
<feSpecularLighting in="blur" surfaceScale="4"
   specularConstant=".8" specularExponent="16"
   lighting-color="#def" result="specOut">
<!-- ... und eine Punktlichtquelle wird positioniert -->
    <fePointLight x="-500" y="-1000" z="1200"/>
  </feSpecularLighting>

<!-- Die Glanzlichter werden mit der Alphamaske maskiert...  -->
<feComposite in="specOut" in2="SourceAlpha"
   operator="in" result="specOut2"/>
<!-- ... und dieses wird mit der Komposition
     aus Graphik und Schatten vereint  -->
<feComposite in="Composite" in2="specOut2"
   operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
   result="litPaint"/>
</filter>
</defs>

<g filter="url(#LichtUndSchatten)">

<g filter="url(#weich)">
  <ellipse cx="480" cy="480" rx="430" ry="290"
    fill="#fff" fill-opacity="0.2"
    stroke="#04a" stroke-width="10" />
  <ellipse cx="480" cy="480" rx="420" ry="280"
    fill="none"
    stroke="#039" stroke-width="5" />
</g>

<ellipse cx="480" cy="480" rx="430" ry="290"
    fill="#fff" fill-opacity="0.2"
    stroke="#04a" stroke-width="8" />
<ellipse cx="480" cy="480" rx="420" ry="280"
    fill="none"
    stroke="#039" stroke-width="3" />

<text x="480" y="600" text-anchor="middle"
  font-size="336" stroke-linecap="square"
  stroke-width="12" stroke="#035"
  fill="none">SVG</text>
</g>
</svg>

Variation zum Eingangsbeispiel
Hier werden etwas andere Attributwerte verwendet, andere Filter, zudem wird die Farbe rotiert.

Element filter

SVG
1.1	1.7	9	3 (teilweise)	-	-	?	?	?

Das Element filter kann verwendet werden, um darin eine Gruppe von Filtereffekten zu notieren. Das Element legt Größe und Lage des rechteckigen Filterbereiches fest.

filter werden nicht direkt dargestellt, sollten daher in defs notiert werden. Solch ein Filter wird angewendet, indem er mit der Eigenschaft filter beim betroffenen Element referenziert wird. Als nicht direkt dargestelltes Element hat die Eigenschaft display keinen Einfluss auf die Funktion und Verfügbarkeit des Filters.

Eigenschaften werden vom Elternelement geerbt, nicht vom referenzierenden Element.

Die enthaltenen Urfilter werden der Reihe nach abgearbeitet. Die Ausgabe des letzten wird als Ausgabe verwendet.

Attribut filterUnits

Das Attribut definiert das Einheitensystem für die Attribute x, y, width, height.

Mögliche Werte sind 'userSpaceOnUse' und 'objectBoundingBox'; letzteres wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut ist animierbar.

Bei 'userSpaceOnUse' wird das lokale Koordinatensystem verwendet, welches für das referenzierende Element gilt.

Bei 'objectBoundingBox' bestimmt das umgebende Rechteck (englisch: boundingBox) die Einheiten.

Attribut primitiveUnits

Das Attribut bestimmt das Einheitensystem für die Urfilter und für die Attribute, welche die Filterregion definieren.

Mögliche Werte sind 'userSpaceOnUse' und 'objectBoundingBox'; ersteres wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut ist animierbar.

Bei 'userSpaceOnUse' wird das lokale Koordinatensystem verwendet, welches für das referenzierende Element gilt.

Bei 'objectBoundingBox' bestimmt das umgebende Rechteck (englisch: boundingBox) die Einheiten.

Attribute x, y, width und height

Die Attribute definieren einen rechteckigen Bereich der Zeichenebene, auf welchen der Filter anzuwenden ist.

x ist der linke Rand der Region, y der obere Rand, width die Breite, height die Höhe. x und y sind Koordinaten, width und height sind Längen. Negative Werte für width und height sind ein Fehler, welcher zum Abbruch der Darstellung des Dokumentes führt. Ein Wert '0' unterbindet die Anzeige des Filterergebnisses, also letztlich die Darstellung des referenzierenden Elementes.

Sind x oder y nicht angegeben, wird für das fehlende Attribut jeweils '-10%' angenommen. Sind width oder height nicht angegeben, wird für das fehlende Attribut jeweils '120%' angenommen.

Die Attribute sind animierbar.

Die benötigte Verarbeitungszeit und der notwendige Speicher für einen Filter sind direkt abhängig von der Filterfläche, also dem Produkt und Breite und Höhe. Verarbeitungszeit und Speicher hängen natürlich auch von der Anzahl und der Art der verwendeten Urfilter ab. Um den Aufwand für einen Filtereffekt so gering wir möglich zu halten, ist es also dringend zu empfehlen, den Filterbereich so klein wie möglich zu wählen. Andererseits gibt es Urfilter, die Bereich benötigen, die außerhalb des zu filternden Inhaltes liegen, wie etwa Weichzeichner. Für diese ist ein etwas größerer Bereich zu verwenden, sonst werden Teile des Effektes abgeschnitten.

Ebenfalls eine Verlängerung der Verarbeitungszeit kann sich aus bestimmten Transformationen des Koordinatensystems ergeben, welches für die Filter anzuwenden ist, wie Scherungen, Drehungen um andere Winkel als ganzzahlige vielfache von 90 Grad und andere Transformationen, bei denen die Achsen nicht exakt entlang der x- und y-Achsen des Ausgabegerätes ausgerichtet sind.

Attribut filterRes

Mit dem Attribut wird die Auflösung von Zwischenablagen festgelegt, die benötigt werden, um Zwischenergebnisse von Filtereffekten abzulegen. Hohe Auflösung bedeutet einen großen Speichergebrauch und eine hohe Prozessorlast.

Der Wert ist eine Zahl, optional gefolgt von einer weiteren Zahl (mit Leerzeichen dazwischen). Die Zahl bedeutet jeweils die Anzahl der Pixel für die Breite und die Höhe bei einer Zahl. Bei zwei Zahlen bedeutet die erste Zahl die Anzahl der Pixel für die Breite, die zweite für die Höhe.

Voreinstellung für Monitore ist die Anzahl der Pixel auf dem Monitor für die Abmessung des Filterbereiches. Bei Druckern ist eine angemessene Auflösung als Voreinstellung anzunehmen, also zum Beispiel eine Angabe wie die Anzahl der Pixel, die 400dpi entsprechen.

Mit einer Angabe von weniger Pixeln kann ein pixeliger Effekt provoziert werden, wo also die Pixel der Zwischenablage klar zu erkennen sind. Größere Werte können die Verarbeitung unangemessen verlängern wie auch den Speicherverbrauch drastisch ansteigen lassen.

Negative Werte sind ein Fehler, welcher zum Abbruch der Darstellung des Dokumentes führt. Ein Wert '0' unterbindet die Anzeige des Filterergebnisses, also letztlich die Darstellung des referenzierenden Elementes.

Das Attribut ist animierbar. Ein Wechsel von niedriger Pixelzahl zur Voreinstellung kann einen Effekt wie das Einblenden des Inhaltes bewirken, umgekehrt entsprechend ein Ausblenden.

Attribut href von XLink

Mit dem Attribut href von XLink kann ein anderer Filter im selben Dokumentfragment referenziert werden, welcher verwendet werden kann. Sind Attribute im referenzierten Filter, aber nicht im referenzierenden angegeben, so werden sie übernommen, sonst nicht. Falls der referenzierende Filter keine Urfilter enthält, aber der referenzierte oder dieser selbst einen Filter referenziert, dann erbt der referenzierende Filter die Urfilter.

Das Attribut ist anmierbar.

Mit href sind auch die anderen Attribute von XLink verfügbar.

Beispiele filter

relative Koordinaten (1)

relative Koordinaten (2)

lokale Koordinaten (1)

lokale Koordinaten (2)

In den Abschnitten zu den Urfiltern finden sich zusätzlich zahlreiche weitere Beispiele. Hier gibt es nur ein paar einfache Beispiele zu den Attributen von filter, wobei lediglich ein einfacher Gaußschner Weichzeichner als Urfilter verwendet wird. Es kann also für das Verständnis der Attribute des Urfilters nützlich sein, die entsprechenden, noch folgenden Abschnitte zu kennen, dies ist aber nicht Schwerpunkt dieser Beispiele.

Links oben ist jeweils das ungefilterte Rechteck zum Vergleich angegeben.
relative Koordinaten (1)
Auswirkung verschiedener Filterregionen und Auflösungen auf ein Rechteck mit Koordinatenangaben relativ zur Größe des Elementes.

relative Koordinaten (2)
Auswirkung verschiedener Filterregionen und Auflösungen auf eine Gruppe mit zwei Rechtecken mit Koordinatenangaben relativ zur Größe des Elementes.

lokale Koordinaten (1)
Auswirkung verschiedener Filterregionen in lokalen Koordinaten auf ein Rechteck. Der Urfilter verwendet nach wie vor relative Koordinaten.

lokale Koordinaten (2)
Auswirkung verschiedener Filterregionen in lokalen Koordinaten auf ein Rechteck. Auch der Urfilter verwendet hier lokale Koordinaten.

Eigenschaft filter

SVG
1.1	1.7	9	3	-	-	?	?	?

filter-Beispiele

Mit der Eigenschaft filter kann ein Filter bei einem Element referenziert werden. Anwendbar ist die Eigenschaft bei graphischen Elementen und Gruppierungselementen.

Mögliche Werte sind:

inherit

geerbt

none

Filter wird nicht verwendet

MFunktionale IRI

IRI des Filters, der verwendet werden soll

Die Eigenschaft wird nicht vererbt und ist animierbar.

filter-Beispiele
Sechs verschiedene Möglichkeiten, die Filtereigenschaft auf ein Rechteck anzuwenden, werden durchprobiert.

Hintergrundbild, Eigenschaft enable-background

SVG
1.1	-	9 (teilweise, kein Ausschnitt)	-	-	-	?	?	?

Als Eingabe für Urfilter kann der Hintergrund der Filterregion dienen. Dies benötigt allerdings Speicherbedarf, weswegen es notwendig ist, dies explizit festzulegen. Dazu wird die Eigenschaft enable-background bei einem Gruppierungselement angegeben, bei dem der Filter angewendet werden soll. Damit wird ein Schnappschuss der Filterregion angelegt, wie sie vor Anwendung eines Filters aussieht.

Mögliche Werte sind:

inherit

geerbt

accumulate

der Hintergrund kumuliert, die Voreinstellung, kein Schnappschuss

new

Ein Schnappschuss wird angelegt und ist für die gesamte Filterregion verfügbar

new x y width height

Lediglich ein Bereich der Filterregion wird für einen Schnappschuss verwendet

Die Eigenschaft ist nicht animierbar.

Der Wert 'new' ermöglicht es, dass Kindelemente des Gruppierungselementes, bei welchem die Eigenschaft notiert ist, den Hintergrund zu verwenden. In einen neuen Bereich werden somit alle Kindelemente des Gruppierungselementes als Schnappschuss zusätzlich dargestellt.

Bei der Voreinstellung 'accumulate' hängt das Verhalten vom Kontext ab. Hat ein Vorfahre enable-background="new" notiert, so werden sowohl alle graphischen Elemente des Gruppierungselementes im Hintergrund des Elternelementes dargestellt, als auch in der direkten graphischen Ausgabe. Sonst erfolgt nur die direkte graphische Ausgabe.

Ist kein Hintergrund abgelegt, wird aber angefordert, so wird ein leerer Hintergrund zurückgegeben.

Folgen dem Wert 'new' weitere vier Angaben 'x y width height', so wird damit nur ein Unterbereich der Filterregion festgelegt, der für den Schnappschuss verwendet wird. Also die Koordinate 'x' für die linke Kante, 'y' für die obere Kante, die Länge 'width' für die Breite, 'height' für die Höhe. Es wird immer nur ein kleinerer Ausschnitt verwendet. Ein negativer Wert für 'width' oder 'height' bewirkt, dass ein Schnappschuss erfolgt, ebenso wie eine falsche Anzahl von Parametern.

Urfilter - Überblick und Gemeinsamkeiten

SVG
1.1	1.7 (teilweise)	9 (größtenteils)	3 (teilweise)	-	-	?	?	?

Ein Filter wird konstruiert aus einzelnen Urfiltern, auch Filtereffekte oder Primitive genannt. Soweit nicht anders angegeben, agieren alle Urfilter mit vormultiplizierten RGBA-Mustern, also mit den drei Farbkanälen und einem Alpha-Kanal für die Transparenz.

Nach Anwendung jeden Urfilters wird jeder der vier Kanäle auf den zulässigen Bereich eingeschränkt. Mit der Eigenschaft color-interpolation-filters kann festgelegt werden, in welchem Farbraum interpoliert wird. Per Voreinstellung wird eine lineare Interpolation (linearRGB) verwendet, anders als bei sonstigen Interpolationen, für welche 'sRGB' verwendet wird, siehe die Eigenschaft color-interpolation im Kapitel Graphik formatieren.

Während es für Farben in SVG generell diverse Notationen und Einheiten gibt, wird für Filter bei der Rechnung mit Farbkanälen von einem Bereich von 0 bis 1 als zulässigem Bereich ausgegangen. Also 0 für einen leeren Farbkanal, 1 für einen vollen. Es handelt sich dann also auch für die drei Farbkanäle um den gleichen Zahlenbereich wie für die Opazität im vierten Kanal, dem Alpha-Kanal.

Wenn von vormultiplizierten Werten die Rede ist, so wird angenommen, dass der Wert aus dem Alpha-Kanal an jeden Farbkanal dranmultipliziert wird, bevor eine Rechnung innerhalb eines Filters stattfindet. Die passiert bei allen Urfiltern mit Ausnahme von feColorMatrix und feComponentTransfer. Bei diesen wird der Alpha-Kanal nicht vor der Rechnung an die Farbkanäle dranmultipliziert.

Eine weitere öfter auftretende Redewendung ist 'transparent schwarz' - das bedeutet einfach, dass bei allen vier Kanälen der Wert 0 vorliegt. In der konkreten Darstellung ist das erstmal nicht zu unterscheiden von einer Situation, in der eine andere Farbe angenommen wird und nur der Alpha-Kanal 0 ist. Bei Filtern kann sich aber durchaus ein Unterschied ergeben, insbesondere bei jenen, wo keine vormultiplizierten Werte verwendet werden.

Urfilter haben eine Reihe von Attributen gemeinsam, welche in folgenden Abschnitten beschrieben werden.

Attribute x, y, width und height

Die Attribute definieren einen rechteckigen Unterbereich des Filters, auf den der jeweilige Filter angewendet wird.

x ist der linke Rand der Region, y der obere Rand, width die Breite, height die Höhe. x und y sind Koordinaten, width und height sind Längen. Negative Werte für width und height sind ein Fehler, welcher zum Abbruch der Darstellung des Dokumentes führt. Ein Wert '0' unterbindet die Anwendung des Urfilters.

Sind x oder y nicht angegeben, wird für das fehlende Attribut jeweils '0%' angenommen. Sind width oder height nicht angegeben, wird für das fehlende Attribut jeweils '100%' angenommen.

Die Attribute sind animierbar.

Attribut result

Das Attribut gibt dem Ergebnis des Urfilters einen Namen. Der Wert ist also eine Zeichenkette, so dass das Ergebnis als Eingabe bei einem anderen Urfilter verwendet werden kann, indem der Name in dessen Attribut in notiert wird.

Ist kein Ergebnisname angegeben, so ist das Ergebnis nur im nächsten Urfilter verwendbar, falls dieser kein Attribut in notiert hat.

Der Name gilt nur im selben Filter und derselbe Name kann beliebig oft wiederholt werden. Tritt ein Name mehrfach auf, so wird jeweils das Ergebnis des ersten, dem aufrufenden Urfilter vorhergehenden Urfilters verwendet.

Das Attribut ist animierbar.

Attribut in

Das Attribut gibt an, was als Eingabe bei einem Urfilter verwendet werden soll. Das Attribut ist nur zulässig und sinnvoll für Urfilter, die eine Eingabe brauchen, also etwa nicht für feFlood oder feImage oder feTurbulence.

Mögliche Werte sind:

SourceGraphic

Die graphischen Elemente des Gruppierungselementes im Filterbereich

SourceAlpha

Nur der Alpha-Kanal der graphischen Elemente des Gruppierungselementes im Filterbereich

BackgroundImage

Das Hintergrundbild, welches mittels enable-background verfügbar gemacht wurde

BackgroundAlpha

Der Alpha-Kanal des Hintergrundbildes, welches mittels enable-background verfügbar gemacht wurde

FillPaint

Füllung mit dem Wert der Eigenschaft fill des Zielelementes des Filters

StrokePaint

Füllung mit dem Wert der Eigenschaft stroke des Zielelementes des Filters

Name

Name eines vorhergehenden Urfilterergebnisses im selben Filter

Ist kein Wert angegeben, so wird das Ergebnis des vorherigen Urfilters verwendet. Beim ersten wird 'SourceGraphic' verwendet.

Das Attribut ist animierbar.

Beispiele Urfilterattribute

Eingabemöglichkeiten (1)

Eingabemöglichkeiten (2)

Verwendung des Hintergrundbildes

Filterunterregion

Richtiges Ergebnis

Eingabemöglichkeiten (1)
Auswirkung der Eingabe auf das Filterergebnis. Links oben ist das ungefilterte Rechteck zum Vergleich angegeben. Dann kommt oben in der Mitte SourceGraphic, rechts SourceAlpha, unten links FillPaint, in der Mitte StrokePaint und rechts unten wird als Eingabe das Ergebnis eines vorherigen Filters verwendet, hier SourceAlpha von einem Versatz um 0.

Eingabemöglichkeiten (2)
Auswirkung der Eingabe auf das Filterergebnis. Links oben sind die ungefilterten Rechtecke zum Vergleich angegeben. Dann kommt oben in der Mitte SourceGraphic, rechts SourceAlpha, unten links FillPaint, in der Mitte StrokePaint und rechts unten wird als Eingabe das Ergebnis eines vorherigen Filters verwendet, hier SourceAlpha von einem Versatz um 0.

Verwendung des Hintergrundbildes

Das Vergleichbild ist oben links dargestellt.

Gefiltert mit einem Weichzeichner wird immer das Quadrat mit violetter Füllung. Dass der Hintergrund verwendet werden soll, wird jeweils bei einem Gruppierungselement um alle drei Quadrate notiert. Oben in der Mitte wird ein kumulierender Hintergrund verwendet, sonst ein neuer Hintergrund, rechts unten nur ein Ausschnitt links oben. Links unten wird die Einstellung von einem weiteren Gruppierungselement geerbt, unten in der Mitte wird nur der Alphakanal verwendet.

Filterunterregion
Auswirkung verschiedener Filterregionen in lokalen Koordinaten auf ein Rechteck. Als Filter wird ein einfacher Gaußscher Weichzeichner verwendet.

Links oben ist die ungefilterten Rechtecke zum Vergleich angegeben.

Richtiges Ergebnis
Verschiedene Kombinationen - immer das gleiche Ergebnis ein Weichzeichner, kein roter Bereich.

Links oben sind die ungefilterten Rechtecke zum Vergleich angegeben.

Eigenschaft color-interpolation-filters Farbinterpolation für Urfilter

SVG
1.1	1.7	9.5	3	-	-	?	?	?

Farbinterpolation bei diffuser Streuung

Farbinterpolation bei reflektierender Streuung

Anwendbar auf Urfilter gibt es eine eigene Eigenschaft zur Farbinterpolation color-interpolation-filters. Diese hat die gleichen möglichen Werte wie color-interpolation:

inherit

geerbt

auto

Das Darstellungsprogramm kann selbst entscheiden, dem Autor ist es egal

sRGB

Interpolation erfolgt im Standard-Farbraum

linearRGB

Interpolation erfolgt im linearisierten Farbraum

Der Initialwert ist allerdings 'linearRGB' (anders als bei color-interpolation), die Eigenschaft wird ebenfalls vererbt und ist animierbar.
Insbesondere kann die Eigenschaft also beim Elternelement filter notiert werden und wirkt dann auf alle Urfilter darin - oder auch bei einem anderen Gruppierungselement notiert werden, besonders sinnvoll eventuell beim Elternelement aller Filter, also defs oder gar dem Hauptelement svg.

Beispiele:
Unterschiedliche Einstellungen der Farbinterpolation für Filter. Links oben ist das Ausgangsbild zu sehen. In der Mitte oben wird linearRGB verwendet. Rechts oben wird sRGB verwendet. Links unten wird auto verwendet. In der Mitte unten wird inherit verwendet. Rechts unten wird für die Lichtquelle sRGB verwendet und für die Komposition die Voreinstellung linearRGB.

Bei diffuser Streuung
Bei reflektierender Streuung

Urfilter feOffset - Räumlicher Versatz

SVG
1.1	1.7	9	3	-	-	?	?	?

Der Urfilter dient dazu, einen räumlichen Versatz hervorzurufen. Es wird eine relative Verschiebung zur aktuellen Position notiert.

Dies wird häufig verwendet, um den Effekt eines Schattens hervorzurufen, welcher gleichgroß wie die schattenwerfenden Elemente ist. Das passt recht gut zu einer Lichtquelle, welche unendlich weit entfernt ist und Elementen, die in kleinem Abstand parallel über der Zeichenebene zu schweben scheinen. Ist hingegen eher geplant, eine endlich weit entfernte Lichtquelle vorzutäuschen, so ist der Schatten größer als die Elemente. Da bietet es sich eher an, mit use eine Kopie zu erstellen und diese mit transform zu vergrößern und zu verschieben, bevor darauf ein Filter angewendet wird, um etwa über den Alpha-Kanal einen Schatten zu erzeugen.

Da Filter generell aufwendiger sind als die Verwendung von use und transform, kann es in vielen Fällen sinnvoll sein, so vorzuarbeiten, statt alles allein mit dem Filter zu lösen.

Attribute dx und dy

Mit den Attributen wird die Verschiebung angegeben, dx in Richtung der x-Achse, dy in Richtung der y-Achse.

Der Wert ist eine Zahl in den Einheiten, die mit primitiveUnits von filter angegeben sind. Für ein nicht angegebenes Attribut wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Beispiele feOffset

Es wird der Alpha-Kanal um 50 nach links und um 100 nach unten verschoben. Das Ergebnis wird in 'Versatz' abgelegt.

<feOffset in="SourceAlpha" result="Versatz" dx="50" dy="100" />

Ein Bild wird mehrfach und versetzt dargestellt

Einfache Schatten

Mehrfach versetzte Kopien
Eine Vorlage aus zwei Ellipsen und den Buchstaben 'SVG' wird mehrfach an verschiedene Positionen versetzt.

Einfache Schatten
Anhand der von Ellipsen umgebenden Buchstaben 'SVG' wird gezeigt, wie mehrere einfache Schatten von punktförmigen, unendlich weit entfernten Lichtquellen vorgetäuscht werden.

Als Schatten dient einfach der Alphakanal und wird um ein Stück verschoben. Das passiert für jeden Einzelschatten. Wie dunkel ein Schatten ist, hängt vor allem von der Intensität aller anderen Lichtquellen ab. Dies kann indirekt über den Alphakanal des jeweiligen Schattens eingestellt werden.

Anschließend werden die Schatten unter die Graphik gelegt. Hier mit einem Urfilter zum Zusammenfügen, weil es sich um mehrere Schatten handelt.

Bei einem Schatten ist der zum Überblenden oder der zur Komposition dafür ebenfalls geeignet.

Urfilter feFlood - Gleichmäßige Füllung

SVG
1.1	1.7	9	3	-	-	?	?	?

Mit diesem Urfilter kann die Filterunterregion mit einer Farbe teiltransparent gefüllt werden. Die Filterunterregion wird definiert durch die allgemeinen Attribute x, y, width und height.

Eigenschaft flood-color

Mit der Eigenschaft wird die Füllfarbe angegeben. Der Wert entspricht dem der Eigenschaften fill und stroke, allerdings ohne Maldienste. Möglich sind also neben einem Farbwert auch die Werte 'currentColor' und 'inherit'. Der Ausgangswert ist schwarz. Die Eigenschaft wird nicht vererbt und ist animierbar.

Eigenschaft flood-opacity

Mit der Eigenschaft wird die Opazität oder Teiltransparenz angegeben. Der Wert entspricht dem der Eigenschaften opacity, fill-opacity und stroke-opacity. Der Wert ist also entweder 'inherit' oder ein Wert zwischen 0 (durchsichtig) und 1 (undurchsichtig), beziehungsweise der Wert wird auf den nächstgelegenen Wert aus diesem Intervall korrigiert, wenn falsch angegeben. Der Ausgangswert ist 1. Die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiele feFlood

Geflutete Filterunterregionen

Ein quadratischer Bereich wird halbtransparent dunkelblau gefüllt. Das Ergebnis wird als 'Hintergrund' abgelegt.

<feFlood 
 result="Hintergrund"
 x="50" y="50" 
 width="200" height="200"
 flood-color="#008" 
 flood-opacity="0.5" />

Geflutete Filterunterregionen
Zufällige Anordnung von rechteckigen Farbflächen.

Urfilter feGaussianBlur - Weichzeichner

SVG
1.1	1.7	9	3	-	-	?	?	?

Gaußkurven mit verschiedenen Standardabweichungen

zweidimensionale Gaußkurve als Farbverlauf mit verschiedenen Standardabweichungen in x- und y-Richtung

Eine Faltung mit einer Gaußkurve wird durchgeführt, um den Effekt eines Weichzeichners zu erreichen.

Die Faltungsfunktion ist:
F(x,y)=G(x)*H(y)
mit
G(x)=exp(-x²/ (2a²)) / (2* π*a²)^1/2
H(y)=exp(-y²/ (2b²)) / (2* π*b²)^1/2

Dabei geben 'a' und 'b' die Standardabweichungen in den Richtungen x und y an.

Als kurze und vereinfachte Erklärung, wie eine Faltung funktioniert, so ergibt das Integral über obige Funktion über den Filterbereich den gefilterten Wert am Punkt 0. Für einen beliebigen Punkt sind entsprechend x und y zu verschieben. Bei diskreten Objekten wie einem Raster aus Pixeln wird anstatt des Integrals die Summe über alle Pixel verwendet, geteilt durch die Anzahl der Pixel.

Die Bilder neben dem Text zeigen Gaußkurven, einmal eindimensional als Graph (Gaußkurven mit verschiedenen Standardabweichungen) und einmal zweidimensional als Farbverlauf (zweidimensionale Gaußkurve als Farbverlauf mit verschiedenen Standardabweichungen in x- und y-Richtung). Die Fläche (beziehungsweise bei zweidimensionalen Kurven das Volumen) unter der Kurve ist immer gleich. Das bedeutet, bei einer kleinen Standardabweichung tragen neben dem originalen Punkt und wenige Nachbarn zum Ergebnis bei. Bei einer großen Standardabweichung tragen viele Nachbarn aus einer größeren Umgebung zum Ergebnis bei, welches dann also zu einer starken räumlichen Verschmierung führt.

Ferner ist zu beachten, dass die Hauptachsen für die Standardabweichungen immer in x- und y-Richtung des lokalen Koordinatensystems ausgerichtet sind. Wird dies anders benötigt, wäre das zu filternde Objekt also erst geeignet zu drehen, dann der Filter anzuwenden und dann das gefilterte Objekt zurückzudrehen (was durch Verschachtelung von Gruppierungselementen erreichbar ist).

Der Urfilter wird oft zusammen mit feOffset verwendet, um aus der Eingabe 'SourceAlpha' etwas zu erzeugen, was einen diffusen Schatten einer ausgedehnten, unendlich weit entfernen Lichtquelle vorzutäuschen. Durch Verwendung von teiltransparenten Schattenvorlagen können auch Schatten mehrerer Lichtquellen vorgetäuscht werden, die weiter voneinander entfernt sind.

Attribut stdDeviation

Mit dem Attribut werden die Standardabweichungen in x- und y-Richtung angegeben. Der Wert des Attributes besteht aus ein oder zwei Zahlen, mit Leerzeichen voneinander getrennt. Sind zwei Zahlen angegeben, ist die erste die Standardabweichung in x-Richtung, die zweite in y-Richtung. Ist nur eine Zahl angegeben, wird diese für die die Standardabweichung in x- und y-Richtung verwendet.

Negative Werte sind ein Fehler, der zum Abbruch der Darstellung des Dokunentes führt. In SVG 1.1 unterbindet die Angabe eines Wertes 0 die Darstellung des Filters. Dies entspricht allerdings nicht der Erwartung, die sich aus angegebener Formel ergibt. Danach wäre das Ergebnis eher kein Weichzeichnereffekt in der Richtung mit Standardabweichung 0. Eine derartige Änderung ist im Gespräch, entweder als Fehlerkorrektur für SVG 1.1 oder erst als Änderung bei einem neuen Filtermodul.

Ist stdDeviation nicht angegeben, wird 0 angenommen.

Das Attribut ist animierbar.

Beispiele feGaussianBlur

Alpha-Kanal weichzeichnen und dann verschieben:

<feGaussianBlur in="SourceAlpha" stdDeviation="20 5"
x="0" y="0" width="500" height="500"/>
<feOffset  dy="20" dx="10" result="Schatten" />

Anwendung auf einen roten Kreis

Schatten von ausdehnten Lichtquellen

Verschmierter roter Kreis
Anwendung einer Faltung mittels feGaussianBlur auf einen roten Kreis. Die Standardabweichungen in x- und y-Richtung der Gaußkurve werden animiert.

Die Abmessung des ungefalteten Kreises ist weiß gestrichelt angedeutet.

Schatten von ausdehnten Lichtquellen
Anhand der von Ellipsen umgebenden Buchstaben 'SVG' wird gezeigt, wie mehrere einfache Schatten von ausgedehnten Lichtquellen vorgetäuscht werden.

Nach Anwendung des Gaußschen Weichzeichners auf den Alphakanal wird der Schatten um ein Stück verschoben. Die Standardabweichungen entscheiden über die Ausdehnung der Lichtquelle. Das passiert für jeden Einzelschatten. Wie dunkel ein Schatten ist, hängt vor allem von der Intensität aller anderen Lichtquellen ab. Dies kann indirekt über den Alphakanal des jeweiligen Schattens eingestellt werden.

Anschließend werden die Schatten unter die Graphik gelegt. Hier mit einem Urfilter zum Zusammenfügen, weil es sich um mehrere Schatten handelt.

Bei einem Schatten ist der zum Überblenden oder der zur Komposition dafür ebenfalls geeignet.

Urfilter feImage - Bild einfügen

SVG
1.1	1.7	9	3 (teilweise, kein SVG)	-	-	?	?	?

Mit dem Urfilter kann ein Bild eingefügt werden, statt der ansonsten üblichen Eingabe. Das Bild kann sowohl eine externe Datei sein, zum Beispiel PNG, JPEG/JFIF oder SVG, aber auch ein SVG-Fragment aus einer anderen Datei oder der aktuellen Datei.

Bei externen Dateien entspricht die Verarbeitung der des Elementes image, bei SVG-Fragmenten der von use. Dies schließt die Attribute x, y, width, height und das ebenfalls verfügbare preserveAspectRatio mit ein.

Attribut href von XLink

Mit dem Attribut href von XLink wird das Bild beziehungsweise Fragment referenziert.

Das Attribut ist anmierbar.

Mit href sind auch die anderen Attribute von XLink verfügbar.

Beispiele feImage

Ein Bild namens 'Beispiel01.png' wird referenziert und als Ergebnis 'Beispiel' verfügbar gemacht.

<feImage xmlns:xlink="http://www.w3.org/1999/xlink" 
         xlink:href="Beispiel01.png"
         x="0.2" y="0.2" width="0.6" 
         height="0.6" result="Beispiel"/>

Ein SVG-Fragment wird referenziert und mit einem Weichzeichner bearbeitet und von einem leeren Element g als Filter verwendet:

<defs xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="g1">
<rect x="100" y="100" 
      width="300" height="300" 
      rx="50" ry="50" 
      fill="#44ff44" />
<ellipse cx="250" cy="250" 
      rx="150" ry="100"
      fill="#f00" fill-opacity="0.5"
      stroke="#00f" stroke-width="50" />
</g>

<filter id="f1" filterUnits="userSpaceOnUse"
x="0" y="0" width="500" height="500">
  <feImage id="fi" xlink:href="#g1"
      x="0" y="0" width="500" height="500"/>
  <feGaussianBlur id="fGB" stdDeviation="4 4"
      x="0" y="0" width="500" height="500"/>
</filter>
</defs>
<g filter="url(#f1)" />

Bilder einbetten (1)

Bilder einbetten (2)

Bilder einbetten (1)
Es werden Kopien von Bildern zu einem Gesamtfilterergebnis zusammengefügt. Ein PNG-Bild mit drei handgemalten Kringeln wird als eingebettete Datei per Pseudoprotokoll data referenziert. Ein SVG-Fragment mit eigenem Anzeigebereich und mit drei gegeneinander verdrehten Ellipsen wird als weiteres Bild referenziert.

Die richtigen Positionen und Größen werden als Quadrate mit schwarzem Strich angedeutet.

Bilder einbetten (2)
Ein SVG-Fragment ohne eigenen Anzeigebereich und mit drei gegeneinander verdrehten Ellipsen wird als Bild referenziert.

Es wird jeweils das lokale Koordinatensystem verwendet, das referenzierte Fragment muss also komplett in der Filterregion liegen, damit es korrekt angzeigt wird. Entsprechend skaliert das Fragment also auch nicht mit dem angegeben Unterbereich des Filters, welcher die passenden Abmessungen des referenzierten Fragmentes haben muss.

Der eigentliche Inhalt wird bei diesem Beispiel nicht verwendet, also auch nicht angezeigt. Dies wäre ein einfaches schwarzes Quadrat. Da andererseits der Hintergrund eines Filterergebnisses durchsichtig ist, können auch mehrere Filter übereinandergelegt werden.

Die richtigen Positionen und Größen werden als Quadrate mit schwarzem Strich angedeutet.

Urfilter feTile - Kacheln

SVG
1.1	1.7	9	-	-	-	?	?	?

SVG-Kacheln

Die Unterregion des Filters, welche durch x, y, width und height gegeben ist, wird mit einem Muster gekachelt.

Die jeweilige Kachel des Musters ergibt sich im Regelfalle aus der Ausgabe eines anderen Urfilters, zum Beispiel feImage, diese legt ihrerseits eine Unterregion des Filters mittels ihrer x, y, width und height fest.
Eine Kachel beginnt bei x, y die anderen dann jeweils um ganzzahlige Vielfache von width und height verschoben, die komplette Unterregion von feTile ausfüllend.

Beispiele feTile

Ein Bild 'Beispiel01.png' wird referenziert und als Kachel verwendet. Der gekachelte Bereich ist als Ergebnis 'Gekacheltes' verfügbar.

<feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Beispiel01.png"
x="0.05" y="0.05" width="0.1" height="0.1"/>
<feTile x="0.1" y="0.1" width="0.8" height="0.8" result="Gekacheltes"/>

SVG-Kacheln
Muster mit feTile erstellen, hier besteht das Muster aus zwei Ellipsen und den Buchstaben 'SVG', welches alles gedreht ist.

Urfilter feMerge mit feMergeNode - Zusammenfügen

SVG
1.1	1.7	9	3	-	-	?	?	?

Zusammenfügen

Mittels feMerge können Ergebnisse verschiedener Urfilter oder Eingabekanäle zusammengefügt werden. Die zusammenzufügenden Eingaben oder Ergebnisse werden jeweils im Unterelement feMergeNode notiert. Die Eingaben werden in der Reihenfolge übereinandergelegt, wie sie notiert sind.

Beispiele feMerge und feMergeNode

Einige Filterergebnisse werden mittels feMerge und feMergeNode zusammengefügt:

<defs>
 <filter id="f1" 
  filterUnits="userSpaceOnUse"
  x="0" y="0" 
  width="500" height="500">
  <feGaussianBlur 
   in="sourceGraphic" 
   stdDeviation="2 2"
    result="i1" />
  <feOffset in="sourceAlpha" 
   dx="50" dy="50"
   result="i2" />
  <feFlood flood-color="#f0f" 
   flood-opacity="0.5"
   result="i3" />

  <feMerge id="fm" x="0" y="0" 
   width="500" height="500">
    <feMergeNode in="i3" />
    <feMergeNode in="i1" />
    <feMergeNode in="i2" />
  </feMerge>
 </filter>
</defs>

Zusammenfügen
Neun animierte SVG-Fragmente werden zu einem Filterergebnis zusammengefügt.
Die richtigen Positionen und Größen werden als Quadrate mit weißem Strich angedeutet.

Urfilter feBlend - überblenden

SVG
1.1	1.7	9	3	-	-	?	?	?

Mit dem Urfilter feBlend kann eine Komposition aus zwei Eingaben erreicht werden. Die beiden Eingaben werden pixelweise miteinander zur Ausgabe vermischt oder überblendet.

Attribut in2

Mit dem Attribut wird die zweite Eingabe festgelegt. Der Attributwert ist der gleiche wie für in.

Das Attribut ist animierbar.

Attribut mode

Mit dem Attribut wird die Art der Vermischung, Überblendung oder Komposition festgelegt.

Die möglichen Werte sind:

normal

Normal

multiply

Multiplizieren

screen

Bildschirm

darken

Abdunkeln

lighten

Aufhellen

Die Voreinstellung ist 'normal'. Der Modus 'normal' entspricht dem Zusammenfügen von feMerge oder dem Typ 'over' von feComposite. Das entspricht dem was passiert, wenn ohne Filter teiltransparente Elemente übereinanderliegen.

Das Attribut ist animierbar.

Die Überblendung erfolgt gemäß folgender Regeln:

Für den Alpha-Kanal ist die Überblendung immer gleich:
q_r = 1 - (1-q_a)*(1-q_b)

Dabei ist q_r die Teiltransparenz des Ergebnisses, q_a und q_b jeweils die Teiltransparenz der ersten beziehungsweise zweiten Eingabe.

Für die folgenden Formeln gelten zudem folgende Abkürzungen:
c_r die RGB-Farbe des Ergebnisses, c_a und c_b die RGB-Farbe der erster beziehungsweise zweiten Eingabe.
Min und Max sind jeweils Funktionen, die das Minimum, beziehungsweise Maximum der darin mit Komma separierten Werte bestimmen.

normal

c_r = (1 - q_a) * c_b + c_a

multiply

c_r = (1-q_a)*c_b + (1-q_b)*c_a + c_a*c_b

screen

c_r = c_b + c_a - c_a * c_b

darken

c_r = Min ((1 - q_a) * c_b + c_a, (1 - q_b) * c_a + c_b)

lighten

c_r = Max ((1 - q_a) * c_b + c_a, (1 - q_b) * c_a + c_b)

Beispiele feBlend

Zwei Bilder werden überblendet. Per Animation wird die Überblendmethode verändert.

<filter id="f1" xmlns:xlink="http://www.w3.org/1999/xlink"
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="1" height="1">
  <feImage id="fi1" xlink:href="Beispiel01.png"
    x="0.2" y="0.2" width="0.4" height="0.4" result="i1" />
  <feImage id="fi2" xlink:href="Beispiel02.png"
    x="0.4" y="0.4" width="0.4" height="0.4" result="i2" />
  <feBlend id="fb" in="i1" in2="i2" mode="multiply">
    <animate attributeName="mode"
        values="normal;screen;darken;lighten"
        begin="3s"
        dur="12s" />
  </feBlend>
</filter>

Überblenden (1)

Überblenden (2)

Überblenden (1)
Die zehn verschiedenen Möglichkeiten der Überblendung von zwei Bildern werden dargestellt. Das erste Bild a zeigt zwei rote Kreise mit blauem Rand, einer davon teiltranparent. Das zweite Bild b zeigt zwei grüne Kreise mit blauem Rand, einer davon teiltranparent. Die Kreise überlappen jeweils etwas.

Überblenden (2)
Wie das vorherige Beispiel, hier nur für b mit gelben Kreisen mit rotem Rand, um zu sehen, was passiert, wenn a und b gemeinsame Farbkanäle haben.

Urfilter feColorMatrix - Farb-Matrix

SVG
1.1	1.7	9	3	-	-	?	?	?

Farbrotation

Sättigung

Leuchtdichte

Tauschen

mehr ...

Der Urfilter ermöglicht eine Matrixtransformation im RGBA-Raum einschließlich Verschiebung. Die Matrix wird in Form einer 5x5-Matrix verwendet, also jeweils eine Dimension für die Kanäle R (rot), G (grün), B(blau), A (Alpha, Transparenz) und einer zusätzlichen Dimension für die Verschiebung.

Aus den Kanälen E = (R,G,B,A,1) vor der Transformation ergeben sich die Kanäle A = (R',G',B',A',1) nach der Transformation und T_ae die Matrix beziehungsweise die Komponenten davon (a und e von 0 bis 4 und T₄₄ = 1 und sonst T_a4 = 0

A = T_ae E

Die Transformation erfolgt dann jeweils für jeden Pixel.

Attribut type

Mit dem Attribut type wird angegeben, welche Transformation ausgeführt werden soll. Das ist vor allem eine Vereinfachung, die es einem erspart, für immer wiederkehrende Transformationen immer alle Matrixkomponenten anzugeben.

Mögliche Werte sind:

matrix:Die Matrix wird komplett angegeben

saturate

Sättigung

hueRotate

Farbtondrehung

luminanceToAlpha

Leuchtdichte in Alpha-Kanal

Das Attribut ist animierbar. Die einzelnen Möglichkeiten werden im Folgenden näher definiert. Die Voreinstellung ist 'matrix'.

Attribut values

Das Attribut gibt die Komponenten oder Parameter der Transformation in Form einer Liste von Zahlen an.

Das Attribut ist animierbar. Voreinstellung hängt von type ab, entspricht aber immer der Identitätstransformation, Ausgabe ist also gleich der Eingabe.

Der genaue Wert von values hängt von type ab:

values für type='matrix'

Der Wert ist eine Liste mit genau zwanzig Zahlen, die den T_ae entsprechen:
T₀₀, T₀₁, T₀₂, T₀₃, T₀₄, T₁₀, T₁₁, T₁₂, T₁₃, T₁₄, T₂₀, T₂₁, T₂₂, T₂₃, T₂₄, T₃₀, T₃₁, T₃₂, T₃₃, T₃₄

Voreinstellung ist in diesem Falle '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0' - die Einheitsmatrix.

values für type='saturate'

Der Wert ist exakt eine Zahl zwischen 0 bis 1 jeweils einschließlich, im folgenden s genannt:

T₀₀ = 0.213+0.787s
T₀₁ = 0.715-0.715s
T₀₂ = 0.072-0.072s

T₁₀ = 0.213-0.213s
T₁₁ = 0.715+0.285s
T₁₂ = 0.072-0.072s

T₂₀ = 0.213-0.213s
T₂₁ = 0.715-0.715s
T₂₂ = 0.072+0.928s

T₃₃ = 1

T₄₄ = 1

Die restlichen Komponenten sind 0. Voreinstellung ist in diesem Falle s = 1.

values für type='hueRotate'

Der Wert ist exakt eine Zahl, einen Drehwinkel in Grad repräsentierend, im folgenden a genannt:

T₀₀ = 0.213 + cos(a)*0.787 - sin(a)*0.213
T₀₁ = 0.715 - cos(a)*0.715 - sin(a)*0.715
T₀₂ = 0.072 - cos(a)*0.072 + sin(a)*0.928

T₁₀ = 0.213 - cos(a)*0.213 + sin(a)*0.143
T₁₁ = 0.715 + cos(a)*0.285 + sin(a)*0.140
T₁₂ = 0.072 - cos(a)*0.072 - sin(a)*0.283

T₂₀ = 0.213 - cos(a)*0.213 - sin(a)*0.787
T₂₁ = 0.715 - cos(a)*0.715 + sin(a)*0.715
T₂₂ = 0.072 + cos(a)*0.928 + sin(a)*0.072

T₃₃ = 1

T₄₄ = 1

Die restlichen Komponenten sind 0. Voreinstellung ist in diesem Falle die a = 0.

values für type='luminanceToAlpha'

Für diesen Type ist values nicht anwendbar.

T₃₀ = 0.2125
T₃₁ = 0.7154
T₃₂ = 0.0721

T₄₄ = 1

Die restlichen Komponenten sind 0.

Beispiele feColorMatrix

Ein Filter, bei dem sich der Farbton per Animation einmal pro Minute komplett dreht:

<filter id="feCM" filterUnits="userSpaceOnUse"
x="0" y="0" width="500" height="500">
<feColorMatrix id="CM"
x="0" y="0" width="500" height="500"
type="hueRotate"
values="180">
<animate attributeName="values"
	 values="0;360"
	 dur="60s" repeatDur="indefinite"/>
</feColorMatrix>
</filter>

Farbmatrix vom Typ 'matrix' (abdunkeln und drehen im Unterraum rot und grün und halbdurchsichtig machen):

<feColorMatrix id="CM"
   x="0" y="0" width="500" height="500"
  type="matrix"
  values="
.7 .7 0 0 0
-.7 .7 0 0 0
0 0 1 0 0
0 0 0 .5 0" />

Einige Beispiele zur Transformation von Farbkanälen per Matrix. Links oben ist das ungefilterte Ausgangsbild zu sehen:

Farbrotation
Es wird eine Farbrotation angewendet, Differenzwinkel jeweils 60 Grad.

Sättigung
Es wird ein Sättigungswert angegeben, jeweils um 0.2 fallend.

Leuchtdichte
Bei dem Filterergebnis rechts wird die Leuchtdichte in den Alphakanal konvertiert.

Tauschen
Die Matrizen werden hier nur verwendet, um Farbkanäle miteinander zu vertauschen.

mehr...
Weitere Beispiele...

Urfilter feComponentTransfer mit feFuncR, feFuncG, feFuncB und feFuncA

SVG
1.1	-	9	-	-	-	?	?	?

linear

gamma

diskret nach Tabelle

nach Tabelle

Pixelweise werden die Farbkanäle und der Alphakanal transformiert. Mit den Buchstaben R (rot), G (grün), B(blau), A (Alpha, Transparenz) für die Kanäle ergibt sich aus den Kanälen R,G,B,A, vor der Transformation durch die Transformation die Kanäle R',G',B',A' nach der Transformation:

R' = feFuncR(R)
G' = feFuncG(G)
B' = feFuncB(B)
A' = feFuncA(A)

Das erlaubt zum Beispiel Änderungen der Helligkeit, des Kontrastes und der Farbbalanz.

Während feComponentTransfer Ein- und Ausgabe und Unterregion festlegt, wird mit den Unterelementen feFuncR, feFuncG, feFuncB und feFuncA die Transformation festgelegt.

Wird eines der Unterelemente mehrmals im selben feComponentTransfer notiert, so wird nur das letzte angewendet. Ist ein Unterelement gar nicht angegeben, so wird für den entsprechenden Kanal die Identitätstransformation angenommen.

Sei im Folgenden C der Wert vor der Transformation eines Kanals, C' danach. Der Wert ist jeweils als Wert aus dem Intervall [0;1] anzunehmen, also 0 für keinen Anteil, 1 für vollen Anteil.

Folgende Attribute sind anwendbar auf all diese Unterelemente:

Attribut type

Mit dem Attribut type wird angegeben, welche Transformation ausgeführt werden soll. Es legt fest, ob die anderen Attributen eine Bedeutung haben oder welche Bedeutung die anderen Attribute haben.

Mögliche Werte sind:

identity

Identität, keine Änderung

table

Nach Tabelle

discrete

Diskrete Tabelle

linear

Affine Transformation

gamma

Exponentielle Funktion

Das Attribut ist animierbar.

Attribut tableValues

Mit dem Attribut wird für Typen 'table' und 'discrete' eine Tabelle zum Nachschlagen von Werten angegeben- Der Wert ist eine Liste von Zahlen.

Eine leere Liste entspricht einer Identitätstransformation (keine Änderung). Ist das Attribut nicht angegeben, so wird ebenfalls eine Identitätstransformation angenommen.

Das Attribut ist animierbar.

tableValues für type='table'

tableValues sei eine Liste von n+1 Werten v₀ bis v_n und type sei 'table'.

Für einen Wert C aus [0;1) wähle k, so dass k/n <= C < (k+1)/n
(oder k=floor(C*n); floor heißt abrunden auf die nächste kleinere ganze Zahl), dann ergibt sich:
C' = v_k + (C - k/n)*n * (v_k+1 - v_k)
Für C = 1 ist C' = v_n.

tableValues für type='discrete'

tableValues sei eine Liste von n Werten v₀ bis v_n-1 und type sei 'discrete'.

Für einen Wert C aus [0;1) wähle k, so dass k/n <= C < (k+1)/n
(oder k=floor(C*n); floor heißt abrunden auf die nächste kleinere ganze Zahl), dann ergibt sich:
C' = v_k
Für C = 1 ist C' = v_n-1.

Attribute slope und intercept

Die Attribute finden beim Typ 'linear' Anwendung. Der Wert von beiden ist jeweils eine Zahl.

slope ist die Steigung, intercept ist die Konstante einer affinen Funktion. Ist slope nicht angenommen, wird '1' dafür angenommen, ist intercept nicht angegeben, so wid '0' dafür angenommen.

Beide Attribute sind animierbar.

Es gilt im Falle von type='linear':
C' = slope * C + intercept

Attribute amplitude, exponent und offset

Die Attribute finden beim Typ 'gamma' Anwendung. Der Wert von ihnen ist jeweils eine Zahl.

amplitude ist der Vorfaktor, exponent der Exponent einer Exponentialfunktion, offset ist eine zusätzliche additive Konstante.

Alle drei Attribute sind animierbar.

Es gilt im Falle von type='gamma':
C' = amplitude * C^exponent + offset

Beispiele feComponentTransfer mit feFuncR, feFuncG, feFuncB und feFuncA

Jeder Kanal wird mit einer jeweils anderen Methode modifiziert:

<feComponentTransfer x="0" y="0" width="500" height="500">
  <feFuncR type="linear" slope="0.5" intercept="0.1" />
  <feFuncG type="gamma" exponent="-0.1" amplitude="0.5" offset="0.5" />
  <feFuncB type="table" tableValues="0 .1 1 .5 .7 .2 1" />
  <feFuncA type="discrete" tableValues="0 .1 1 .5 .7 .2 1" />
</feComponentTransfer>

Einige Beispiele zur Transformation von Farbkanälen. Links oben ist das ungefilterte Ausgangsbild zu sehen:
linear
Filter vom Typ linear.

gamma
Filter vom Typ gamma.

diskret nach Tabelle
Filter vom Typ discrete.

nach Tabelle
Filter vom Typ table.

Urfilter feComposite

SVG
1.1	1.7 (teilweise)	9	-	-	-	?	?	?

Kompositionen, einfache Operatoren

Kompositionen, arithmetischer Operator

Kompositionen, einfache Operatoren (2)

Kompositionen, arithmetischer Operator (2)

Mit dem Urfilter können zwei Eingaben miteinander kombiniert werden, wobei Kompositionsmethoden nach Thomas Porter und Tim Duff verwendet werden (over, in, atop, out, xor). Stattdessen kann auch eine komponentenweise arithmetische Operation verwendet werden.

Attribut in2

Mit dem Attribut wird die zweite Eingabe festgelegt. Der Attributwert ist der gleiche wie für in.

Das Attribut ist animierbar.

Attribut operator

Mit dem Attribut wird festgelegt, welcher Operation zur Kombination verwendet werden soll.

Mögliche Werte sind nach den Operationen gemäß Porter und Duff benannt: 'over', 'in', 'out', 'atop' und 'xor'.
Hinzu kommt noch der arithmetische Operator mit dem Wert 'arithmetic'.

Voreinstellung ist 'over'. Das entspricht dem normalen Übereinanderlegen.

Das Attribut ist animierbar.

Die Komposition erfolgt pixelweise. Sei A ein Farbwert des Pixels von in mit der Opazität a und B ein Farbwert des Pixels von in2 mit Opazität b.

'over' entspricht dem üblichen Überlagern in SVG.
Das exakte Ergebnis für den Farbkanal ist C = a*A + (1-a)*b*B.

'in' wählt einen Anteil von A aus, wenn b nicht transparent ist.
Das exakte Ergebnis für den Farbkanal ist C = a*b*A

'out' wählt einen Anteil von A aus, wenn b transparent ist.
Das exakte Ergebnis für den Farbkanal ist C = a*(1-b)*A

'atop' fügt einen Anteil von A zu B hinzu, wenn b nicht transparent ist.
Das exakte Ergebnis für den Farbkanal ist C = a*b*A + (1-a)*b*B

'xor' ist ein anteiliges entweder oder von A und B.
Das exakte Ergebnis für den Farbkanal ist C = a*(1-b)*A + (1-a)*b*B

Um die jeweilige andere Kombination hinzugekommen, sind natürlich in und in2 zu vertauschen, im Zweifelsfalle per Animation während der Darstellung.

Attribute k1, k2, k3, k4

Die Attribute sind nur für den Operator 'arithmetic' anwendbar und stellen die dafür notwendigen Parameter bereit.

Sofern einer davon nicht angegeben ist, wird für diesen '0' angenommen.

Die Attribute sind animierbar.

Ist operator='arithmetic' angegeben, so ist für jeden Kanal:

Ausgabe = k1*in*in2 + k2*in + k3*in2 + k4

Dabei ist in und in2 die jeweilige Eingabe gemäß der gleichnamigen Attribute und die ki sind die Werte der jeweiligen Attribute.

Die Ausgabe wird auf den erlaubten Bereich eingeschränkt.

Beispiele feComposite

Für die Eingaben werden per Animation die Operatoren nach Porter und Duff durchprobiert:

<feComposite in="i1" in2="i2" operator="over">
<animate attributeName="operator"
	values="in; atop; out; xor; over"
	begin="6s"
	dur="60s" />
<animate attributeName="in"
	values="i1;i2"
	begin="6s"
	dur="120s" />
<animate attributeName="in2"
	values="i2;i1"
	begin="6s"
	dur="120s" />
</feComposite>

Durch Animation werden verschiedene Kombinationen der Parameter des arithmetischen Operators durchprobiert:

<feComposite
    in="i1" in2="i2" operator="arithmetic"
    k1=".5" k2=".5" k3=".5" k4=".5">
  <animate attributeName="k1"
	from="0"
	to="1"
	begin="3s"
	dur="3s" />
  <animate attributeName="k2"
	from="0"
	to="1"
	begin="6s"
	dur="3s" />
  <animate attributeName="k3"
	from="0"
	to="1"
	begin="9s"
	dur="3s" />
  <animate attributeName="k4"
	from="0"
	to="1"
	begin="12s"
	dur="3s" />
</feComposite>

Kompositionen, einfache Operatoren
Zehn verschiedene Möglichkeiten zur Komposition von zwei Bildern werden dargestellt. Das erste Bild a zeigt zwei rote Kreise mit blauem Rand, einer davon teiltranparent. Das zweite Bild b zeigt zwei grüne Kreise mit blauem Rand, einer davon teiltranparent. Die Kreise überlappen jeweils etwas.

Kompositionen, arithmetischer Operator
Einige verschiedene Möglichkeiten zur Komposition mit dem Operator 'arithmetic' von zwei Bildern werden dargestellt. Zum Vergleich wird oben links auch noch der Operator 'over' dargestellt. Das erste Bild a zeigt zwei rote Kreise mit blauem Rand, einer davon teiltranparent. Das zweite Bild b zeigt zwei grüne Kreise mit blauem Rand, einer davon teiltranparent. Die Kreise überlappen jeweils etwas.

Kompositionen, einfache Operatoren (2)
Kompositionen, arithmetischer Operator (2)
Wie die vorherigen Beispiele, hier nur für b mit gelben Kreisen mit rotem Rand, um zu sehen, was passiert, wenn a und b gemeinsame Farbkanäle haben.

Urfilter feConvolveMatrix

SVG
1.1	1.7 (teilweise falsch oder gar nicht)	9	3 (teilweise)	-	-	?	?	?

Schärfen oder Weichzeichnen (1)

Schärfen oder Weichzeichnen (2)

Kanten betonen

Bias

edgeMode

kernelUnitLength

preserveAlpha

mehr ...

Mit dem Urfilter feConvolveMatrix kann mittels einer Matrix eine Faltung vorgenommen werden. In der Faltung werden benachbarte Pixel miteinander kombiniert. Die Matrixkomponenten sind jeweils Gewichte, mit der die benachbarten Pixel aufaddiert werden. Die Position der Pixel korrespondiert mit der Position der Matrixkomponenten zueinander.

Weil die Faltung auf Pixelbasis stattfindet, empfiehlt sich die explizite Festlegung von filterRes oder kernelUnitLength, wenn das Ergebnis unabhängig von den aktuellen Anzeigebedingungen sein soll.

Attribut order

Das Attribut legt die Größe der Matrix fest. Der Wert ist eine positive ganze Zahl oder eine Liste von zwei positiven ganzen Zahlen. Ist eine Zahl angegeben, so gibt sie die Dimension der Matrix in x- und y-Richtung an. Sind zwei Zahlen angeben, gibt die erste (n) die Dimension in x-Richtung an, die zweite (m) in y-Richtung.

Ist das Attribut nicht angegeben, wird '3' angenommen. Aufgrund der Prozessorbelastung wird empfohlen, die Dimension relativ klein zu halten.

Das Attribut ist animierbar.

Attribut kernelMatrix

Das Attribut gibt die kernelMatrix als Liste von Zahlen an, bei order='n m' für eine n*m -Matrix sind dies also n*m Werte. Die Zeilen der Matrix werden nacheinander notiert, also erst alle Komponenten der ersten Zeile, dann der zweiten etc.

Das Attribut ist animierbar.

Attribut divisor

Der divisor ist eine Zahl, durch welche das Ergebnis der Faltung geteilt wird. Voreinstellung ist die Summe über alle Matrixkomponenten, falls diese nicht gerade 0 ist, in dem Falle wird 1 angenommen. Der Wert 0 selbst ist ein Fehler und darf nicht angegeben werden. Die Voreinstellung ist eine Art Normierung, welche einen gewissen Ausgleich bietet und es leichter wird, Ergebnisse zu vermeiden, die außerhalb des erlaubten Bereiches für Farbwerte oder Opazitätswerte liegen.

Das Attribut ist animierbar.

Attribut bias

bias ist eine Zahl, welche zu jeder Komponenten des Ergebnisses der Faltung addiert wird, nachdem das Ergebnis durch den divisor geteilt wurde. Voreinstellung ist 0.

Das Attribut ist animierbar.

Attribute targetX und targetY

Die Attribute geben die Postion des Zielpixels der Faltung an, also anschaulich welche Matrixkomponente die Mitte darstellt. targetX also die Komonente in x-Richtung, targetY in y-Richtung.

Der jeweilige Wert liegt also eine nicht negative Zahl und ist kleiner als die Dimension in der jeweiligen Richtung. Links oben ist also für beide der Wert 0. Rechts unten ist jeweils die Dimension minus 1.

Die Voreinstellung ist jeweils die Mitte der Matrix, genauer die jeweilige Dimension geteilt durch 2, ist dies keine ganze Zahl, so wird auf die nächstkleinere Zahl gerundet.

Die Attribute sind animierbar.

Attribut edgeMode

An den Kanten der Filterregion tritt das Problem auf, dass mit der Matrix auch Pixel jenseits der Kante benötigt würden, die aber nicht verfügbar sind. Mit dem Attribut edgeMode wird festgelegt, wie mit solchen fehlenden Pixeln zu verfahren ist.

Mögliche Werte sind:

none

Für fehlende Pixel wird 0 angenommen

duplicate

Für fehlende Pixel wird jeweils der der letzte verfügbare Pixel verwendet, effektiv werden also die Kanten solange wiederholt, bis alle Pixel verfügbar sind

wrap

Für fehlende Pixel wird eine periodische Fortsetzung der Filterregion angenommen, es wird also mit der anderen Seite der Filterregion weitergemacht.

Voreinstellung ist 'duplicate'.

Das Attribut ist animierbar.

Attribut kernelUnitLength

Das Attribut gibt die Auflösung an, wievielen Pixeln als eine Matrixkomponente entspricht. Der Wert ist entweder eine positive Zahl oder eine Liste von zwei positiven Zahlen. Die erste Zahl gibt die Anzahl der Pixel pro Komponente in x-Richtung an, die zweite in y-Richtung. Ist nur eine Zahl angegeben, so gilt diese für beide Richtungen.

Durch Angabe des Attributes wird der Filter skalierbar. Um dies zu erreichen, muss wenigstens kernelUnitLength oder filterRes angegeben werden. In typischen Darstellungsprogramm ist die Effektivtät am höchsten, wenn ein Pixel der Matrix einem der Filterregion entspricht.

Angabe eines nicht positiven Wertes ist ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt.

Das Attribut ist animierbar.

Attribut preserveAlpha

Mit dem Attribut wird angegeben, ob sich die Faltung auf alle Kanäle auswirken soll oder nicht Möglich sind die Werte 'true' und 'false'. Bei 'false' wird auch der Alpha-Kanal mitgefaltet, bei 'true' nicht.

Voreinstellung ist der Wert 'false'.

Das Attribut ist animierbar.

Beispiele feConvolveMatrix

Faltung des Eingangsbildes mit einer 8*8-Matrix:

<feConvolveMatrix in="SourceGraphic"
x="0" y="0" width="500" height="500"
order="8 8"
kernelMatrix="
10 0 0 1 0 0 0 24
0 0 1 2 0 0 0 0
0 1 2 3 1 0 0 0
1 2 3 5 2 1 0 10
0 1 2 3 1 0 0 0
0 0 1 2 0 0 0 2
0 0 0 1 0 0 0 4
25 0 1 2 0 0 0 5
"
divisor="110"
bias="0"
targetX="4"
targetY="4"
edgeMode="none"
kernelUnitLength="1 1"
preserveAlpha="true"
/>

Einige Beispiele zur Matrixfaltung. Links oben ist das ungefilterte Ausgangsbild zu sehen:
Schärfen oder Weichzeichnen (1)
Matrizen der Ordnung 3 zum Schärfen oder Weichzeichnen. Schärfen ergibt sich vor allem durch das Abziehen benachbarter Pixel, wobei etwas in der Größe von einer Einheit übrigbleiben sollte. Mehr oder ein entsprechend kleiner Divisor hellen das Ergebnis auf, weniger oder ein entsprechend großer Divisor dunkeln ab. Ist ferner kein Divisor angegeben, so kehrt sich das Vorzeichen der Matrix um, wenn die Summe negativ wird.

Weichzeichnen ergibt sich durch das Mitteln über benachbarte Pixel. Anders als beim Gaußschen Weichzeichner tragen bei der Matrixfaltung aber nur die nächsten Nachbarn gemäß der Ordnung der Matrix bei, wobei der Autor die Gewichtung selbst bestimmen kann.

Schärfen oder Weichzeichnen (2)
Matrizen der Ordnung 5 zum Schärfen oder Weichzeichnen.

Kanten betonen
Matrizen der Ordnung 5 zum Betonen von Kanten. Eine Betonung von Kanten, also wo eine starke lokale Änderung der Farbe auftritt, ergibt sich durch Matrizen, deren Summe der Einzelkomponenten 0 ist oder nahezu 0 ist. Im letzteren Falle empfiehlt sich die explizite Angabe des Divisors. Dieser kann auch dazu dienen, das Ergebnis aufzuhellen (kleiner Divisor) oder abzudunkeln (großer Divisor).

Bias
Beispiele mit Bias.

edgeMode
Einfluss von edgeMode. Damit dies besser sichtbar wird, ist die Auflösung für die Filter kräftig heruntergesetzt worden, das Ergebnis besteht also nur aus wenigen Pixeln.

Links unten ist none, in der Mitte oben wrap, unten duplicate und rechts mit noch größeren Pixeln oben none, unten wrap.

kernelUnitLength
Einfluss der kernelUnitLength. Verschiedene Auflösungen sind angegeben. Links unten wird die Auflösung animiert. Als praktische Anwendung einer Animation der Auflösung kommt etwa das Ein- oder Ausblenden von Objekten durch Verpixelung in Frage.

preserveAlpha
Einfluss von preserveAlpha, in der Mitte false, rechts true.

mehr ...
Einige weitere interessante Matrizen.

Urfilter feDisplacementMap

SVG
1.1	1.7	9	-	-	-	?	?	?

Radialer Farbverlauf als Verschiebung

Linearer Farbverlauf als Verschiebung

Verschiebung durch Muster, täuscht Ben-Day-Technik vor

Mit diesem Urfilter wird eine lokale Verschiebung einer Eingabe erreicht. Die Pixel der Eingabe gemäß dem Attribut in2 werden verwendet, um die Pixel der Eingabe gemäß dem Attribut in zu verschieben.

Sei P(x,y) die Eingabe gemäß in und P'(x,y) das Ergebnis des Urfilters. Seien ferner XC(x,y) und YC(x,y) jeweils die Komponentenwerte, festgelegt mittels der Attribute xChannelSelector und yChannelSelector. Der Wert des Attributes scale wird entsprechend benannt.

Dann ergibt sich:
P'(x,y) = P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

Die Eigenschaft color-interpolation-filters ist nur anwendbar auf die Eingabe gemäß in2, nicht für die Eingabe gemäß in.

Attribut in2

Mit dem Attribut wird die zweite Eingabe festgelegt. Der Attributwert ist der gleiche wie für in.

Das Attribut ist animierbar.

Attribut scale

Mit dem Attribut wird ein Skalierungsfaktor für die Verschiebung festgelegt. Der Faktor ist gemeint in Einheiten, die festgelegt sind durch primitiveUnits des zugehörigen Elementes filter.

Der Wert ist eine Zahl. Wird 0 angegeben oder das Attribut nicht notiert, ergibt sich keine Verschiebung.

Das Attribut ist animierbar.

Attribute xChannelSelector und yChannelSelector

Mit den Attributen wird angegeben, welche Kanäle für den Filtereffekt verwendeet werden. xChannelSelector gibt den Kanal an, welcher für die x-Richtung verwendet wird, yChannelSelector den für die y-Richtung.

Der Wert ist jeweils einer der Buchstaben 'R', 'G', 'B', 'A' für den entsprechenden Kanal, in der Reihenfolge also rot, grün, blau, alpha.

Die Attribute sind animierbar.

Beispiele feDisplacementMap

Zwei Fragmente im gleichen SVG-Dokument werden als Eingaben verwendet. Von der zweiten Eingabe werden die Kanäle R und B für die Verschiebung verwendet, R für die x-Richtung, B für die y-Richtung.

<filter id="f1" filterUnits="userSpaceOnUse"
  x="0" y="0" width="1" height="1">
<feImage id="fi1" xlink:href="#i1"
  x="0.2" y="0.2" width="0.4" height="0.4" result="i1" />
<feImage id="fi2" xlink:href="#i2"
  x="0.2" y="0.2" width="0.4" height="0.4" result="i2" />
<feDisplacementMap in="i1" in2="i2"
  scale="1"
  xChannelSelector="R"
  yChannelSelector="B"
  x="0" y="0" width="1" height="1" />
</filter>

Radialer Farbverlauf als Verschiebung
Linearer Farbverlauf als Verschiebung
Verschiebung durch Muster, täuscht Ben-Day-Technik vor

Urfilter feMorphology

SVG
1.1	1.7	9	3	-	-	?	?	?

Verdünnen oder Verdicken

Mit dem Urfilter wird ein Verdicken oder Verdünnen der Eingabe veranlasst. Hat die zu filternde Eingabe keine Struktur, so hat der Urfilter keinen Effekt. Bei einem Muster (feTile) werden periodische Randbedingungen verwendet.

Attribut operator

Mit dem Attribut wird festgelegt, ob verdickt oder verdünnt werden soll. Entsprechend sind zwei Werte möglich, 'erode' für verdünnen und 'dilate' für verdicken.

Voreinstellung ist 'erode'.

Das Attribut ist animierbar.

Attribut radius

Mit dem Attribut wird angegeben, um wie viel verdickt oder verdünnt werden soll, also die Ausdehnung oder der Radius des Effektes pro Pixel.

Der Wert ist entweder eine nicht negative Zahl oder eine Liste von exakt zwei nicht negativen Zahlen. Die Angabe einer negativen Zahl ist ein Fehler, welcher zum Abbruch der Darstellung des Dokumentes führt. Wird 0 angegeben, so hat der Filter keinen Effekt, Ist nur ein Wert angegeben, gilt er für x- und y-Richtung. Bei zweien ist der erste für die x- und der zweite für die y-Richtung.

Die Werte sind gemeint in Einheiten, die festgelegt sind durch primitiveUnits des zugehörigen Elementes filter.

Ist das Attribut nicht angegeben, wird 0 angenomen.

Das Attribut ist animierbar.

Beispiele feMorphology

Verdünnung um die Radien 5 und 7:

<feMorphology in="SourceGraphic"
  x="0" y="0" width="500" height="500"
  operator="erode"
  radius="5 7" />

Verdünnen oder Verdicken
feMorphology kann per Animation anhand zweier Ellipsen und der Buchstabenfolge 'SVG' ausprobiert werden.
Ausgangszustand ist ein Filter, welcher das Ausgangsbild verdünnt.
Aktivierung des grünen Knopfes bewirkt ein Umschalten auf Verdickung.
Aktivierung des roten Knopfes bewirkt ein Umschalten zurück auf Verdickung.
Aktivierung des gelben Knopfes bewirkt eine Animation des Attributes radius.

Urfilter feTurbulence

SVG
1.1	1.7	9	3	-	-	?	?	?

Rauschfilter 'turbulence'

Rauschfilter 'fractalNoise'

Rauschfilter als Verschiebungskarte

Rauschfilter als Texturvorlage

Der Urfilter erzeugt ein Bild mit Perlin-Turbulenz. Er kann verwendet werden, um Wolken zu erzeugen oder Marmorierungen. Der Effekt erstreckt sich über die gesamte Unterregion des Urfilters.

Es ist möglich, Bandbreitenbegrenztes Rauschen nur einer Oktave zu erzeugen (eine Oktave ist eine Frequenzverdopplung).

Mit dem Attribut seed kann ein Startwert der Zufallsverteilung festgelegt werden, um immer dasselbe Ergebnis zu erreichen.

Die erzeugten Farbmuster und Teiltransparenzen ergeben sich in dem durch color-interpolation-filters festgelegten Farbraum.

Die SVG-Definition des Urfilters gibt einen Quelltext für ein C-Programm an, mit dem der Effekt berechnet werden kann.

Attribut baseFrequency

Das Attribut gibt die Grundfrequenz(en) des Rauschens an. Der Wert ist entweder eine Zahl oder eine Liste von zwei Zahlen. Bei einer Zahl gilt diese als Grundfrequenz für das Rauschen in x- und y-Richtung. Bei zwei Werten gilt die erste für die x-Richtung, die zweite für die y-Richtung.

Die Angabe einer negativen Zahl ist ein Fehler, welcher zum Abbruch der Darstellung des Dokumentes führt.

Ist das Attribut nicht angegeben, wird 0 angenommen.

Das Attribut ist animierbar.

Attribut numOctaves

Das Attribut gibt die Anzahl der verwendeten Oktaven der Rauschfunktion an.

Der Wert ist eine (positive) ganze Zahl. Ist das Attribut nicht angegeben, wird 1 angenommen. Dass die ganze Zahl positiv sein muss, ergibt sich eher aus dem C-Quelltext, nicht aus der Definition des Attributes selbst.

Das Attribut ist animierbar (aufgrund der Bedingung, dass es eine ganze Zahl sein soll, ergibt sich implizit, dass nur eine diskrete Animation möglich ist, um Überraschungen zu vermeiden, sollte der Autor dies allerdings explizit angeben).

Attribut seed

Das Attribut ist der Startwert für den Zufallsgenerator. Der Wert ist eine Zahl. Ist das Attribut nicht angegeben, so wird 0 angenommen. Es ist also nicht ohne weitere Maßnahmen möglich, in einer einfachen SVG-Datei ein zufälliges Resulat zu erzielen, welches also bei jedem Aufruf anders wäre. Dazu müsste seed per Skript mit einem Wert aus einem Zufallsgenerator gesetzt werden.

Das Attribut ist animierbar.

Attribut stitchTiles

Mit dem Attribut kann festgelegt werden, ob die Grundfrequenz exakt wie angegeben verwendet wird oder and Höhe oder Breite der Filterunterregion angepasst werden soll.

Mögliche Werte sind 'stitch' und 'noStitch'.

Bei 'stitch' wird die Turbulenzfunktion wie angegeben verwendet. Dabei gibt es allerdings an den Rändern der Filterunterregion keine weichen Übergänge, was aber auch nicht immer relevant sein muss.

Bei 'noStitch' werden die Grundfrequenzen so angepasst, dass in die Höhe und die Breite der Filterunteregion ein ganzzahliges Vielfaches des Perlin-Musters der ersten Oktave passt. Es wird jeweils das dem angegebenen Wert nächstgelegene Vielfache verwendet.

Voreinstellung ist 'noStitch'.

Das Attribut ist animierbar.

Attribut type

Das Attribut gibt an, welcher Typ von turbulentem Rauschen verwendet wird. Möglich sind die Werte 'fractalNoise' für fraktales Rauschen und 'turbulence' für turbulentes Rauschen.

Voreinstellung ist 'turbulence'.

Das Attribut ist animierbar.

Beispiele feTurbulence

Der Filter sollte ausgiebig ausprobiert werden, hier werden einige Frequenzen per Animation durchprobiert:

<feTurbulence
x="0" y="0" width="500" height="500"
type="turbulence"
baseFrequency="0.001 0.002"
numOctaves="8"
seed="74.65"
stitchTiles="stitch">
<animate attributeName="baseFrequency"
	values="0.001 0.001;0.01 0.05;0.2 0.1; 0.03 0.04; 0.005 0.004"
	dur="90s" />
</feTurbulence>

Rauschfilter 'turbulence'
Animation von Attributen von feTurbulence für turbulentes Rauschen. Jeweilige Fläche aktivieren oder anklickern, um die Animation auszulösen.

Rauschfilter 'fractalNoise'
Animation von Attributen von feTurbulence für fraktales Rauschen. Jeweilige Fläche aktivieren oder anklickern, um die Animation auszulösen.

Rauschfilter als Verschiebungskarte
Rauschfilter als Texturvorlage
Ellipsen mit den Buchstaben 'SVG' drin werden mit Filtern etwas aufgepeppt.

Beleuchtung und Oberflächenstruktur

Mit einer ganzen Gruppe von Urfiltern kann eine Beleuchtung und eine reliefartige Oberflächenstruktur für die Filterregion vorgetäuscht werden. Zum einen gibt es drei Urfilter und eine Eigenschaft, welche Lichtquellen beschreiben. Dies sind die Elemente feDistantLight, fePointLight, feSpotLight und die Eigenschaft lighting-color. Und dann gibt es zwei Urfilter, welche die Art der Beleuchtung festlegen, dies sind feDiffuseLighting und feSpecularLighting.

Eines der Elemente feDistantLight, fePointLight oder feSpotLight ist jeweils Kindelement von feDiffuseLighting oder feSpecularLighting. Für mehrere Lichtquellen sind dann jeweils mehrere Elemente feDiffuseLighting oder feSpecularLighting anzugeben und miteinander zu kombinieren.

Das verwendete Modell ist ein Modell nach Bui-Tuong Phong. Mit dem empirischen Modell können glatte Oberflächen wie Plastik ganz gut beschrieben werden. Es basiert allerdings nicht auf physikalisch haltbaren Grundlagen und reklektierende Aspekte der Darstellung werden nur phänomenologisch berücksichtigt, um mit einem einfachen Effekt eine Illusion einer beleuchteten Oberfläche hervorzurufen. Reale spiegelnde Oberfläche ergeben ein mehr oder weniger deutliches Abbild von gespiegelten Lichtquellen oder beleuchteten Objekten. Dies leistet das Modell nicht - woher sollte dem Darstellungsprogramm bekannt sein, was sich vor dem Darstellungsbereich befindet, was sich spiegeln könnte (sogenannte webcams sind jedenfalls nicht Bestandteil dieses Modells, um die Illusion zu verbessern).

Da SVG ja nicht dafür konzipiert ist, eine dreidimensionale Szenerie zu beschreiben, sondern zweidimensionale Graphiken, sind diese Urfilter nur als rudimentäre Erweiterung zu verstehen, um die Illusion von dreidimensionalen, reliefartigen Flächen aus den zweidimensionalen Graphiken zu erzeugen. Für diesen Zweck ist das Modell nach Phong recht gut einsetzbar.

Neben den in SVG bereits verwendeten Richtungen x und y kommt mit der Beleuchtung und Oberflächenstruktur noch eine weitere Richtung hinzu, dies ist die z-Richtung. Sie zeigt vom Darstellungsbereich zum Betrachter. Ein negativer z-Wert befindet sich also vom Betrachter aus gesehen hinter dem Darstellungsbereich, ein positiver davor.

Eigenschaft lighting-color, Beleuchtungsfarbe

SVG
1.1	1.7	9	3	-	-	?	?	?

Die Eigenschaft legt die Farbe der Beleuchtung fest und ist anwendbar auf die Elemente feDiffuseLighting und feSpecularLighting.

Mögliche Werte sind 'currentColor', 'inherit' oder ein Farbwert, wie bereits für die Eigenschaft fill erläutert. Der Initialwert ist weiß, also 'white' (#fff). Die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiele lighting-color

Beleuchtungsfarbe (1)

Beleuchtungsfarbe (2)

Einige Beispiele zur Beleuchtungsfarbe. Links oben ist jeweils das ungefilterte Ausgangsbild zu sehen. Diffuses Licht kommt von rechts, pro Bild jeweils in anderer Farbe.

Beleuchtungsfarbe (1)
Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Beleuchtungsfarbe (2)
Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Urfilter feDistantLight, entfernte Lichtquelle

SVG
1.1	1.7	9	3 (teilweise falsche Filterregion)	-	-	?	?	?

Azimutaler Winkel

Höhenwinkel

Animation

Mit dem Urfilter wird eine unendlich weit entfernte Lichtquelle angegeben.

Attribute azimuth und elevation

Um solch eine Lichtquelle zu charakterisieren, ist es nur notwendig, eine Richtung festzulegen, aus der das Licht kommt. Dazu dienen die Attribute azimuth und elevation.

Allerdings ist die Definition der Attribute in den aktuellen Versionen von SVG falsch beschrieben (dies ergäbe zwei Richtungen und ist so auch nirgends implementiert.

Der Wert ist jeweils eine Zahl, welche einen Winkel in Grad repräsentiert. Voreinstellung ist 0. Die Attribute sind animierbar.

azimuth ist ein Winkel von der x-Achse aus (Richtung y-Achse wie üblich in SVG) in der von der x- und y-Achse aufgepannten Ebene. Sei jene Richtung, welche sich ergibt, wenn die x-Achse um den angegebenen Winkel gedreht wird, die a-Achse. elevation ist ein Winkel von der a-Achse aus in Richtung der z-Achse in der von der a- und z-Achse aufgespannten Ebene. Allgemeiner ist elevation der Winkel zwischen der xy-Ebene und der Richtung zur Lichtquelle, auch Höhenwinkel genannt.
Die Richtung zur Lichtquelle ergibt sich, wenn die a-Achse um den angegebenen Winkel gedreht wird, die so entstehende Achse zeigt dann in Richtung der Lichtquelle.

Ist also insbesondere elevation='0', so liegt die Lichtquelle in der xy-Ebene. Ist azimuth='0', so liegt die Lichtquelle in Richtung der x-Achse. Das Licht kommt also im lokalen Koordinatensystem von rechts. Ist azimuth='90', so liegt die Lichtquelle in Richtung der y-Achse. Das Licht kommt also im lokalen Koordinatensystem von unten.
Ist elevation='90', liegt die Lichtquelle in Richtung der z-Achse, also senkrecht über der Ebene, jenseits des Betrachters, egal welchen Wert azimuth hat. Die Filterregion wird exakt von oben beleuchtet.
Sind zum Beispiel azimuth und elevation beide '45', so trifft das Licht also unter einem Winkel von 45 Grad von oberhalb der Ebene auf die Filterregion. Die Projektion der Richtung zum Licht auf die xy-Ebene ergibt die Richtung der Winkelhalbierenden von x- und y-Richtung.

Beispiele feDistantLight

Diffuse Beleuchtung von einer unendlich weit entfernten grünen Lichtquelle. Die Lichtquelle ändert ihre Richtung per Animation:

<filter id="DL"
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="500" height="500">
  <feDiffuseLighting
      surfaceScale="10"
      diffuseConstant="1"
      lighting-color="#080">
    <feDistantLight azimuth="45" elevation="45">
      <animate attributeName="azimuth"
	values="0;360"
	dur="29.479s"
	repeatDur="indefinite" />
      <animate attributeName="elevation"
	values="0;90;0"
	dur="61.143s"
	repeatDur="indefinite" />
    </feDistantLight>
  </feDiffuseLighting>
</filter>

Einige Beispiele zur Beleuchtung mit unendlich weit entfernter Lichtquelle. Links oben ist das ungefilterte Ausgangsbild zu sehen. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Azimutaler Winkel
Änderung des azimutalen Winkels (0, 72, 144, 216, 288 Grad) bei einer Lichtquelle 45 Grad über der Ebene. Die Richtung ist jeweils mit einem roten Pfeil angedeutet.

Höhenwinkel
Änderung des Höhenwinkels, des Winkels zur Zeichenebene (0, 72, 144, 216, 288 Grad) bei einer Lichtquelle mit einem azimutalen Winkel von 45 Grad. Die Richtung ist jeweils mit einem roten oder blauen Pfeil angedeutet. Die Länge des Pfeiles ergibt sich aus der Projektion eines immer gleichlangen Pfeiles auf die Zeichenebene. Rote Pfeile kennzeichnen eine Lichtquelle in oder oberhalb der Zeichenebene, blau darunter.

Animation
Die Position der Lichtquelle wird jeweils animiert. Ausgangsbild und Beleuchtung werden auch verschiedene Weise kombiniert.

Urfilter fePointLight, Punktlichtquelle

SVG
1.1	1.7	9	3 (teilweise falsch und falsche Filterregion)	-	-	?	?	?

x-y-Position

z-Position

z-Position und Intensität

Animation

Mit dem Urfilter wird eine endlich weit entfernte Punktlichtquelle angegeben.

Attribute x, y und z

Mit den Attributen wird die Position der Lichtquelle angegeben. Der Wert ist jeweils eine Zahl, welche eine Koordinaten in den Einheiten darstellt, welche durch primitiveUnits des zugehörigen Elementes filter festgelegt sind. Also legt x die x-Koordinate fest, y die y-Koordinate und z die z-Koordinate.

Voreinstellung ist jeweils '0'. Die Attribute sind animierbar.

Zum Beispiel liegt x='0' y='0' z='1000' um 1000 Einheiten von der Zeichenebene aus in Richtung des Betrachters über dem lokalen Ursprung.

Beispiele fePointLight

Diffuse Beleuchtung von einer rosa Punktlichtquelle. Die Lichtquelle ändert ihre Position per Animation:

<filter id="DL" filterUnits="userSpaceOnUse"
    x="0" y="0" width="500" height="500">
  <feDiffuseLighting
      x="0" y="0" width="500" height="500"
      surfaceScale="10"
      diffuseConstant="1"
      kernelUnitLength="1"
      lighting-color="#f8f">
    <fePointLight x="500" y="250" z="250">
      <animate attributeName="x"
	values="0;100;500;100;0"
	dur="30s"
	repeatDur="indefinite" />
      <animate attributeName="y"
	values="0;500;400;-100;0"
	dur="31s"
	repeatDur="indefinite" />
      <animate attributeName="z"
	values="0;1000;500;-100;0"
	dur="37s"
	repeatDur="indefinite" />
    </fePointLight>
  </feDiffuseLighting>
</filter>

Einige Beispiele zur Beleuchtung mit punktförmiger Lichtquelle. Links oben ist das ungefilterte Ausgangsbild zu sehen. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

x-y-Position
Die Position oberhalb der Zeichenebene ist immer dieselbe, ansonsten ist die Position mit einem kleinen roten gestrichenen Kreis markiert.

z-Position
Die Position z zur Zeichenebene ändert sich, oben -50 und -500 (also Lichtquelle unter der Zeichenebene), unten 5, 50 und 500 (also Lichtquelle oberhalb der Zeichenebene). Ansonsten ist die Position mit einem kleinen roten gestrichenen Kreis markiert.
Da ansonsten an Lichtquelle und Motiv nichts verändert wird, ist deutlich zu erkennen, dass die Darstellung nichts mit realen Lichtquellen zu tun hat, dort müsste eine Lichtquelle mit kleinem positiven z mehr Licht auf derselben Stelle der Oberfläche produzieren als bei größerem z. Um einen realistischeren Effekt zu erhalten, müsste die Intensität der Farbe der Lichtquelle entsprechend bei großen z quadratisch zum z verkleinert werden.

z-Position und Intensität
Die Position z zur Zeichenebene ändert sich, z ist 200, 225, 250, 275 und 300. Zusätzlich wird die Farbe der Lichtquelle entsprechend so an den Abstand angepasst, als ob die Lichtquelle immer die gleiche Menge Licht abgeben täte. Ansonsten ist die Position mit einem kleinen roten gestrichenen Kreis markiert.

Animation
Die Position der Lichtquelle wird jeweils animiert und mit der Ausgangsgraphik in einer Komposition kombiniert.

Urfilter feSpotLight, Scheinwerfer

SVG
1.1	1.7	9	3 (falsch)	-	-	?	?	?

x-y-Position

z-Position

Zielpunkt

z-Zielpunkt

Strahlkegel

Strahlprofil

Animation

Mit dem Urfilter wird ein Scheinwerfer als Lichtquelle angegeben.

Attribute x, y und z

Mit den Attributen wird die Position der Lichtquelle angegeben. Der Wert ist jeweils eine Zahl, welche eine Koordinaten in den Einheiten darstellt, welche durch primitiveUnits des zugehörigen Elementes filter festgelegt sind. Also legt x die x-Koordinate fest, y die y-Koordinate und z die z-Koordinate.

Voreinstellung ist jeweils '0'. Die Attribute sind animierbar.

Zum Beispiel liegt x='0' y='0' z='1000' um 1000 Einheiten von der Zeichenebene aus in Richtung des Betrachters über dem lokalen Ursprung.

Attribute pointsAtX, pointsAtY und pointsAtZ

Mit den Attributen wird angegeben, wohin der Scheinwerfer zeigt, also den Zielpunkt des Scheinwerfers.

Der Wert ist jeweils eine Zahl, welche eine Koordinaten in den Einheiten darstellt, welche durch primitiveUnits des zugehörigen Elementes filter festgelegt sind. Also legt pointsAtX die x-Koordinate fest, pointsAtY die y-Koordinate und pointsAtZ die z-Koordinate.

Voreinstellung ist jeweils '0'. Die Attribute sind animierbar.

Zum Beispiel liegt pointsAtX='0' pointsAtY='0' pointsAtZ='-100' um 100 Einheiten vom Betrachter aus gesehen hinter der Zeichenebene unter dem lokalen Ursprung.

Attribut specularExponent

Das Attribut bestimmt die Eigenschaften des Stahlprofiles oder der Winkelverteilung der Intensität des Scheinwerferlichtes. Der Wert ist eine Zahl. 0 bedeutet eine gleichmäßige Ausleuchtung.
Zahlen größer als 0 sorgen dafür, dass das Scheinwerferlicht in der mitte Intensiver ist als außen, je höher der Unterschied, desto dunkter wird es außen.
Zahlen kleiner als 0 sind eher nicht realistisch, um realen Scheinwerfer vorzutäuschen und führen im Außenbereich zu einer Aufhellung des Scheinwerferlichtes gegenüber der Mitte, sofern der jeweilige Kanal nicht schon den maximalen Wert erreicht hat. Zu große Farbwerte werden dann einfach auf den maximalen Wert eingeschränkt.

Voreinstellung ist 1.

Das Attribut ist animierbar.

Attribut limitingConeAngle

Das Scheinwerferlicht sorgt nur für eine Beleuchtung innerhalb eines Kegels um die Richtung herum, die von der Lichtquelle zum Zielpunkt des Scheinwerfers. Das Attribut gibt den Winkel zwischen der Achse und dem Kegelmantel an. Darstellungsprogramme sollten auf den Rand allerdings einen nicht im Detail festgelegten Weichzeichner anwenden, um einen pixeligen Rand zu vermeiden.

Der Wert ist eine Zahl, die einen Winkel in Grad repräsentiert. Ist das Attribut nicht angegeben, wird keine Einschränkung durch einen Kegel angenommen. Der Bereich der Ausleuchtung bestimmt sich dann nur durch die anderen Attribute, zum Beispiel das Strahlprofil gemäß specularExponent.

Das Attribut ist animierbar.

Beispiele feSpotLight

Scheinwerfer mit animierten Strahlprofil:

<filter id="DL"
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="500" height="500">
  <feDiffuseLighting
      surfaceScale="100"
      diffuseConstant="1"
      lighting-color="#444">
    <feSpotLight x="500" y="250" z="500"
        pointsAtX="400" pointsAtY="250" pointsAtZ="0"
        specularExponent="10" limitingConeAngle="30">
      <animate attributeName="specularExponent"
	values="0;10;100;1000;100;10;0;-1;-100"
	dur="60s" begin="5s" />	
    </feSpotLight>	
  </feDiffuseLighting>
</filter>

Einige Beispiele zur Beleuchtung mit Scheinwerfer. Links oben ist das ungefilterte Ausgangsbild zu sehen. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

x-y-Position
Die Position oberhalb der Zeichenebene und die Eigenschaften der Scheinwerfers sind immer dieselben, ansonsten ist die Position mit einem kleinen roten gestrichenen Kreis markiert. Der Scheinwerfer zeigt jeweils auf die Mitte des Motivs.

z-Position
Die Eigenschaften der Scheinwerfers sind immer dieselben. Der Scheinwerfer zeigt jeweils auf die Mitte des Motivs. Die Position z zur Zeichenebene ändert sich, oben -50 und -500 (also Lichtquelle unter der Zeichenebene), unten 5, 50 und 500 (also Lichtquelle oberhalb der Zeichenebene). Ansonsten ist die Position mit einem kleinen roten gestrichenen Kreis markiert. Da ansonsten an Lichtquelle und Motiv nichts verändert wird, ist deutlich zu erkennen, dass die Darstellung nichts mit realen Lichtquellen zu tun hat, dort müsste eine Lichtquelle mit kleinem positiven z mehr Licht auf derselben Stelle der Oberfläche produzieren als bei größerem z. Um einen realistischeren Effekt zu erhalten, müsste die Intensität der Farbe der Lichtquelle entsprechend bei großen z quadratisch zum z verkleinert werden.

Zielpunkt
Die Eigenschaften der Scheinwerfers sind immer dieselben. Die Position des Scheinwerfers ist die linke obere Ecke mit z=100. Auf welchen Punkt der Ebene der Scheinwerfer leuchtet, ist mit einem kleinen roten gestrichenen Kreis markiert.

z-Zielpunkt
Die Eigenschaften der Scheinwerfers sind immer dieselben. Die Position des Scheinwerfers ist die linke obere Ecke mit z=100. Zwar zeigt der Scheinwerfer immer in Richtung der Mitte bezogen auf x und y, allerdings variiert z, oben 20 und 200, unten 0, -20, -200.

Strahlkegel
Die Position des Scheinwerfers ist die linke obere Ecke mit z=300. Der Scheinwerfer zeigt immer in Richtung der Mitte. Der Scheinwerferkegelwinkel ändert sich, die Winkel sind 10, 20, 30, 40, 50 Grad.

Strahlprofil
Der Scheinwerfer zeigt immer in Richtung der Mitte. Die Winkelverteilung des Scheinwerferlichtes ändert sich, das Attribut specularExponent hat entsprechend die Werte -2, 0, 1, 4, 16.

Animation
Der Scheinwerfer wird jeweils animiert und per Animation nur das angezeigt, was im Scheinwerferlicht liegt.

Urfilter feDiffuseLighting, diffuse Beleuchtung

SVG
1.1	1.7	9	3 (teilweise und falsche Filterregion)	-	-	?	?	?

Oberfläche (1)

Oberfläche (2)

diffuse Konstante (1)

diffuse Konstante (2)

kernelUnitLength

Kanten ...

Mit dem Urfilter wird eine diffuse Beleuchtung gemäß Phong-Modell realisiert. Dabei ergibt sich das Relief der Oberfläche aus dem Alpha-Kanal.

Um mehrere Lichtquellen feDistantLight, fePointLight und feSpotLight miteinander zu kombinieren, müssen mehrere Urfilter feDiffuseLighting mit jeweils einer Lichtquelle notiert werden und deren Ergebnisse können dann miteinander kombiniert werden.

Weil die Berechnung pixelweise stattfindet, ist das Ergebnis abhängig von der Auflösung. Es empfielt sich die explizite Festlegung von filterRes oder kernelUnitLength, wenn das Ergebnis unabhängig von den aktuellen Anzeigebedingungen sein soll.

In der Definition ist präzise in Formeln angegeben, wie sich der Filtereffekt berechnet.

Attribut kernelUnitLength

Das Attribut gibt die Auflösung. Der Wert ist entweder eine positive Zahl oder eine Liste von zwei positiven Zahlen. Die erste Zahl gibt die Anzahl der Pixel pro Komponente in x-Richtung an, die zweite in y-Richtung. Ist nur eine Zahl angegeben, so gilt diese für beide Richtungen.

Durch Angabe des Attributes wird der Filter skalierbar. Um dies zu erreichen, muss wenigstens kernelUnitLength oder filterRes angegeben werden. In typischen Darstellungsprogramm ist die Effektivtät am höchsten, wenn ein Pixel der Matrix einem der Filterregion entspricht.

Angabe eines nicht positiven Wertes ist ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt.

Das Attribut ist animierbar.

Attribut surfaceScale

Das Attribut gibt einen Skalierungsfaktor an, der bestimmt, welche z-Koordinate sich aus dem Alphakanal ergibt, also z = surfaceScale * Alphakanalwert.

Der Wert ist eine Zahl. Voreinstellung ist 1. Das Attribut ist animierbar.

Attribut diffuseConstant

Das Attribut gibt den Reflexionsfaktor für die diffuse Komponente der Reflexion nach dem Phong-Beleuchtungsmodell an. Der Wert ist eine nicht negative Zahl. Ein kleiner Wert ergibt also wenig diffus gestreutes Licht von der Oberfläche. Typisch sind Werte zwischen 0 und 1, da nicht weniger als nichts diffus gestreut werden kann und nicht mehr als alles. Andererseits ist das Modell aber ohnehin nicht besonders realistisch, so dass auch größere Werte nicht schaden. Gegebenenfalls wird einfach bei der Darstellung das Ergebnis der Farbkanäle auf den erlaubten Bereich eingeschränkt.

Voreinstellung ist 1. Das Attribut ist animierbar.

Beispiele feDiffuseLighting

Diffuse Beleuchtung mit rotem Scheinwerfer:

<filter id="DL"
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="500" height="500">
  <feDiffuseLighting
      surfaceScale="1"
      diffuseConstant="0.7"
      kernelUnitLength="1"
      lighting-color="#f00">
    <feSpotLight x="250" y="500" z="500"
        pointsAtX="200" pointsAtY="200" pointsAtZ="0"
        specularExponent="12" limitingConeAngle="60" />
  </feDiffuseLighting>
</filter>

Einige Beispiele zur diffusen Beleuchtung. Links oben ist das ungefilterte Ausgangsbild zu sehen.

Oberfläche (1)
Es werden jeweils unterschiedliche Höhen für die Oberfläche angegeben, unten positiv, von links nach rechts steigend, in der Mitte und rechts darüber entsprechende negative Werte.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Um Kanten besser sichtbar zu machen, kann es auch hilfreich sein, einen Weichzeichner auf den Alphakanal anzuwenden, welcher die Teiltransparenz etwas verschmiert, so dass die Kanten etwas breiter und mit mehr Werten auftreten, Beleuchtungseffekte an solchen Kanten also auch etwas ausgedehnter sind.

Oberfläche (2)
Es werden jeweils unterschiedliche Höhen für die Oberfläche angegeben, unten positiv, von links nach rechts steigend, in der Mitte und rechts darüber entsprechende negative Werte.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

diffuse Konstante (1)
Einfluss der diffusen Konstante.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

diffuse Konstante (2)
Einfluss der diffusen Konstante.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Statt die diffuse Konstante des Beleuchtungsurfilters zu ändern, könnte in diesem Beispiel auch der Anteil in der Komposition verändert werden.

kernelUnitLength
Einfluss der kernelUnitLength.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Kanten...
Es werden jeweils unterschiedliche Höhen für die Oberfläche angegeben, kombiniert mit Weichzeichnern, welche die Kanten etwas verbreitern.

Diffuses Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Urfilter feSpecularLighting, Glanzlichter

SVG
1.1	1.7	9	3 (teilweise und falsche Filterregion)	-	-	?	?	?

Oberfläche (1)

Oberfläche (2)

Reflexionsstärke (1)

Reflexionsstärke (2)

Reflexionsexponent (1)

Reflexionsexponent (2)

kernelUnitLength

mit Weichzeichner

diffuse und reflektierende Beleuchtung

Mit dem Urfilter werden Glanzlichter gemäß Phong-Modell realisiert. Ausgangspunkt dafür ist ähnlich wie für feDiffuseLighting der Alpha-Kanal.

Um mehrere Lichtquellen feDistantLight, fePointLight und feSpotLight miteinander zu kombinieren, müssen mehrere Urfilter feSpecularLighting mit jeweils einer Lichtquelle notiert werden und deren Ergebnisse können dann miteinander kombiniert werden.

Oft werden feSpecularLighting und feDiffuseLighting innerhalb eines Filters miteinander kombiniert, welche typische Flächen sowohl teilweise spiegelnde Reflexion als auch diffuse Streuung aufweisen.

Weil die Berechnung pixelweise stattfindet, ist das Ergebnis abhängig von der Auflösung. Es empfielt sich die explizite Festlegung von filterRes oder kernelUnitLength, wenn das Ergebnis unabhängig von den aktuellen Anzeigebedingungen sein soll.

Attribut kernelUnitLength

Das Attribut gibt die Auflösung. Der Wert ist entweder eine positive Zahl oder eine Liste von zwei positiven Zahlen. Die erste Zahl gibt die Anzahl der Pixel pro Komponente in x-Richtung an, die zweite in y-Richtung. Ist nur eine Zahl angegeben, so gilt diese für beide Richtungen.

Durch Angabe des Attributes wird der Filter skalierbar. Um dies zu erreichen, muss wenigstens kernelUnitLength oder filterRes angegeben werden. In typischen Darstellungsprogramm ist die Effektivtät am höchsten, wenn ein Pixel der Matrix einem der Filterregion entspricht.

Angabe eines nicht positiven Wertes ist ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt.

Das Attribut ist animierbar.

Attribut surfaceScale

Das Attribut gibt einen Skalierungsfaktor an, der bestimmt, welche z-Koordinate sich aus dem Alphakanal ergibt, also z = surfaceScale * Alphakanalwert.

Der Wert ist eine Zahl. Voreinstellung ist 1. Das Attribut ist animierbar. In der Definition ist präzise in Formeln angegeben, wie sich der Filtereffekt berechnet.

Attribut specularConstant

Das Attribut gibt den Reflexionsfaktor für die spiegelnde Komponente der Reflexion nach dem Phong-Beleuchtungsmodell an. Der Wert ist eine nicht negative Zahl. Ein kleiner Wert ergibt also wenig diffus gestreutes Licht von der Oberfläche. Typisch sind Werte zwischen 0 und 1, da nicht weniger als nichts diffus gestreut werden kann und nicht mehr als alles. Andererseits ist das Modell aber ohnehin nicht besonders realistisch, so dass auch größere Werte nicht schaden. Gegebenenfalls wird einfach bei der Darstellung das Ergebnis der Farbkanäle auf den erlaubten Bereich eingeschränkt.

Voreinstellung ist 1. Das Attribut ist animierbar.

Attribut specularExponent

Das Attribut gibt den Exponenten für den spiegelnden Anteil nach dem Phong-Beleuchtungsmodell an. Der Wert ist eine Zahl zwischen 1 und 128. Ist das Attribut nicht angegeben, wird 1 angenommen. Ein größerer Wert bedeutet jeweils ein stärkeres Glänzen der Reflexion, also ein ausgeprägteres Glanzlicht.

Das Attribut ist animierbar.

Beispiele feSpecularLighting

Glanzlicht mit gelber Punktlichtquelle:

<feSpecularLighting id="fSL"
    x="0" y="0" width="500" height="500"
    surfaceScale="100"
    specularConstant="0.7"
    specularExponent="4"
    lighting-color="#ff1">
  <fePointLight x="500" y="250" z="120" />
</feSpecularLighting>

Einige Beispiele zur reflektierenden Beleuchtung. Links oben ist das ungefilterte Ausgangsbild zu sehen.

Oberfläche (1)
Es werden jeweils unterschiedliche Höhen für die Oberfläche angegeben, unten positiv, von links nach rechts steigend, in der Mitte und rechts darüber entsprechende negative Werte.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Um Kanten besser sichtbar zu machen, kann es auch hilfreich sein, einen Weichzeichner auf den Alphakanal anzuwenden, welcher die Teiltransparenz etwas verschmiert, so dass die Kanten etwas breiter und mit mehr Werten auftreten, Beleuchtungseffekte an solchen Kanten also auch etwas ausgedehnter sind.

Oberfläche (2)
Es werden jeweils unterschiedliche Höhen für die Oberfläche angegeben, unten positiv, von links nach rechts steigend, in der Mitte und rechts darüber entsprechende negative Werte.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Reflexionsstärke (1)
Einfluss der reflektierenden Konstante.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Reflexionsstärke (2)
Einfluss der reflektierenden Konstante.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Statt die reflektierende Konstante des Beleuchtungsurfilters zu ändern, könnte in diesem Beispiel auch der Anteil in der Komposition verändert werden.

Reflexionsexponent (1)
Einfluss des reflektierenden Exponenten.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

Reflexionsexponent (2)
Einfluss des reflektierenden Exponenten.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

kernelUnitLength
Einfluss der kernelUnitLength.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und übereinanderliegenden Rechtecken.

mit Weichzeichner
Es werden jeweils unterschiedliche Höhen für die Oberfläche und andere Exponenten für die Lichtquelle angegeben, kombiniert mit Weichzeichnern, welche die Kanten etwas verbreitern.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die reflektierende Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

diffuse und reflektierende Beleuchtung
Es werden jeweils verschiedene Anteile von diffuser und reflektierender Beleuchtung gemischt und kombiniert mit Weichzeichnern, welche die Kanten etwas verbreitern.

Licht kommt von rechts. Das beleuchtete Motiv besteht aus einem großen Kreis und zwei Rechtecken, eines davon mit einem turbulenten Muster. Per Komposition wird die diffuse und reflektierende Beleuchtung einer gleichmäßigen Beleuchtung überlagert.

Beim letzten Beispiel unten rechts wird zusätzlich die Reflexion mit dem weichgezeichneten Alphakanal maskiert, damit kein Licht auf den schwarzen Hintergrund wirkt.

Literatur

• SVG 1.1 Filter (en)
• Arbeitsentwurf SVG 1.2 Filter-Modul (en)
• T. Porter and T. Duff - Compositing Digital Images SIGGRAPH 84 (Computer Graphics Volume 18, Number 3 July 1984) pp 253-259 (en, PDF)
•  Phong-Beleuchtungsmodell
•  Perlin-Rauschen
• Willhelm Burger: Gradientenbasierte Rauschfunktion und Perlin Noise (2008)

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |