Guía de filtros SVG – Gaussian blur, sombras y luz

Los filtros SVG crean efectos visuales como desenfoque, sombras, iluminación, cambios de saturación, rotación de tono y ajustes de canales directamente en el marcado SVG. Este tutorial explica cómo se definen los filtros en <defs>, cómo trabajan juntas las primitivas de filtro y cómo aplicar un filtro a formas, texto o imágenes.

Respuesta rápida: Define un <filter> SVG dentro de <defs>, añade una o varias primitivas de filtro como <feGaussianBlur>, <feOffset>, <feBlend>, <feSpecularLighting> o <feColorMatrix>, y aplica el filtro con filter="url(#filter-id)" en el elemento destino.

1<svg width="220" height="140" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <filter id="soft-blur">
4      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
5    </filter>
6  </defs>
7  <circle cx="110" cy="70" r="45" fill="#20b2aa" filter="url(#soft-blur)" />
8</svg>

En este artículo aprenderás a:

definir un filtro SVG y aplicarlo con el atributo filter;
combinar primitivas de filtro para crear desenfoque, sombras, iluminación y efectos de color;
controlar regiones de filtro para evitar salidas recortadas;
elegir entre <feGaussianBlur>, <feColorMatrix> y <feComponentTransfer>;
resolver problemas comunes de renderizado en filtros SVG.

Qué es un filtro SVG

Los filtros SVG añaden efectos visuales a gráficos bitmap o vectoriales antes de renderizar el resultado final. Un filtro puede desenfocar un elemento, crear una sombra, cambiar canales de color, añadir iluminación, distorsionar píxeles o combinar varios resultados intermedios en un solo efecto. Como el efecto sigue formando parte del marcado SVG, puede escalar con el gráfico vectorial y permanecer editable.

Un filtro se define con un elemento <filter> dentro de un bloque <defs>. El <filter> no se renderiza por sí mismo; sus hijos, las primitivas de filtro, realizan el trabajo real. El elemento <filter> define el sistema de coordenadas y la región donde operan todas las primitivas. Sus atributos clave son:

x, y, width, height – definen la región rectangular del gráfico a la que se aplica el filtro
filterUnits – especifica el sistema de coordenadas de la región de filtro (userSpaceOnUse u objectBoundingBox)
primitiveUnits – define el sistema de coordenadas usado por las primitivas dentro del filtro
atributos básicos y de presentación – atributos SVG comunes como id, class, style y propiedades de presentación

Filtros SVG y primitivas de filtro

Los filtros SVG se construyen combinando varias primitivas de filtro.

Cada primitiva realiza una operación gráfica concreta y produce un resultado. Al encadenarlas, puedes crear efectos complejos: la salida de una primitiva puede convertirse en la entrada de la siguiente.
La mayoría de primitivas toman una o dos entradas con nombre y producen un resultado. La entrada principal se especifica en el atributo in. El valor predeterminado es in="SourceGraphic". La salida se nombra con result para que otra primitiva pueda reutilizarla.
Cada primitiva también puede definir su propia región de procesamiento con x, y, width y height, resuelta respecto a la región del <filter>.

La tabla siguiente resume elementos de filtro SVG comunes, su propósito y atributos clave. La mayoría de filas son primitivas de filtro; los elementos de fuente de luz como <fePointLight> se usan dentro de primitivas de iluminación.

