<feConvolveMatrix>

Примитив фильтра <feConvolveMatrix> SVG применяет эффект фильтра свёртки матрицей. Свёртка объединяет пиксели входного изображения с соседними пикселями, чтобы получить результирующее изображение. С помощью свёртки можно выполнить множество операций обработки изображений, включая размытие, выделение границ, резкость, тиснение и рельефность.

Матричная свёртка основана на n-на-m матрице (ядро свёртки), которая описывает, как значение определённого пикселя на входном изображении объединяется со значениями соседних пикселей, чтобы получить результирующее значение пикселя. Каждый результирующий пиксель определяется путём применения матрицы ядра к соответствующему пикселю-источнику и его соседним пикселям. Основная формула свёртки, которая применяется к каждому цветовому значению для данного пикселя, выглядит следующим образом:

$$\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}$$

где «orderX» и «orderY» представляют значения X и Y для атрибута order, «targetX» представляет значение атрибута targetX, «targetY» представляет значение атрибута targetY, «kernelMatrix» представляет значение атрибута kernelMatrix, «divisor» представляет значение атрибута divisor, а «bias» представляет значение атрибута bias.

Обратите внимание, что в приведенных выше формулах значения в матрице ядра применяются таким образом, что матрица ядра поворачивается на 180 градусов относительно входных и выходных изображений, чтобы соответствовать теории свёртки, описанной во многих учебниках по компьютерной графике.

Например, предположим, что у вас есть входное изображение размером 5x5 пикселей, значения цветов для одного из цветовых каналов которого следующие:

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

и вы определяете ядро свёртки 3x3 следующим образом:

1 2 3
4 5 6
7 8 9

Давайте сосредоточимся на цветовом значении во второй строке и втором столбце изображения (значение пикселя-источника равно 120). При условии самого простого случая (где сетка пикселей входного изображения идеально совпадает с сеткой пикселей ядра) и при стандартных значениях атрибутов 'divisor', 'targetX' и 'targetY', результирующее значение цвета будет:

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

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