SVG/Tutorials/Filter/feConvolveMatrix

Der primitive Filter feConvolveMatrix verändert die Bildpunkt-Matrix. Dabei werden Pixel der Eingangsgrafik mit Nachbar-Pixeln vermischt. Dies ermöglicht eine große Anzahl von Effekten, wie: Scharfzeichnen, Verwischen oder Prägeeffekte.

Dieser Filter ermöglicht Ihnen einen neuen Filter zu erzeugen. Eine kernelMatrix ist ein Pixelraster, das Pixel anhand der Werte der benachbarten Pixel verändert. So können Sie eigene Effekte definieren.

Beispiel ansehen …

    <filter id="Präge">
      <feConvolveMatrix 
        order="4"
        preserveAlpha="true"
        kernelMatrix="
           1  0  0  0
           0  1  0  0
	   0  0  1  -1
           0  0  -1 -2" />
    </filter>
  
 
    <filter id="Präge2">
      <feConvolveMatrix 
        order="5 5"
        preserveAlpha="true" 
        kernelMatrix="
		  -1  0 0 0 0
		   0 -2 0 0 0
		   0  0 3 0 0
		   0  0 0 0 0
		   0  0 0 0 0"/>
    </filter>
  
    <filter id="Schärfen">
      <feConvolveMatrix 
        order="3 3" 
        preserveAlpha="true" 
        kernelMatrix="
		   0 -1  0 
		  -1  5 -1 
		   0 -1  0"/>
    </filter>

Der erste Prägefilter verschiebt den Rand von Text und Grafik nach links oben, der mittlere Filter (#Präge2) verstärkt den Rand um ein Vielfaches.
Der Scharfzeichnungsfilter rechts verstärkt den Kontrast.

Folgende Attribute sind möglich:

• in: Eingangsgrafik
• order: legt die Größe der Matrix fest (2 Zahlen für Reihe und Spalte, bei nur einer Zahlenangabe wird der Wert für beide Koordinaten verwendet. Standardwert ist 3).

Empfehlung: Verwenden Sie nur kleine Werte, um die CPU beim Laden der SVG-Grafik nicht zu überlasten.

• kernelMatrix: Matrix aus den Bildpunkten, die in order für die Verarbeitung der Bildpunkte herangezogen werden.
• divisor: Nachdem das Eingangsbild durch die kernelMatrix verändert wurde, werden die Bildinformationen durch den divisor geteilt. Dies bewirkt eine Glättung der Farbsättigung.
• bias: Zahlenwert, Standardwert ist 0; (erlaubt, den Bereich eines Filters zu verschieben. Nachdem die kernelMatrix auf das eingehende Bild angewandt wird und durch einen divisor verändert wird, wird der Wert von bias addiert.)
• targetX: X-Position der Convolution Matrix
• targetY: Y-Position der Convolution Matrix
• edgeMode: an den Rändern der Grafik können einzelne Punkte der Kernel-Matrix können nicht mehr auf Bildpunkten zu liegen kommen, da die Kernel-Matrix über die Ränder der Grafik ragt.
  Folgende Werte sind möglich:
  • duplicate: Standardwert) Werte, die im Leerraum liegen, werden die äußersten Werte vom Rand zugeweisen
  • wrap: äußersten Werte des gegenüberliegenden Rands
  • none: 0
• kernelUnitLength: ein oder zwei Zahlenangaben; Wenn Sie einen Wert für kernelUnitLength festlegen, wird der Kernel ein skalierbares, abstraktes Koordinatensystem. Wenn nicht, ist der Standardwert nur 1px der offscreen bitmap, und deshalb nicht skalierbar.

Empfehlung: Legen Sie mindestens einen Wert von kernelUnitLength fest. Verwenden Sie als Werte das Pixel-Raster des Kernel. Dies führt zu den gleichmäßigsten Ergebnissen und dem schnellsten Rendering.

Beachten Sie: In SVG2 wird das kernelUnitLength-Attribut entfernt.

• preserveAlpha: legt fest, wie die Alphatranparenz bearbeitet wird.
  • false: alle 4 Kanäle (auch der Alpha-Kanal) werden von der Convolution Matrix verändert.
  • true: nur die Farbkanäle werden von der Convolution Matrix verändert.

Anwendungsbeispiel

Bildbearbeitung

Beispiel ansehen …

    <filter id="KantenErkennung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -1 -1 -1
		  -1  8 -1
		  -1 -1 -1"
		divisor="1.0"
		bias="0.0"   
		  />
    </filter>
	
    <filter id="Schärfung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -1 -1 -1
		  -1  9 -1
		  -1 -1 -1"
		divisor="1.0"
		bias="0.0"   
		  />
    </filter>
	
    <filter id="Prägung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -4 0 0
		   0 1 0
		   0 0 4"
		divisor="1"
		bias="0"   
        />
    </filter>

Mit dem feConvolveMatrix-Filter werden die Kanten des linken Bildes erkannt und betont. Die Schärfung auf dem mittleren und die Prägestruktur des rechten Bildes sind hier nicht so deutlich erkennbar.

Quellen

• wikibooks.org: Urfilter feConvolveMatrix
• SVG Filters Retro 80er-Jahre-Texteffekte mit CSS und SVG Filtern

Referenz

• SVG/Element/feConvolveMatrix