SVG/Tutorials/Filter/feConvolveMatrix

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Filter
Wechseln zu: Navigation, Suche

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.[1]


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.[2]


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.[3]
  • 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

  1. W3C: feConvolveMatrixElement
  2. smashing-magazine: Why The SVG Filter is awesome
  3. https://drafts.fxtf.org/filters/#element-attrdef-feconvolvematrix-kernelunitlength

Referenz