<feConvolveMatrix>

Das <feConvolveMatrix> SVG-Filter-Primitive wendet einen Faltungsmatrix-Filtereffekt an. Eine Faltung kombiniert Pixel im Eingabebild mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildoperationen kann durch Faltungen erzielt werden, einschließlich Weichzeichnen, Kantenerkennung, Schärfen, Prägen und Abfasen.

Eine Matrixfaltung basiert auf einer n-mal-m-Matrix (dem Faltungskern), die beschreibt, wie ein Pixelwert im Eingabebild mit seinen benachbarten Pixelwerten kombiniert wird, um einen resultierenden Pixelwert zu erzeugen. Jeder resultierende Pixel wird bestimmt, indem die Kernelmatrix auf das entsprechende Quellpixel und seine benachbarten Pixel angewendet wird. Die Grundformel der Faltung, die auf jeden Farbwert für ein bestimmtes Pixel angewendet wird, lautet:

$$\left(color\right)_{X , Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} \left(source\right)_{x - targetX + j , y - \mathit{targetY} + i} \cdot \left(kernalMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}$$

Dabei stehen "orderX" und "orderY" für die X- und Y-Werte des order-Attributs, "targetX" für den Wert des targetX-Attributs, "targetY" für den Wert des targetY-Attributs, "kernelMatrix" für den Wert des kernelMatrix-Attributs, "divisor" für den Wert des divisor-Attributs und "bias" für den Wert des bias-Attributs.

Beachten Sie in den obigen Formeln, dass die Werte in der Kernelmatrix so angewendet werden, dass die Kernelmatrix um 180 Grad relativ zu den Quell- und Zielbildern gedreht wird, um der in vielen Computergrafik-Lehrbüchern beschriebenen Faltungstheorie zu entsprechen.

Um dies zu veranschaulichen, nehmen wir an, Sie haben ein Eingabebild, das 5 Pixel mal 5 Pixel groß ist, dessen Farbwerte für einen der Farbkanäle wie folgt lauten:

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255

Und Sie definieren einen 3-mal-3-Faltungskern wie folgt:

1 2 3
4 5 6
7 8 9

Konzentrieren wir uns auf den Farbwert in der zweiten Reihe und zweiten Spalte des Bildes (Quellpixelwert ist 120). Angenommen, der einfachste Fall (bei dem das Pixelraster des Eingabebilds perfekt mit dem Pixelraster des Kerns übereinstimmt) und Standardwerte für die Attribute 'divisor', 'targetX' und 'targetY', dann lautet der resultierende Farbwert:

(9*0   + 8*20  + 7*40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

Wie andere Filter-Primitive verarbeitet es Farbkomponenten standardmäßig im linearRGB-Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu nutzen.

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
        kernelMatrix="3 0 0
                      0 0 0
                      0 0 -3" />
    </filter>
  </defs>

  <image
    href="mdn.svg"
    x="0"
    y="0"
    height="200"
    width="200"
    style="filter:url(#emboss);" />
</svg>