Introducción a los Filtros SVG - Aprender HTML

Actualmente, CSS ofrece una forma de aplicar efectos de color a las imágenes (p. ej., luminosidad, saturación, contraste, etc.) mediante la propiedad filter. Sin embargo, los filtros CSS son limitados: proporcionan un conjunto fijo de funciones de propósito único (blur(), brightness(), drop-shadow(), etc.) que se aplican a un elemento completo, principalmente para manipulación de color y desenfoque. Para crear efectos más potentes y compuestos, necesitaremos otras funciones. Dichas funciones están disponibles en SVG.

Esta página presenta qué hacen los filtros SVG, el elemento <filter> y su región de filtro, y cómo se encadenan las primitivas de filtro mediante el mecanismo in/result.

Qué Hacen los Filtros SVG (y Cuándo Usarlos)

Un filtro SVG es una pequeña cadena de procesamiento de imágenes. En lugar de un efecto único predefinido, se describe una cadena de operaciones de bajo nivel — llamadas primitivas de filtro — donde la salida de un paso se convierte en la entrada del siguiente. Al encadenar primitivas, se pueden construir efectos que CSS no puede expresar por sí solo:

Sombras y brillos construidos desplazando, desenfocando, recoloreando y recomponiendo el gráfico original.
Texturas y ruido generados con <feTurbulence> (ruido Perlin) para nubes, papel, mármol, etc.
Desplazamiento / deformación con <feDisplacementMap>, que mueve píxeles usando otra imagen como mapa de altura.
Efectos de iluminación que tratan el canal alfa como un mapa de relieve 3D.

Cuándo elegir filtros SVG sobre filtros CSS: usa la propiedad CSS filter cuando necesites un efecto único y rápido (un desenfoque, un ajuste de brillo, una sombra) en cualquier elemento HTML o SVG. Usa filtros SVG cuando necesites combinar varias operaciones en un efecto compuesto, generar texturas o aplicar desplazamiento — cualquier cosa que requiera alimentar la salida de una operación como entrada de otra.

El Elemento `<filter>` y Su Región

Se define un filtro una vez dentro de <defs> y se referencia desde una forma con el atributo filter="url(#id)" (o la propiedad CSS filter). El propio elemento <filter> no dibuja nada — es un contenedor para las primitivas que realizan el trabajo.

Un filtro tiene una región de filtro: un recuadro delimitador que limita dónde se renderiza el resultado filtrado. Cualquier cosa pintada fuera de esta región se recorta. La región se controla con estos atributos en <filter>:

Atributo	Propósito
`x`, `y`, `width`, `height`	Posición y tamaño de la región de filtro. Predeterminado: `x="-10%"`, `y="-10%"`, `width="120%"`, `height="120%"` — es decir, un relleno del 10% en cada lado del recuadro delimitador de la fuente.
`filterUnits`	Sistema de coordenadas para `x/y/width/height`. El predeterminado `objectBoundingBox` (los valores son fracciones/porcentajes del recuadro delimitador de la fuente); `userSpaceOnUse` usa coordenadas absolutas del espacio de usuario.
`primitiveUnits`	Sistema de coordenadas para los valores de longitud dentro de las primitivas (p. ej., `dx/dy` de `feOffset`). El predeterminado es `userSpaceOnUse`.

Esta región es el problema más común. Efectos como desenfoques y sombras se desbordan fuera de la forma original, y la región predeterminada del 120% suele ser demasiado pequeña — la sombra se recorta en los bordes. Si el efecto parece cortado, amplía la región, por ejemplo x="-50%" y="-50%" width="200%" height="200%".

Primitivas de Filtro

En SVG, cada elemento <filter> incluye un conjunto de elementos de filtro como hijos. Cada primitiva de filtro realiza una operación gráfica básica sobre una o más entradas, pero produce una única salida. La entrada se especifica en un atributo llamado in. El resultado de la operación se especifica en el atributo result. Dicho resultado puede usarse como entrada para otras operaciones. Sin embargo, si se omite el atributo in, la primitiva usa SourceGraphic por defecto en la primera operación, o el resultado de la primitiva anterior en operaciones encadenadas. Todas las primitivas comparten el mismo prefijo: fe (abreviatura de "filter effect"). Se nombran según lo que un elemento es o hace. Por ejemplo, la primitiva que aplica un efecto de desenfoque gaussiano al gráfico fuente se llama feGaussianBlur.

Palabras Clave de Entrada Especiales

Además de nombrar el result de una primitiva anterior, el atributo in puede referenciar estas entradas integradas:

