<feConvolveMatrix>

Die <feConvolveMatrix> SVG Filterprimitive wendet einen Matrix-Faltungseffektfilter an. Eine Faltung kombiniert Pixel im Eingabebild mit benachbarten Pixeln, um ein resultierendes Bild zu erzeugen. Eine Vielzahl von Bildbearbeitungen kann durch Faltungen erreicht werden, einschließlich Weichzeichnen, Kantendetektion, Schärfen, Prägen und Abschrägen.

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 Ergebnis-Pixel wird bestimmt, indem die Kernel-Matrix auf den entsprechenden Quellpixel und seine benachbarten Pixel angewendet wird. Die grundlegende Faltungsformel, die auf jeden Farbwert für einen gegebenen 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(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, "targetX" den Wert des targetX Attributs darstellt, "targetY" den Wert des targetY Attributs darstellt, "kernelMatrix" den Wert des kernelMatrix Attributs darstellt, "divisor" den Wert des divisor Attributs darstellt, und "bias" den Wert des bias Attributs darstellt.

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

Um zu veranschaulichen, nehmen wir an, Sie haben ein Eingabebild, das 5 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 Reihe und zweiten Spalte des Bildes (Quellpixelwert ist 120). Angenommen, der einfachste Fall (wo das Pixelgitter des Eingabebilds perfekt mit dem Pixelgitter des Kernels ausgerichtet ist) und es werden Standardwerte für die Attribute 'divisor', 'targetX' und 'targetY' angenommen, 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 im linearRGB Farbraum standardmäßig. 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>