IslaVisual
Esta primitiva de filtro crea una imagen utilizando la función de turbulencia de Perlin. Se permite la síntesis de texturas artificiales como nubes o mármol. La imagen resultante llenará toda la subregión de la primitiva de filtro dada en el elemento filter. A menudo se utiliza para crear texturas. Crea patrones de ruido suave visual que rellenan un rectángulo con remolinos bastante agradables de color pastel.
Leer másLos filtros se beden declarar en la etiqueta defs. Para aplicar un filtro a un determinado elemento se establece la propiedad filter que contiene un conjunto de primitivas de filtro y realiza una sóla operación fundamental gráfica (por ejemplo, un desenfoque gaussiano o un efecto de iluminación) en una o más entradas, produciendo, así, una imagen. Debido a que gran parte de las primitivas de filtro representan alguna forma de procesamiento de imágenes, en la mayoría de los casos, la salida de filter dará como resultado una única imagen de mapa de bits RGBA. Sin embargo, se regenerara si se cambia a una resolución mayor.
Leer másEsta primitiva se utiliza para mover un elemento o pedazo de imagen, típicamente la referenciada por SourceGraphic o BackgroundImage, alrededor del lienzo o tapiz dentro de un filtro con propósitos de la realineación. Es importante si queremos producir sombras paralelas.
Leer másEl filtro feMerge permite la combinación de filtros de forma concurrente, en vez de secuencialmente. En lugar de que cada primitiva de filtro se aplique a la salida de la primitiva de filtro que le precede, feMerge nos proporciona una forma para almacenar temporalmente la salida de cada filtro, para así, colocarlas en el tapiz en orden de abajo hacia arriba. Es evidente que las capas superiores deberían tener cierta transparencia (o estar incompletas) dentro del en el área afectada por el filtro, a fin de permitir que esas capas por debajo sean visibles.
Leer másEsta primitiva de filtro se refiere a un gráfico externo al elemento de filtro que es cargado o renderizado y que, finalmente, se convierte en el resultado de la primitiva de filtro. Puede hacer referencia a una imagen externa o puede ser una referencia interna o externa de otra pieza de SVG. Se produce una imagen similar a la incorporada en el SourceGraphic de la imagen de entrada, excepto que el gráfico proviene de una fuente externa.
Leer másLa primitiva de filtro feFlood es para rect como feImage es para image. De la misma forma, feTile es directamente similar a pattern. Nos permite llevar patrones de repetición de imágenes en el filtro, de modo que luego se puedan utilizar para crear efectos. Esta primitiva de filtro rellena un rectángulo blanco con un patrón repetido de "azulejos" de una determinada imagen. El rectángulo de destino es tan grande como la subregión de la primitiva del filtro establecida por la anchura x, y, width y height de feTile.
Leer másEste primitiva de filtro interpreta una dilatación o erosión de la imagen. Es particularmente útil para usarlo con el canal alfa. El núcleo de dilatación (o erosión) es un rectángulo con un ancho de (2 * x) de radio y una altura de (2 * y-radio). En la dilatación, el píxel de salida es el máximo valor de la componente individual que corresponde a los valores R, G, B, A del núcleo del rectángulo de la imagen de entrada. En la erosión, el píxel de salida es el mínimo.
Leer másEsta primitiva de filtro crea un rectángulo relleno con el color y la opacidad de los valores de las propiedades del flood-color y flood-opacity. La posición, ancho y alto se establece por los atributos de x, y, width y height del elemento filter. Dicho de otra forma, la primitiva feFlood permite una manera distinta de dibujar un rectángulo en la pantalla. La diferencia entre éste y los creados a través de rect es que, éstos, se pueden combinar fácilmente sobre la marcha con una variedad de otros filtros.
Leer másExisten 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á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.