Categoría	Elemento de filtro	Propósito	Atributos clave
Gaussian Blur	`<feGaussianBlur>`	Desenfoca la imagen de entrada mediante una función gaussiana	`in`, `stdDeviation`, `result`
Sombra	`<feOffset>`	Desplaza el canal alfa para crear la base de la sombra	`in`, `dx`, `dy`, `result`
Sombra	`<feGaussianBlur>`	Suaviza la sombra desplazada	`in`, `stdDeviation`, `result`
Sombra	`<feBlend>`	Mezcla la sombra con el gráfico original	`in`, `in2`, `mode`
Efectos de luz	`<feGaussianBlur>`	Suaviza el canal alfa usado como mapa de relieve	`in`, `stdDeviation`, `result`
Efectos de luz	`<feSpecularLighting>`	Genera iluminación especular con una fuente de luz	`in`, `surfaceScale`, `specularConstant`, `specularExponent`, `lighting-color`, `result`
Efectos de luz	`<feDiffuseLighting>`	Genera iluminación difusa con una fuente de luz	`in`, `surfaceScale`, `diffuseConstant`, `lighting-color`, `result`
Efectos de luz	`<fePointLight>`	Define una fuente de luz puntual para primitivas de iluminación	`x`, `y`, `z`
Efectos de luz	`<feComposite>`	Combina la iluminación con el gráfico fuente	`in`, `in2`, `operator`, `k1`, `k2`, `k3`, `k4`, `result`
Efectos de luz	`<feMerge>`	Fusiona varios resultados de filtro en una salida	–
Filtros de color	`<feColorMatrix>`	Aplica transformaciones de color basadas en matriz	`in`, `type`, `values`, `result`
Filtros de color	`<feComponentTransfer>`	Aplica funciones de transferencia por canal	`in`, `result`

Cada filtro necesita una imagen de entrada o un gráfico fuente que procesar. Sin entrada, el filtro no tiene nada que renderizar. Los atributos in y result son importantes porque permiten pasar la salida de una primitiva a la siguiente en la cadena.

Cómo crear filtros SVG

Añade un bloque <defs> para contener definiciones de filtro que no deben renderizarse por sí mismas.
Crea un elemento <filter> y dale un id estable.
Añade una o varias primitivas, como <feGaussianBlur>, <feOffset>, <feBlend> o <feColorMatrix>.
Usa in y result cuando una primitiva posterior deba consumir la salida de una anterior.
Amplía x, y, width y height cuando el desenfoque, sombra o iluminación se extienda fuera de la forma original.
Aplica el filtro a la forma, texto, grupo o imagen con filter="url(#id)".

Gaussian Blur

Gaussian blur suaviza una imagen o forma distribuyendo píxeles cercanos según una función gaussiana. En SVG se usa a menudo para sombras, brillos, enfoque suave, reducción de detalle y desenfoque direccional.

La primitiva <feGaussianBlur> crea el desenfoque. El atributo stdDeviation controla el radio de desenfoque. Un solo valor desenfoca por igual en ambas direcciones. Dos valores crean desenfoque direccional: el primero se aplica en el eje x y el segundo en el eje y.

El ejemplo siguiente compara distintos valores de stdDeviation en un archivo SVG ( gaussian-blur.svg):

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
 4            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
 5        </filter>
 6        <filter id="f2" x="-20%" y="-20%" width="140%" height="140%">
 7            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
 8        </filter>
 9        <filter id="f3" x="-20%" y="-20%" width="140%" height="140%">
10            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
11        </filter>
12    </defs>
13    <g stroke="none" fill="#20B2AA">
14        <ellipse cx="60" cy="80" rx="55" ry="35" />
15        <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
16        <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
17        <ellipse cx="500" cy="80" rx="55" ry="35" filter="url(#f3)" />
18    </g>
19</svg>

Cuatro elipses ilustran el efecto Gaussian blur con diferentes valores stdDeviation

El desenfoque suele expandir el resultado visible fuera de la forma original. Si la región de filtro es demasiado pequeña, los bordes desenfocados se recortan. El ejemplo amplía la región con valores negativos de x e y para mantener visibles los bordes suavizados.

Puedes crear un efecto Gaussian Blur en C# con Aspose.SVG for .NET API. Para aprender más sobre el namespace Aspose.Svg.Filters y ver ejemplos detallados en C# con la clase SVGFEGaussianBlurElement, consulta el artículo Gaussian Blur.

Efecto de sombra

Una sombra separa una forma o texto del fondo. En SVG, una sombra suele construirse a partir del canal alfa de la fuente, un desplazamiento, un desenfoque y un paso de mezcla o fusión.

