<feConvolveMatrix>

Das <feConvolveMatrix> SVG-Filter-Primitiv wendet einen Matrix-Faltungseffekt an. Eine Faltung kombiniert Pixel des Eingabebildes mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildoperationen kann durch Faltungen erreicht werden, einschließlich Weichzeichner, Kantendetektion, Schärfen, Prägen und Abfasen.

Eine Matrixfaltung basiert auf einer n-mal-m-Matrix (dem Faltungskern), die beschreibt, wie ein gegebener Pixelwert im Eingabebild mit seinen benachbarten Pixelwerten kombiniert wird, um einen resultierenden Pixelwert zu erzeugen. Jeder resultierende Pixel wird bestimmt, indem die Kernel-Matrix auf den entsprechenden Quell-Pixel und seine benachbarten Pixel angewendet wird. Die grundlegende Faltungsformel, die auf jeden Farbwert für einen gegebenen Pixel angewendet wird, ist:

$$\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(kernelMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}$$

wobei "orderX" und "orderY" die X- und Y-Werte für das order Attribut darstellen und die anderen Variablen sich auf die Attribute targetX, targetY, kernelMatrix, divisor und bias beziehen.

Beachten Sie in den obigen Formeln, dass die Werte in der Kernel-Matrix so angewendet werden, dass die Kernel-Matrix um 180 Grad im Vergleich zu den Quell- und Zielbildern gedreht wird, um der Faltungstheorie zu entsprechen, wie sie in vielen Computergrafik-Lehrbüchern beschrieben wird.

Angenommen, Sie haben ein Eingabebild, das 5 Pixel mal 5 Pixel groß ist und dessen Farbwerte für einen der Farbkanäle wie folgt sind:

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 Zeile und der zweiten Spalte des Bildes (der Quell-Pixelwert ist 120). Angenommen, der einfachste Fall (bei dem das Pixelraster des Eingabebildes perfekt mit dem Raster des Kernels ausgerichtet ist) und es gelten Standardwerte für die Attribute divisor, targetX und targetY, dann wird der resultierende Farbwert sein:

(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-Primitiven behandelt es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu verwenden.

<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>