IslaVisual
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 |
