w3.unpo<code>todo

El filtro <feConvolveMatrix> permite recalcular el valor de cada pixel de una imagen en función del valor de los pixeles adyacentes, permitiendo crear efectos de tipo desenfoque ( blur ), nitidez ( sharpening ) grabado ( embossing ) o biselado ( beveling ).

La sintaxis

Este es un ejemplo muy sencillo. El atributo order ( magnitud ) tiene en este caso el valor 3, lo que quiere decir que la matriz de circunvolución ( kernelMatrix ) aplicada tiene 3 * 3 = 9 valores. Hay más atributos que podemos utilizar pero por ahora nos quedamos solo con estos dos.

<filter id="f0">
       <feConvolveMatrix 
            order="3"
            kernelMatrix="0 0 0 
                          0 1 0 
                          0 0 0" />
</filter>

Como funciona

Sabemos que cada pixel tiene 4 canales de color; rojo (R), verde (G), azul (B) y transparencia o alfa (A). Ahora imagínense una imagen de 5px / 5px cuyos valores para uno de los canales de color ( por ejemplo rojo ) son las siguientes:

        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

Y el valor de la matriz de circunvolución ( kernelMatrix ) es:

kernelMatrix="1 2 3 
              4 5 6 
              7 8 9"

En este caso el valor modificado del pixel cuyo valor inicial es 120 será:

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

Algunos ejemplos

1. La siguiente matriz de circunvolución deja la imagen sin modificar, ya que los pixeles adyacentes no tienen efecto alguno ( 0 ).

kernelMatrix=" 0 0 0 
               0 1 0 
               0 0 0"

2. Esta matriz de circunvolución exagera todos los pixeles que difieren mucho de los adyacentes ya que multiplicamos el valor de estos pixeles por -1.

kernelMatrix=" -1  -1  -1
               -1   7  -1
               -1  -1  -1"

3. Esta matriz de circunvolución exagera solo los pixeles situados a la derecha y a la izquierda.

kernelMatrix=" -1 2 -1 
               -1 1 -1 
               -1 2 -1"

4. Mientras que esta otra exagera solo los pixeles situados arriba y abajo:

kernelMatrix= "-1 -1 -1 
                2  1  2 
               -1 -1 -1"

5. Todos estos ejemplos utilizan una magnitud order = "3". Podemos utilizar magnitudes superiores, aunque es poco recomendable ya que  generan una sobrecarga de la CPU. Veamos un ejemplo:

order="5"
kernelMatrix="1  1      1    1  1
              1 -2     -2   -2  1
              1 -2   0.01   -2  1
              1 -2     -2   -2  1
              1  1      1    1  1"

Vea todos estos ejemplos en codepen:

See the Pen feConvolveMatrix by Gabi (@enxaneta) on CodePen.