La primitiva <feOffset> desplaza una capa en SVG. Además de in y result, acepta dos atributos principales, dx y dy, que definen la distancia de desplazamiento en los ejes x e y. La primitiva <feBlend> mezcla dos capas de entrada; su atributo mode define el modo de mezcla.

El siguiente SVG crea una sombra suave para una elipse ( drop-shadow-effect.svg):

 1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
 4            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
 5            <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
 6            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
 7        </filter>
 8    </defs>
 9    <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
10</svg>

Efecto de sombra aplicado a la elipse

Explicación paso a paso

<feOffset> toma in="SourceAlpha", desplaza la máscara alfa 10 px a la derecha y 10 px hacia abajo, y guarda el resultado intermedio como "offset". Usar SourceAlpha crea la sombra desde el contorno de la forma, no desde el color de relleno.
<feGaussianBlur> toma in="offset", aplica un desenfoque de 10 y guarda el resultado en un búfer temporal llamado "blur".
<feBlend> toma in="SourceGraphic" e in2="blur", y dibuja la elipse original junto con la sombra desplazada y desenfocada.

Efecto de sombra de la elipse paso a paso

Puedes crear un efecto de sombra en C# con Aspose.SVG for .NET API. Consulta Drop Shadow Effect para aprender más sobre Aspose.Svg.Filters y ver ejemplos detallados de aplicación de sombra a formas y texto SVG.

Efectos de luz SVG

Los efectos de iluminación SVG se crean dentro de un <filter> con primitivas de iluminación como <feDiffuseLighting> y <feSpecularLighting>, además de elementos de fuente de luz como <fePointLight>. Las primitivas de iluminación usan el canal alfa de la fuente como mapa de superficie y calculan cómo debe aparecer la luz sobre esa superficie.

El elemento <fePointLight> define una fuente de luz puntual y se usa como hijo de <feDiffuseLighting> o <feSpecularLighting>. Sus atributos x, y y z establecen la posición de la luz. La iluminación difusa crea una superficie iluminada mate, mientras que la especular crea un brillo más marcado.

Considera un ejemplo de efecto de luz ( light-effect.svg):

 1<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id = "F1">
 4            <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
 5            <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
 6                <fePointLight x = "80" y = "60" z = "200" />
 7            </feSpecularLighting>
 8            <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
 9        </filter>
10    </defs>
11    <g  fill = "INDIANRED" filter = "url(#F1)">
12        <circle cx="100" cy="100" r="60" />
13        <circle cx="100" cy="230" r="60" />
14        <circle cx="230" cy="100" r="60" />
15        <circle cx="230" cy="230" r="60" />
16    </g>
17</svg>

Resultado del efecto de iluminación aplicado a cuatro círculos rojos

Explicación paso a paso

En este ejemplo, el efecto de luz se crea mediante una cadena de elementos SVG dentro de un único <filter>: tres elementos son primitivas de filtro, y <fePointLight> define la fuente de luz:

<feGaussianBlur> toma la entrada SourceAlpha, que es el canal alfa de la imagen fuente. El resultado se guarda en un búfer temporal llamado "blur".
La iluminación se crea con <feSpecularLighting> y su hijo <fePointLight>. <feSpecularLighting> usa el búfer "blur" como mapa de elevación de superficie y guarda el brillo en "light".
<feComposite> toma in="SourceGraphic" e in2="light", y los combina con la operación aritmética de composición. Para cada píxel, el operador aritmético calcula: result = k1·in1·in2 + k2·in1 + k3·in2 + k4.

El código siguiente demuestra otro ejemplo de encadenar primitivas de filtro y una fuente de luz dentro de un único <filter> ( button.svg):

 1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="myF" x="-20%" y="-20%" width="160%" height="160%">
 4            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
 5            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
 6            <feSpecularLighting in="offsetBlur" surfaceScale="8" specularConstant="0.7" specularExponent="2" lighting-color="#bbbbbb" result="specOut">
 7                <fePointLight x="-100" y="-100" z="100" />
 8            </feSpecularLighting>
 9            <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
