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.
Combina dos imágenes pixel a pixel en un mismo espacio usando el canal alfa de Porter-Duff para realizar las operaciones de composición. Las operaciones son over, in, out, atop, xor, and arithmetic. Hay que tener en cuenta que, en una cierta medida, la imagen resultante puede aumentar de tamaño, incluso si las dos imágenes se superponen.
La primitiva feComponentTransfer permite la redefinición independiente de cada uno de los cuatro canales de color: R, G, B, y A (alfa). Permite realizar operaciones como el ajuste del brillo, el contraste, equilibrio de color o umbral través de diferentes funciones que son aplicables a uno o varios canales de una imagen. El filtro feComponentTransfer se define a través de sus métodos feFuncR, feFuncG, feFuncB y feFuncA que crean y gregan una función de transferencia para cada canal R G B A y, cada una de ellas puede tener, además del indicador de tipo, uno o varios parámetros.
La primitiva feColorMatrix permite la redefinición de colores dentro de una imagen, basandose en la capacidad de multiplicar los niveles de cada píxel RGB y alfa por coeficientes numéricos. En una situación muy compleja, un usuario podría especificar una matriz entera de veinte coeficientes (es decir, de 4 por 5), que debe de multiplicarse por el vector de uno a cuatro compuesto por los valores R G B A que representan el valor de color y opacidad de un píxel determinado. Las filas de la matriz representan respectivamente los tonos R, G, B, y el Alfa, al igual que el vector de uno a cuatro antes comentado.
Se utiliza para realizar un desenfoque gaussiano en la imagen. Tiene 2 atributos para realizar distintas acciones. stdDesviation que define la desviación estándar para la operación de desenfoque.
Realiza pixel a pixel una combinación de dos imágenes de entrada. Los modos de fusión son: Normal, Multiplicar (multiply), Pantalla (screen), oscurecer (darken) y aclarar (lighten). Los atributos in e in2 representan la primera y segunda imagen de entrada para realizar la operación de fusión. Tanto in como in2 contendrán uno de sus valores estándar o podrán tener otra fuente o imagen de entrada definida por el usuario.
Una cuestión que no se había tratado todavía es el manejo de trayectorias. Esto es útil si queremos realizar transformaciones o curvas complejas. El elemento que hace esto es path. Se pueden definir hasta 10 tipos de trayectorias, las cuales pasamos a describir ahora. Los siguientes comandos están disponibles para los datos de la trayectoria:
A continuación pasamos a describir las formas básicas que se pueden crear en los gráficos vectoriales SVG. Como veréis más adelante se puede realizar cuadrados y rectángulos con o sin bordes redondeados, círculos o elipses, líneas y polilíneas, e incluso, estrellas y polígonos. El elemento rect es el encargado de hacer esta tarea.
En los gráficos vectoriales escalables (SVG), vamos escribiendo las instrucciones para el parser de XML cree una imagen interpretando dichas instrucciones. Los gradientes o degradados lineales, lo que hacen es, fundir un color con otro de forma equilibrada para agregar un aire de profundidad al diseño. Los gradientes lineales pueden construirse horizontal o verticalmente. Para Trabajar con degradados, lo adecuado es que cree un elemento dentro de la etiqueta defs. El elemento defs, como ya se explicó en el capítulo cuándo utilizar el elemento defs en un gráfico SVG, funciona como un disparador que declara que se va a definir algo. En este caso, vamos a establecer un color degradado.
Otra de las necesidades que a veces nos encontramos al crear diseños web es la de insertar un texto de forma distinta. Todo lo que se puede realizar en SVG se puede hacer en CSS3 como cambiar la fuente, poner sombras o, incluso, transformar el texto a través de efectos como transform, rotate, skew, ... Hoy vamos a aprender como crear texto dentro de un SVG.
Imagen de Pablo Enrique Fernández CasadoPablo 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.
Consentimiento para cookies y datos
Este sitio web utiliza cookies para permitir la navegación entre páginas, procesar información de dispositivos finales, cargar imágenes desde CDNs externos (como pixabay) y extraer datos personales recopilados por Google Analytics (como objetivo analilzar el tráfico o la IP origen, entre otros).
Ten en cuenta que, al rechazar las cookies, se eliminará todo rastro dejado y se abandonará la página de manera inmediata.
IslaVisual
