Efectos de filtro SVG
| Módulo de efectos de filtro, nivel 1 | |
 Textura de madera y sombra simulada con filtros SVG | |
| Estado | Borrador de trabajo (WD) |
|---|---|
| Año iniciado | 15 de octubre de 2012 ( 15 de octubre de 2012 ) |
| Primera publicación | 15 de octubre de 2012 ( 15 de octubre de 2012 ) |
| Última versión | 18 de diciembre de 2018 ( 18-12-2018 ) |
| Versión de vista previa | Borrador del editor 30 de octubre de 2019 ( 30/10/2019 ) |
| Organización | W3C |
| Comité | Grupo de trabajo de CSS |
| Editores |
|
| Dominio | Efectos visuales |
| Gráficos vectoriales escalables |
|---|
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.
Primitivas de filtro SVG
| Texturas: | feTurbulence , feDiffuseLighting , feDistantLight , feComposite y feBlend |
| Oscuridad: | feGaussianBlur , feOffset , feColorMatrix y feBlend |
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:
| Nombre | Elemento | SVG básico |
|---|---|---|
| Mezcla | feBlend | Sí |
| Matriz de colores | feColorMatrix | Sí |
| Transferencia de componentes | feComponentTransfer | Sí |
| Compuesto | feComposite | Sí |
| Matriz de convolución | feConvolveMatrix | No |
| Iluminación difusa | feDiffuseLighting | No |
| Mapa de desplazamiento | feDisplacementMap | No |
| Inundación | feFlood | Sí |
| Desenfoque gaussiano | feGaussianBlur | Sí |
| Imagen | feImage | Sí |
| Unir | feMerge | Sí |
| Morfología | feMorphology | No |
| Compensar | feOffset | Sí |
| Iluminación especular | feSpecularLighting | No |
| Teja | feTile | Sí |
| Turbulencia | feTurbulence | No |
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]
Marco para aplicar un filtro
<?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> Enlaces externos
- Efectos de filtro: SVG 1.1 (segunda edición) Especificaciones W3C
- Introducción a SVG del W3C: Capítulo de introducción a SVG del W3C (borrador) y ejemplos relacionados con filtros.
- FILDROP Un conjunto de efectos de filtro SVG personalizados y efectos de filtro de generador
- Generador de filtros SVG Una herramienta de programación de filtros SVG interactiva y visual que puede usarse tanto para visualizar filtros existentes (cargando un SVG) como para diseñar los suyos propios desde cero y guardarlos.
Referencias
- ^ Schulze, Dirk; Jackson, Dean, eds. (18 de diciembre de 2018). "Módulo de efectos de filtro, nivel 1". www.w3.org . Consultado el 14 de enero de 2023 .