10            <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1.5" k2="0.5" k3="1" k4="0" result="litPaint" />
11            <feMerge>
12                <feMergeNode in="offsetBlur" />
13                <feMergeNode in="litPaint" />
14            </feMerge>
15        </filter>
16    </defs>
17    <ellipse cx="85" cy="70" rx="65" ry="45" fill="#20B2AA" filter="url(#myF)" />
18    <g fill="#696969" font-size="25" font-family="arial">
19        <text x="55" y="80">PUSH</text>
20    </g>
21</svg>

Botón azul con texto PUSH creado mediante una cadena de primitivas de iluminación

En SVG Lighting Effects aprenderás a combinar primitivas de filtro y fuentes de luz para crear y controlar efectos de iluminación SVG en C# con Aspose.SVG for .NET API.

Filtros de color

En SVG puedes crear una gran variedad de efectos de color compatibles con casi todos los navegadores modernos. Para trabajar con color, <feColorMatrix> suele ser una de las mejores opciones. Es una primitiva de filtro que usa una matriz para afectar los valores de color de cada canal RGBA. El elemento <feComponentTransfer> es otra primitiva SVG potente: permite controlar canales RGBA individuales de la imagen, por ejemplo para crear efectos similares a posterización.

Esta sección se centra en dos primitivas prácticas de color: <feColorMatrix> para transformaciones basadas en matriz y <feComponentTransfer> para ediciones por canal.

Ejemplo de saturación con feColorMatrix

La primitiva <feColorMatrix> aplica una transformación matricial a los canales RGBA de cada píxel de la imagen de entrada. Como resultado se produce un nuevo conjunto de valores de color y alfa. El atributo type puede ser:

matrix – matriz personalizada 5×4
saturate – ajusta la saturación
hueRotate – rota el tono alrededor de la rueda de color
luminanceToAlpha – convierte luminancia en alfa

Veamos ejemplos del uso de la operación saturate ( saturation.svg):

1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <filter id="myFilter">
4            <feColorMatrix in="SourceGraphic" type="saturate" values="0"></feColorMatrix>
5        </filter>
6    </defs>
7    <image filter="url(#myFilter)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>

Serie de imágenes con diferentes valores de saturación

Ejemplo de rotación de tono con feColorMatrix

Una operación específica de matriz de color es la rotación de tono alrededor de la rueda de color. El ejemplo siguiente ilustra la operación hueRotate.

1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <filter id="hueR">
4            <feColorMatrix in="SourceGraphic" type="hueRotate" values="40"></feColorMatrix>
5        </filter>
6    </defs>
7    <image filter="url(#hueR)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>

La figura siguiente contiene una serie de imágenes que ilustran diferentes valores de hueRotate.

Serie de imágenes con diferentes valores hueRotate

Ejemplo de manipulación de canales con feComponentTransfer

La primitiva <feComponentTransfer> realiza operaciones por canal sobre valores RGBA. Es útil para ajustes de brillo, cambios de contraste, balance de canales y efectos de color posterizados.

El ejemplo siguiente cambia los canales rojo, verde y azul de forma independiente:

 1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="RGBA">
 4            <feComponentTransfer>
 5                <feFuncR type="linear" slope="2.0" />
 6                <feFuncG type="linear" slope="1.7" />
 7                <feFuncB type="linear" slope="0.1" />
 8                <feFuncA type="identity" />
 9            </feComponentTransfer>
10        </filter>
11    </defs>
12    <image filter="url(#RGBA)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
13</svg>

Foto procesada con transferencia personalizada de componentes RGBA

El elemento <feComponentTransfer> modifica canales de color mediante elementos hijos de función de transferencia: <feFuncR>, <feFuncG>, <feFuncB> y <feFuncA>. Cada hijo controla el canal rojo, verde, azul o alfa. El atributo type selecciona la función de transferencia usada para ese canal. SVG admite cinco tipos de función: identity, table, discrete, linear y gamma.

Lee Color Filters si quieres crear filtros de color en C#. Aprenderás sobre las primitivas feColorMatrix y feComponentTransfer y verás fragmentos de C# que muestran cómo usarlas.

