Banner

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