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

Ultima revisión 06/11/2012

SVG Filters: Filtros en SVG

Los 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.

Aquí os dejo algunos ejemplos de efectos en texto que suelen incluir los editores de SVG: InkScape: Ejemplos de Filtros para Texto

Soporte de Filtros SVG por navegador:

Navegador Versión que lo soporta
Soportado a partir de la versión 10.0
Soportado a partir de la versión 3.0
Soportado a partir de la versión 8.0
Soportado a partir de la versión 6.0
Soportado a partir de la versión 9.0
Soportado a partir de la versión 6.0
Soportado a partir de la versión 7.0
No Soportado
Soportado a partir de la versión 10.0
Soportado a partir de la versión 10.0
Soportado a partir de la versión 18.0
Soportado a partir de la versión 15.0

A continuación pasamos a listar los filtros en los que, si pincháis en el nombre, podreís acceder a su explicación con ejemplos e ilustraciones.

Name Element SVG Básico
feBlend Si
feColorMatrix Si
feComponentTransfer Si
feComposite Si
feConvolveMatrix No
feDiffuseLighting No
feDisplacementMap No
feFlood Si
feGaussianBlur Si
feImage Si
feMerge Si
feMorphology No
feOffset Si
feSpecularLighting No
feTile Si
feTurbulence No

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.