Errores comunes y soluciones

Problema	Causa	Solución
La salida del filtro se recorta	La región de filtro (`x`, `y`, `width`, `height`) es demasiado pequeña	Amplía la región con valores negativos de `x` e `y` y valores mayores de `width` y `height`
La sombra no se ve	La sombra usa `SourceGraphic` en lugar de `SourceAlpha` o se mezcla incorrectamente	Usa `SourceAlpha` como entrada de `<feOffset>` y mézclala con el gráfico original
El efecto de iluminación se ve plano o invisible	El canal alfa no se preparó como mapa de relieve o los valores de luz son bajos	Desenfoca `SourceAlpha` antes de la iluminación y ajusta los parámetros de luz
Los colores cambian de forma inesperada	Se aplicó una matriz de color o valores de transferencia incorrectos	Aplica filtros de color directamente a `SourceGraphic` y verifica los valores paso a paso

Recetas rápidas

Crear un Gaussian blur simple

1<filter id="blur">
2    <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
3</filter>

Aplicar desenfoque direccional horizontal o vertical

1<filter id="directionalBlur">
2    <feGaussianBlur in="SourceGraphic" stdDeviation="8 0" />
3</filter>

Añadir una sombra suave

1<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
2    <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
3    <feGaussianBlur in="offset" stdDeviation="6" result="blur" />
4    <feBlend in="SourceGraphic" in2="blur" mode="normal" />
5</filter>

Convertir una imagen a escala de grises

1<filter id="grayscale">
2    <feColorMatrix type="saturate" values="0" />
3</filter>

Ajustar brillo y contraste

1<filter id="brightnessContrast">
2    <feComponentTransfer>
3        <feFuncR type="linear" slope="1.2" intercept="0.1" />
4        <feFuncG type="linear" slope="1.2" intercept="0.1" />
5        <feFuncB type="linear" slope="1.2" intercept="0.1" />
6    </feComponentTransfer>
7</filter>

FAQ – Filtros SVG

¿Cómo aplico un filtro SVG a un elemento?

Define el filtro en <defs> y aplícalo con filter="url(#filter-id)" en una forma, texto, grupo o imagen. El id de la definición debe coincidir con el valor usado en el atributo filter.

¿Por qué mi desenfoque o sombra SVG aparece recortado?

Los efectos de desenfoque y sombra suelen extenderse fuera de los límites originales del objeto. Amplía la región de filtro con x, y, width y height para que los píxeles generados tengan suficiente espacio.

¿Cuál es la diferencia entre feColorMatrix y feComponentTransfer?

Usa <feColorMatrix> cuando una operación matricial deba transformar valores de color, como escala de grises, saturación o rotación de tono. Usa <feComponentTransfer> cuando necesites control separado sobre canales rojo, verde, azul o alfa.

¿Puedo crear filtros SVG con Aspose.SVG for .NET?

Sí. El artículo Filtros SVG en C# muestra cómo crear filtros SVG mediante código con Aspose.SVG for .NET.

Recursos relacionados

Filter Effects Module Level 1 es la especificación W3C para efectos de filtro SVG y CSS.
Filtros SVG en C# explica cómo crear filtros SVG, Gaussian blur, sombras, iluminación y efectos de color con Aspose.SVG for .NET.
Trabajar con filtros SVG en Python muestra cómo crear, aplicar y editar efectos de filtro SVG con Aspose.SVG for Python via .NET.
Gaussian Blur ofrece un flujo C# centrado en la primitiva <feGaussianBlur>.
Drop Shadow Effect muestra cómo crear sombras para formas y texto SVG.
Color Filters cubre <feColorMatrix> y <feComponentTransfer> en ejemplos C#.
Gradientes SVG explica rellenos con gradiente, que a menudo combinan bien con formas filtradas.
Color SVG explica valores de color, fill, stroke, opacidad y formatos usados por gráficos SVG.

Contenido SVG incrustado Gradientes SVG