IslaVisual
Existen numerosas técnicas dentro de SVG para diseñar y controlar la colocación de las fuentes de luz. Muchos de estos efectos pueden ser simulados a través de la superposición de gradientes parcialmente transparentes, pero el uso de feSpecularLighting, bien utilizado, producirá efectos potentes y fáciles de utilizar para los que ya saben algo del mundo de los efectos de iluminación.
Leer másEste efecto es un poco diferente de los demás en el sentido de que convierte los valores de color de los píxeles de una imagen en distorsiones geométricas de otra. La primitiva feDisplacmentMap utiliza los canales de entrada in (SourceGraphic por defecto) e in2, y utiliza un canal especificado (R, G, B, o A) de in2 que sirven como valores de desplazamiento que determinan la dirección y la distancia de cada píxel en la que se moverán por los ejex X,Y.
Leer másEsta primitiva de filtro ilumina una imagen utilizando el canal alfa como un mapa de relieve. El mapa de la luz producida por esta primitiva se puede combinar con una textura usando el operador arithmetic de feDiffuseLighting. Se pueden simular múltiples fuentes de luz mediante la adición de varios de estos mapas de iluminación antes de aplicarlo a una textura.
Leer másEste 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.
Leer másCombina 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.
Leer másLa 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.
Leer másLa 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.
Leer másSe 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.
Leer másRealiza 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.
Leer másUna 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:
Leer másSobre el autor
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.