Das Filter-Element feConvolveMatrix

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Mit dem Filter-Element <feConvolveMatrix> können Sie eine Matrix definieren, mit der Sie benachbarte Pixel der Grafik manipulieren können. Wenn Sie bspw. eine 3x3-Matrix definieren, werden die Werte dieser Matrix mit den entsprechenden Werten der Grafik multipliziert und durch die Summe aller Werte in der Matrix geteilt. Den Werten in der Grafik wird der so berechnete Wert zugewiesen. Die folgende Abbildung zeigt links die Matrix der zu bearbeitenden Grafik und rechts die Matrix des Filters.

Links die Matrix der zu bearbeitenden Grafik und rechts die Matrix des Filters

Abbildung: Links ist die Matrix der zu bearbeitenden Grafik und rechts die Matrix des Filters.

Wenn Sie nun den Filter auf die linke Matrix anwenden, werden nacheinander alle Pixel in Blöcken bearbeitet, die der Größe der Filtermatrix, in diesem Fall 3x3 Pixeln, entsprechen. Begonnen wird dabei in diesem Fall mit dem grau unterlegten Teil der Matrix.

Die Berechnung erfolgt wie folgt: Die Pixel beider Matrizen werden multipliziert und die Produkte addiert. Dieser Wert wird durch die Summe der Werte in der Filtermatrix geteilt. Für die Matrizen in der obigen Abbildung berechnet sich also jeder Wert im grau unterlegten Bereicht wie folgt:

Ergebnis = (255*1 + 255*2 + 0*3 + 255*4 + 255*5 + 0*6 + 255*7 + 255*8 + 0*9) / (1+2+3+4+5+6+7+8+9)

In der nächsten Abbildung finden Sie die ursprünglichen und berechneten Matrizen. Die tabellarische Form der Darstellung wurde gewählt, weil sie dem Pixelraster einer Grafik ähnlicher ist, als die in der Mathematik übliche Darstellung einer Matrix.

Ursprüngliche und neu berechnete Matrix

Abbildung: Ursprüngliche und neu berechnete Matrix.

Das Filter-Element <feConvolveMatrix> verfügt neben den Universalattributen über folgende Attribute.

  • order legt die Größe der Matrix für den Filter fest. Sie können entweder nur die Breite oder Breite und Höhe festlegen. Wenn Sie die Höhe nicht angeben, verwendet der Filter dafür die gleiche Angabe wie für die Breite. Um eine 3x3-Matrix zu definieren, können Sie somit die Angabe order="3" oder order="3 3" verwenden. Die Angaben können wahlweise durch Leerzeichen oder Kommata getrennt werden. Wenn Sie das Attribut order nicht angeben, wird eine 3x3-Matrix verwendet. Die Werte für die Breite und Höhe der Matrix müssen ganze Zahlen sein, die größer als Null sind.

Hinweis:
Die Matrix sollte möglichst klein gewählt werden, da große Matrizen viel Rechenzeit in Anspruch nehmen.

  • kernelMatrix definiert die Matrix, die für den Filter verwendet wird. Dazu geben Sie eine Liste von Zahlen an, die Sie durch Kommata oder Leerzeichen trennen. Die Anzahl der Zahlen müssen der angegebenen Größe der Matrix im Parameter order entsprechen. Geben Sie dort für Breite und Höhe jeweils den Wert 3 an, müssen Sie also neun Werte übergeben.
  • divisor ermöglicht die Definition des Divisors für die Berechnung. In obiger Erläuterung wurde dazu die Summe aller Werte in der Matrix verwendet. Dies ist die Standardeinstellung, die verwendet wird, wenn Sie das Attribut divisor nicht angeben. Geben Sie das Attribut an, wird dieser Wert anstelle der Summe verwendet. Sie dürfen für dieses Attribut Werte angeben, die größer als 0 sind.

Hinweis:
Sollte sich bei der Summierung der Matrixwerte zufällig ein Wert von Null ergeben, und haben Sie kein Attribut divisor bestimmt, verwendet der Filter stattdessen den Wert 1. Die Summe 0 ist möglich, weil neben positiven auch negative Werte angegeben werden können.

  • bias ist eine Zahl, die bei Angabe zum berechneten Wert des Pixels addiert wird. Sie verändert damit zusätzlich den errechneten Farbwert. Geben Sie das Attribut nicht an, wird der Wert Null verwendet. Es findet also keine Farbänderung statt.
  • targetX und targetY bestimmten die Positionierung der Filter-Matrix in der Matrix der Grafik. Die erste Spalte bzw. erste Zeile hat den Index 0. Der Wert von targetX bzw. targetY muss größer oder gleich 0 und kleiner als die Breite bzw. Höhe der Filter-Matrix sein. Die Standardwerte für beide Attribute sind 0.
  • edgeMode legt fest, wie die Kanten der Matrix behandelt werden. Bleiben beispielsweise bei Anwendung einer 3x3-Matrix nur noch ein Streifen von zwei Pixeln am Rand übrig, bestimmen Sie mit dem Wert des Attributs, was mit diesen zwei Pixeln passiert. Verfügbar sind die Werte duplicate, wrap und none. Wählen Sie duplicate aus, werden die fehlenden Pixel aus den vorhandenen dupliziert. Wählen Sie wrap als Wert, werden die fehlenden Pixel aus den Farbwerten der gegenüberliegenden Ecke oder Kante ergänzt. Bei Auswahl von none werden die fehlenden Pixel durch schwarze Pixel ergänzt.
  • preserveAlpha ermöglicht die Angabe der Werte true und false. Geben Sie false als Wert an, bezieht sich die Änderung auf alle Kanäle einschließlich dem Alpha-Kanal. Geben Sie hingegen true an, wird der Alpha-Kanal nicht verändert. false ist der Standardwert.

Die folgende Abbildung zeigt nacheinander die mit dem Filter veränderte ursprüngliche Grafik. Von oben nach unten wurden die Filter 4x4, 7x4 und 7x4preserveAlpha des nachfolgenden Listings verwendet.

Die Filter 7x4preserveAlpha und 7x4 sind bis auf den Parameter preserveAlpha gleich.

Verschiedene feConvolveMatrix-Filter in der Anwendung

Abbildung: Verschiedene feConvolveMatrix-Filter in der Anwendung.

<filter id="4x4">
  <feConvolveMatrix in="SourceGraphic" kernelMatrix="10 10 50 50 50 20 20 10 0 10 10 50 50 50 20 20" order="4"/>
</filter>
<filter id="6x4">
  <feConvolveMatrix in="SourceGraphic" kernelMatrix="255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0" divisor="5700" order="7 4"/>
</filter>
<filter id="6x4preserveAlpha">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" preserveAlpha="true" kernelMatrix="255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0" divisor="5700" order="7 4"/>
</filter>

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de