Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 02/11/2012

SVG Filters: Uso de feConvolveMatrix (Matrices de Convolución)

Este filtro permite el procesamiento de la imagen en lo que se conoce como un filtro de convolución.

Nos permite definir una matriz cuadrada (típicamente n por n elementos para algún número impar n) en la que la celda o valor central de la matriz se refiere al propio píxel, y las celdas anteriores, izquierda, abajo y derecha de la misma dentro de la matriz, se refieren a los píxeles arriba, izquierda, abajo y a la derecha del píxel en la imagen de origen. Los coeficientes numéricos en la matriz definen el peso que cada píxel vecino que tendrá en el cálculo del nuevo color de dicho píxel.

En el caso más sencillo, una matriz que contenga 9 elementos (es decir, 3 x 3) y que tenga el elemento o celda con valor 1, dejaría cualquier imagen sin efecto alguno, ya que el nuevo valor de un píxel será igual a 1 veces su valor actual más la suma de cero veces los valores de sus ocho vecinos más cercanos.

Filtro: 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- SIN DEFINICIONES NI FILTROS -->
        <!-- IMAGEN ORIGINAL -->
    </defs>
    <image id="feConvolveMatrix_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

De todos los operadores e in, probablemente son más útiles.

AtributoDefinición
Indica el número de células en cada dimensión para kernelMatrix. Los valores proporcionados deben ser enteros y mayores que cero. El primer número, orderX, indica el número de columnas de la matriz. El segundo número, orderY, indica el número de filas en la matriz. Si orderY no se proporciona, el valor predeterminado es orderX.
Un valor típico es de orden = "3". Se recomienda que sólo utilizar utilizar matrices de orden pequeño (por ejemplo, 3) ya que las matrices más grandes pueden producir sobrecarga en la CPU y por lo general no producen resultados que justifiquen el impacto en el rendimiento.
Por defecto el valor de order es 3.
Es la lista de números que constituyen la matriz del núcleo de la convolución. Los valores están separados por espacios en blanco o una comas. El número de entradas en la lista debe ser igual orderY veces orderX.
Después de aplicar el kernelMatrix a la imagen de entrada para producir un número, ese número se divide por el divisor para obtener el valor de color de destino final. Un divisor que es la suma de todos los valores de la matriz tiende a tener un efecto de noche en la intensidad de color general del resultado. Es un error especificar un divisor de cero. El valor por defecto es la suma de todos los valores en kernelMatrix, con la excepción de que si la suma es igual a cero, entonces el divisor tiene el valor 1.
 Después de aplicar el kernelMatrix a la imagen de entrada para producir un número y aplicando el divisor, el atributo de bias se añade a cada componente. Una aplicación de bias es cuando es deseable tener la mitad del valor de gris entando la respuesta del filtro a cero. Si bias no se especifica, entonces el efecto es como si se especificase un cero.
Determina la posición en X de la matriz de convolución con respecto a un píxel objetivo dado en la imagen de entrada. La columna más a la izquierda de la matriz es la columna cero. El valor debe ser tal que 0 <= targetX < orderX. Por defecto, la matriz de convolución se centra en X sobre cada píxel de la imagen de entrada (es decir, targetX = floor (orderX / 2)).
Determina la posición en Y de la matriz de convolución con respecto a un píxel objetivo dado en la imagen de entrada. La fila superior de la matriz es es la fila cero. El valor debe ser tal que: 0 <= targetY < orderY. Por defecto, la matriz de convolución se centra en Y sobre cada píxel de la imagen de entrada (es decir, targetY = floor (orderY / 2)).
Sus valores pueden ser duplicate, wrap y none. Determina la forma de extender la imagen de entrada según sea necesario con valores de color de modo que las operaciones matriciales se puedan aplicar cuando el núcleo está situado en o cerca del borde de la imagen de entrada.
Duplicate indica que la imagen de entrada se extiende a lo largo de cada uno de sus bordes cuanto sea necesario mediante la duplicación de los valores de color en cada borde de la imagen de entrada.
Wrap indica que la imagen de entrada se amplía mediante la adopción de los valores de color desde el borde opuesto de la imagen. None indica que la imagen de entrada se extiende con valores de píxeles de cero para todos los canales (R, G, B y A).

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.