SVG Tutorial

Der primitive Filter feConvolveMatrix bewirkt eine Veränderung der Bildpunkt-Matrix. Dabei werden Bildpunkte des Input-Bildes mit benachbarten Bildpunkten vermischt. Dadurch eignet sich dieser Filter für eine große Anzahl von Effekten, wie: verwischen, Kanten scharfzeichen, scharfzeichnen oder Prägeeffekte.

Mit Hilfe des Attributs order müssen Sie festlegen, welche und wieviele benachbarte Bildpunkte in die Berechnung einbezogen werden. Zu diesem Zweck definieren Sie eine sogenannte Kernel-Matrix, die aus einer festgelegten Anzahl von Punkten besteht, welche in Spalten und Zeilen geordnet sind.
Das Attribut order aktzeptiert 2 durch Komma getrennte Ganzzahlen als Wert. Dabei bestimmt die erste Ganzahl die Anzahl der Spalten der Kernel-Matrix und die zweite Ganzahl die Anzahl der Zeilen der Kernel-Matrix. Wenn Sie nur eine Ganzahl als Wert für order verwenden, gibt diese sowohl die Anzahl der Spalten als auch die Anzahl der Zeilen der Kernel-Matrix an.
Der voreingestellte Wert für order ist 3, d.h. eine Kernel-Matrix, deren insgesamt 9 Bildpunkte in 3 Zeilen a 3 Reihen angeordnet sind.
Die so festgelegte Kernel-Matrix wird mittig auf jeden Bildpunkt der Bild-Matrix gelegt. Auf diese Art sind alle benachbarten Bildpunkte, für jeden neu zu berechnenden Bildpunkt eindeutig bestimmt.

Mit dem Attribut kernelMatrix müssen Sie für jeden einzelnen Bildpunkt der Kernel-Matrix einen Zahlwert bestimmen, der bei der Neuberechnung als Faktor verwendet wird.
Dem Attribut kernelMatrix muß als Wert also eine, durch Leerzeichen und/oder Komma getrennte Liste aus Zahlen zugeordnet werden. Dabei muß die Anzahl der Zahlen mit der Anzahl der Bildpunkte der Kernel-Matrix übereinstimmen.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Der primitive Filter feConvolveMatrix</title>
  <desc>
    Beispiele für die Verwendung von feConvolveMatrix
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>

<!-- 6 Filter mit feConvolveMatrix -->
    <filter id="f1">
      <feConvolveMatrix order="3"
        kernelMatrix="1 1 1 1 1 1 1 1 1" />
    </filter>
    <filter id="f2">
      <feConvolveMatrix order="3"
        kernelMatrix="1 0 0 0 0 0 0 0 1" />
    </filter>
    <filter id="f3">
      <feConvolveMatrix order="10,1"
        kernelMatrix="1 1 1 1 1 1 1 1 1 1" />
    </filter>
    <filter id="f4">
      <feConvolveMatrix order="1,10"
        kernelMatrix="1 1 1 1 1 1 1 1 1 1" />
    </filter>
<!-- zusätzlich mit feBlend -->
    <filter id="f5">
      <feConvolveMatrix order="10,1"
        kernelMatrix="1 1 1 1 1 1 1 1 1 1" result="out1" />
      <feBlend in="SourceGraphic" in2="out1" mode="multiply" />
    </filter>
    <filter id="f6">
      <feConvolveMatrix order="10,1"
        kernelMatrix="0 0 0 0 0 1 1 1 1 1" result="out1" />
      <feBlend in="SourceGraphic" in2="out1" mode="multiply" />
    </filter>
  </defs>

<!-- die Instanzen des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
    filter="url(#f1)" />
  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
    filter="url(#f2)" />
  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
    filter="url(#f3)" />
  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
    filter="url(#f4)" />
  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
    filter="url(#f5)" />
  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
    filter="url(#f6)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feConvolveMatrix</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Die Filter f1 und f2 im obigen Beispiel, verwenden den Standardwert 3 für das Attribut order. Daher sind jeweils genau 9 Werte für das Attribut kernelMatrix angegeben.
Die Kernel-Matrix die im Filter f3 festgelegt wird besteht nur aus einer Zeile mit 10 Spalten, die Kernel-Matrix im Filter f4 aus 10 Zeilen mit nur einer Spalte. In beiden Fällen sind hierdurch genau 10 Punkte definiert. Daher sind jeweils genau 10 Werte für das Attribut kernelMatrix angegeben.
Bei den Filtern f5 und f6 wird zusätzlich feBlend verwendet, um das Quellbild (Orginalbild) mit dem Output von feConvolveMatrix zu verschmelzen.

Für den primitiven Filter feConvolveMatrix stehen noch weitere Attribute zur Verfügung. Mit Hilfe der Attribute targetX und targetY können Sie einen beliebigen Punkt der Kernel-Matrix bestimmen, der auf den orginalen Bildpunkt gelegt wird. Im Normalfall ist das der Mittelpunkt der Kernel-Matrix.
targetX akzeptiert einen Spaltenwert und targetY einen Zeilenwert, wobei beide Werte natürlich innerhalb der durch order angegeben Spalten- und Zeilenwerte der Kernel-Matrix liegen müssen.

Durch das Attribut divisor können Sie einen bei der Berechnung des Outputs verwendeten Divisior (Teiler) verändern. Wenn Sie dieses Attribut nicht verwenden, wird die Summe aller Bildpunkte der Kernel-Matrix als Divisor verwendet.

An den Rändern des Bildes kann es vorkommen, dass die Kernel-Matrix teilweise über das Bild lappt, so das einzelne Punkte der Kernel-Matrix nicht mehr auf Bildpunkten zu liegen kommen. Um festlegen zu können, wie solche Fälle gehandhabt werden, verwenden Sie das Attribut edgeMode.
edgeMode akzeptiert drei Werte: duplicate, wrap und none. Voreingestellter Wert ist duplicate, wodurch den Werten, die im Leerraum liegen, die äußersten Werte am entsprechenden Rand zugewiesen werden. Bei Verwendung von wrap werden die aüßersten Werte des gegenüberliegenden Randes verwendet. Bei none wird den Werten 0 zugewiesen.

Falls Sie nicht möchten, dass auch die Alphawerte des Bildes neu berechnet werden, steht Ihnen zu diesem Zweck das Attribut preserveAlpha zur Verfügung. Dieses Attribut akzeptiert 2 mögliche Werte: den voreingestellten Wert false (die Alphawerte des Bildes werden neu berechnet) und der Wert true (die Alphawerte des Bildes werden nicht neu berechnet).