| gráficas vectoriales escalables | |
|---|---|
Los efectos de filtro SVG son efectos que se aplican a archivos de gráficos vectoriales escalables (SVG). SVG es un formato XML de estándar abierto para gráficos vectoriales bidimensionales según 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 de mapa de bits modificado .
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 primitivas de filtro como sus hijos. Cada primitiva 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, produciendo un resultado gráfico. Debido a que la mayoría de las primitivas de filtro representan alguna forma de procesamiento de imágenes, en la mayoría de los casos la salida de una primitiva de filtro es una sola imagen de mapa de bits RGBA (sin embargo, se regenerará si se activa una resolución más alta).
El gráfico fuente original o el resultado de una primitiva de filtro se puede utilizar como entrada en una o más primitivas de filtro. 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 desplazado para crear una sombra paralela . De hecho, ahora hay dos capas de gráficos, ambas con los mismos gráficos fuente originales.
Primitivas de filtro SVG
| Texturas: | feTurbulence , feDiffuseLighting , feDistantLight , feComposite y feBlend |
| Oscuridad: | feGaussianBlur , feOffset , feColorMatrix y feBlend |
La siguiente tabla enumera las primitivas de filtro disponibles en SVG 1.0 y SVG 1.1. SVG Tiny no admite efectos de filtro, mientras que SVG Basic solo admite las primitivas de filtro que se muestran:
| Nombre | Elemento | SVG básico |
|---|---|---|
| Mezcla | feBlend | sí |
| Matriz de color | feColorMatrix | sí |
| Transferencia de componentes | feComponentTransfer | sí |
| Compuesto | feComposite | sí |
| Convolucionar matriz | 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 |
| Loseta | feTile | sí |
| Turbulencia | feTurbulence | No |
El borrador actual del módulo de efectos de filtro de nivel 1 agrega una primitiva de filtro para la sombra paralela . Esta primitiva`` feDropShadowes solo una abreviatura de 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 0400300 " > <defs> <filter id = "AFilter" > <! - La definición de filtro va aquí -> </filter> </defs> <text x = "10" y = "100" filter = "url (#AFilter)" > un filtro aplicado < / text> </svg>Enlaces externos
- Especificaciones de la página W3C SVG , lista de implementaciones
- Imprimador W3C SVG: Filtros Capítulo (borrador) del Primer W3C y ejemplos relacionados con los filtros.
- FILDROP Un conjunto de efectos de filtro SVG personalizados y efectos de filtro de generador
- Generador de filtros SVG Un generador y analizador visual de filtros SVG
- Filtros SVG Efectos de texto retro de los años 80 similares a Photoshop hechos con filtros CSS y SVG
Referencias
