Los efectos de filtro SVG son efectos que se aplican a los archivos Scalable Vector Graphics (SVG). SVG es un formato XML de estándar abierto para gráficos vectoriales bidimensionales , tal como lo define el World Wide Web Consortium (W3C). Un efecto de filtro consiste en una serie de operaciones gráficas que se aplican a un gráfico vectorial de origen determinado para producir un resultado modificado en mapa de bits .
Los efectos de filtro se definen mediante elementos de filtro. La filterpropiedad se establece en un elemento contenedor o en un elemento gráfico para aplicarle un efecto de filtro. Cada filterelemento contiene un conjunto de primitivos de filtro como elementos secundarios. Cada primitivo de filtro realiza una única operación gráfica fundamental (por ejemplo, un desenfoque gaussiano o un efecto de iluminación) en una o más entradas, lo que produce un resultado gráfico. Debido a que la mayoría de los primitivos de filtro representan alguna forma de procesamiento de imágenes, en la mayoría de los casos la salida de un primitivo de filtro es una única imagen de mapa de bits RGBA (sin embargo, se regenerará si se solicita una resolución más alta).
El gráfico de origen original o el resultado de un filtro primitivo se puede utilizar como entrada en uno o más filtros primitivos. Una aplicación común es utilizar el gráfico de origen varias veces. Por ejemplo, un filtro simple podría reemplazar un gráfico por dos agregando una copia en negro del gráfico de origen original pero desplazada para crear una sombra paralela . En efecto, ahora hay dos capas de gráficos, ambas con los mismos gráficos de origen originales.
La siguiente tabla enumera los primitivos de filtro disponibles tanto en SVG 1.0 como en SVG 1.1. SVG Tiny no admite efectos de filtro, mientras que SVG Basic solo admite los primitivos de filtro que se muestran a continuación:
El borrador actual del Módulo de efectos de filtro Nivel 1 agrega una primitiva de filtro para sombras paralelas . Esta primitiva, feDropShadow, es simplemente una abreviatura para una combinación de otras primitivas de filtro. [1]
<?xml version="1.0"?> <svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" viewBox= "0 0 400 300" > <defs> <filter id= "AFilter" > <!-- La definición del filtro va aquí --> </filter> </defs> <text x= "10" y= "100" filter= "url(#AFilter)" > se aplicó un filtro </text> </svg>