<feConvolveMatrix>

Die <feConvolveMatrix> SVG Filterprimitive wendet einen Matrixfaltungseffekt an. Eine Faltung kombiniert Pixel im Eingabebild mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildoperationen kann durch Faltungen erreicht 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 gegebener Pixelwert im Eingabebild mit den benachbarten Pixelwerten kombiniert wird, um einen resultierenden Pixelwert zu erzeugen. Jeder resultierende Pixel wird durch Anwenden der Kernelmatrix auf den entsprechenden Quellpixel und seine benachbarten Pixel bestimmt. 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(kernalMatrix\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, "targetX" den Wert des targetX Attributs repräsentiert, "targetY" den Wert des targetY Attributs, "kernelMatrix" den Wert des kernelMatrix Attributs, "divisor" den Wert des divisor Attributs und "bias" den Wert des bias Attributs repräsentiert.

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 ist, um die Faltungstheorie zu erfüllen, wie sie in vielen Computergrafik-Lehrbüchern beschrieben wird.

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 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 Reihe und der zweiten Spalte des Bildes (Quellpixelwert ist 120). Angenommen, es handelt sich um den einfachsten Fall (bei dem das Pixelraster des Eingabebildes perfekt mit dem Pixelraster des Kerns übereinstimmt) und unter Annahme der 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 Filterprimitiven behandelt 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>