Palabra clave	Significado
`SourceGraphic`	El elemento original al que se aplica el filtro, en color completo.
`SourceAlpha`	El mismo elemento, pero solo su canal alfa (transparencia) — útil como silueta para sombras.
`BackgroundImage`	Una instantánea del lienzo debajo del elemento.
`BackgroundAlpha`	El canal alfa de `BackgroundImage`.
`FillPaint`	El relleno de pintura del elemento, expandido para llenar la región de filtro.
`StrokePaint`	El trazo de pintura del elemento, expandido para llenar la región de filtro.

Nota: BackgroundImage, BackgroundAlpha, FillPaint y StrokePaint forman parte de la especificación, pero tienen escasa o nula compatibilidad con los navegadores en la actualidad; en la práctica trabajarás con SourceGraphic, SourceAlpha y el result de otras primitivas.

Actualmente hay 17 primitivas de filtro definidas en la especificación de Filtros SVG.

Elementos de Filtro en SVG

Elemento	Descripción
`<feBlend>`	Combina dos objetos usando modos de fusión del software de imagen habitual.
`<feColorMatrix>`	Aplica una transformación matricial.
`<feComponentTransfer>`	Realiza una reasignación componente a componente de los datos.
`<feComposite>`	Combina dos imágenes de entrada píxel a píxel en el espacio de imagen.
`<feConvolveMatrix>`	Aplica un efecto de filtro de convolución matricial.
`<feDiffuseLighting>`	Ilumina una imagen usando el canal alfa como mapa de relieve.
`<feDisplacementMap>`	Usa los valores de píxel de la entrada `in2` para desplazar la imagen de entrada `in`.
`<feFlood>`	Crea un rectángulo relleno con los valores de opacidad y color de las propiedades flood-opacity y flood-color.
`<feGaussianBlur>`	Aplica un desenfoque gaussiano a la imagen de entrada.
`<feImage>`	Hace referencia a un gráfico externo a este elemento, que se carga o renderiza en una trama RGBA como resultado de la primitiva.
`<feMerge>`	Combina capas de imagen de entrada.
`<feMorphology>`	Realiza operaciones de "adelgazamiento" o "engrosamiento".
`<feOffset>`	Desplaza la imagen de entrada.
`<feSpecularLighting>`	Ilumina un gráfico fuente usando el canal alfa como mapa de relieve.
`<feTile>`	Rellena un rectángulo de destino con un patrón repetido de una imagen de entrada.
`<feTurbulence>`	Crea una imagen con la función de turbulencia Perlin.
`<feDropShadow>`	Crea un efecto de sombra.

Un Ejemplo con Una Sola Primitiva

El filtro más sencillo tiene una primitiva. Aquí feGaussianBlur toma el SourceGraphic y lo desenfoca:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Encadenamiento de Primitivas: una Sombra

El verdadero poder proviene del encadenamiento. Para construir una sombra manualmente, tomamos la silueta del elemento, la desplazamos hacia abajo y a la derecha, la desenfocamos y luego colocamos el gráfico original encima. Sigue los atributos result/in para ver cómo la salida de cada paso fluye hacia el siguiente:

<svg width="220" height="220">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Take the alpha (silhouette) of the source -->
      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
      <!-- 2. Blur that offset silhouette -->
      <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
      <!-- 3. Stack the blurred shadow under the original graphic -->
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" rx="12"
        fill="#1e88e5" filter="url(#shadow)" />
</svg>

Cómo fluyen los datos:

feOffset lee SourceAlpha (la silueta de la forma) y la desplaza con dx/dy, escribiendo result="offset".
feGaussianBlur lee in="offset" y la suaviza, escribiendo result="blur".
feMerge apila capas de abajo hacia arriba: primero el blur (la sombra), luego el SourceGraphic sin desenfocar encima — de modo que la forma nítida queda sobre su sombra suave.

Observa la región de filtro ampliada (width="140%" height="140%") para que la sombra desplazada y desenfocada no se recorte.

Para atajos ya preparados, consulta la primitiva <feDropShadow> y el capítulo sobre efectos de desenfoque SVG. La lista completa de atributos de cada primitiva está en la referencia SVG.

Práctica

¿Qué permite hacer un filtro SVG?

Encadenar primitivas de bajo nivel (desplazamiento, desenfoque, fusión, etc.) para construir efectos compuestos en un gráfico SVG.Ejecutar bucles en HTML.Definir reglas de enrutamiento para un servidor web.Validar la entrada de un formulario antes de enviarlo.