Guía de gradientes SVG – ejemplos lineales y radiales

Los gradientes SVG crean transiciones suaves de color que pueden rellenar o trazar formas, texto y paths SVG. Este tutorial explica cómo <linearGradient>, <radialGradient>, <stop>, fill="url(#id)" y stroke="url(#id)" trabajan juntos en el marcado SVG.

Respuesta rápida: Define un gradiente dentro de <defs>, dale un id, añade elementos <stop> con offset y stop-color, y referencia el gradiente desde una forma o texto con fill="url(#id)" o stroke="url(#id)".

1<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
4      <stop offset="0%" stop-color="steelblue" />
5      <stop offset="100%" stop-color="gold" />
6    </linearGradient>
7  </defs>
8  <rect x="20" y="20" width="180" height="80" fill="url(#brand-gradient)" />
9</svg>

En este artículo aprenderás a:

crear definiciones de gradiente SVG reutilizables en <defs>;
aplicar gradientes lineales y radiales a fill y stroke;
controlar la dirección del gradiente, el punto focal y las paradas de color;
evitar problemas comunes con id, url(#id), offset y gradientUnits;
usar artículos relacionados de Aspose.SVG cuando necesites crear o editar gradientes mediante código.

Gradientes SVG

Un gradiente es una transición suave de color entre puntos de una superficie de dibujo. SVG admite dos elementos principales de gradiente: <linearGradient> y <radialGradient>. Ambos son servidores de pintura, lo que significa que se definen una vez y luego se referencian desde elementos visibles.

Coloca <linearGradient> o <radialGradient> dentro de <defs> para poder reutilizar el gradiente. El atributo id le da un nombre, y los elementos visibles lo referencian mediante fill="url(#id)" o stroke="url(#id)". Así, la transición de color queda separada de las formas, textos o paths que la usan.

Cómo crear gradientes SVG

Añade un bloque <defs> para guardar definiciones de gradiente reutilizables.
Elige <linearGradient> para una transición recta o <radialGradient> para una transición que irradia desde un centro o punto focal.
Define un id único para que los elementos visibles puedan referenciar el gradiente.
Añade elementos <stop> con valores offset crecientes y valores stop-color.
Aplica el gradiente con fill="url(#id)" o stroke="url(#id)".
Ajusta x1, y1, x2, y2, cx, cy, r, fx, fy o gradientUnits cuando la dirección o escala no sea la esperada.

Gradiente lineal SVG

Un gradiente lineal cambia de color a lo largo de una línea recta llamada vector de gradiente. Los atributos x1, y1, x2 e y2 definen ese vector. Con el valor predeterminado gradientUnits="objectBoundingBox", los valores suelen escribirse como porcentajes o fracciones entre 0 y 1; con gradientUnits="userSpaceOnUse", se interpretan en el sistema de coordenadas SVG actual.

El elemento <linearGradient> contiene elementos <stop> anidados. Cada parada define un color en una posición concreta del vector. El atributo offset define la posición, y el color puede establecerse con stop-color o mediante declaraciones CSS ( linear-gradient.svg).

 1<svg height="250" width="700" xmlns="http://www.w3.org/2000/svg">
 2	<defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:LIGHTSALMON" />
 5			<stop offset="50%" style="stop-color:TEAL" />
 6			<stop offset="90%" style="stop-color:LIGHTPINK" />
 7		</linearGradient>
 8	</defs>
 9    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#grad1)" />
10    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="90" fill="url(#grad1)" >Linear Gradient</text>
11</svg>

Gradiente lineal aplicado a texto SVG y a una elipse

En el ejemplo anterior, los elementos <text> y <ellipse> usan fill="url(#grad1)", por lo que comparten la misma definición de gradiente. Los tres elementos <stop> crean la transición visible de LIGHTSALMON a TEAL y luego a LIGHTPINK.

Gradiente radial SVG

Un gradiente radial cambia de color hacia fuera desde un centro o punto focal. Los atributos cx, cy y r definen el círculo final del gradiente: cx y cy establecen su centro, y r su radio. Los atributos fx y fy definen el punto focal donde visualmente empieza el gradiente. Si se omiten cx y cy, ambos toman 50%; si se omiten fx y fy, toman los mismos valores que cx y cy.

En este ejemplo, el centro y el punto focal usan las mismas coordenadas. Con el sistema predeterminado objectBoundingBox, 0.5 significa el centro del elemento destino, por lo que el gradiente radial se expande de forma uniforme desde el centro ( radial-gradient.svg).

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="60%" stop-color="CADETBLUE" />
 6        </radialGradient>
 7    </defs>
 8    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#myRG)" />
 9    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)" >Radial Gradient</text>
10</svg>

Gradiente radial aplicado a texto SVG y a una elipse

El siguiente ejemplo mueve el punto focal desde el centro hasta fx="25%" y fy="25%". Esto desplaza el brillo visual hacia la parte superior izquierda de la forma rellena ( radial-gradient1.svg):

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="30%" stop-color="SILVER" />
 6            <stop offset="60%" stop-color="BISQUE" />
 7            <stop offset="90%" stop-color="GREY" />
 8        </radialGradient>
 9    </defs>
10    <ellipse cx="300" cy="170" rx="185" ry="65" fill="url(#myRG)" fill-opacity="1" />
11    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)">Radial Gradient</text>
12</svg>

Gradiente radial con punto focal desplazado aplicado a texto SVG y a una elipse

Aquí, varias paradas de color y un punto focal fuera del centro crean un brillo más marcado en la elipse. Esta es una forma habitual de dar más dimensión a geometría SVG plana.

Errores comunes y soluciones

Problema	Causa	Solución
El gradiente no se ve	El gradiente no tiene `id`, la referencia es incorrecta o el elemento destino no lo usa	Da al gradiente un `id` único, referencia con `url(#id)` y guarda las definiciones en `<defs>`
El gradiente no se aplica a una forma	Referencia incorrecta en `fill` o `stroke`	Usa `fill="url(#gradientId)"` o `stroke="url(#gradientId)"` y comprueba que el `id` coincida
Los colores aparecen en una dirección inesperada	Valores incorrectos de `x1`, `y1`, `x2`, `y2`	Ajusta los atributos del vector de gradiente para controlar la dirección
El gradiente radial no cubre el área esperada	`r`, centro, punto focal o `gradientUnits` no coinciden con la forma destino	Ajusta `r`, `cx`, `cy`, `fx`, `fy` o usa `gradientUnits="userSpaceOnUse"` si necesitas coordenadas fijas
El gradiente escala de forma inesperada	Se usa el valor predeterminado `gradientUnits="objectBoundingBox"`	Define `gradientUnits="userSpaceOnUse"` para posicionamiento absoluto
Las paradas no se mezclan como esperas	Faltan valores `offset`, se repiten sin intención o no están en el orden deseado	Comprueba que los `offset` sigan el orden deseado de `0%` a `100%`
El gradiente se duplica muchas veces	Las mismas paradas se repiten en varios lugares	Define el gradiente una vez en `<defs>` y reutilízalo con `url(#id)`

Recetas rápidas

Crear un relleno de gradiente lineal horizontal

1<linearGradient id="gradHorizontal" x1="0%" y1="0%" x2="100%" y2="0%">
2    <stop offset="0%" stop-color="steelblue" />
3    <stop offset="100%" stop-color="lightblue" />
4</linearGradient>

Crear un gradiente lineal vertical

1<linearGradient id="gradVertical" x1="0%" y1="0%" x2="0%" y2="100%">
2    <stop offset="0%" stop-color="orange" />
3    <stop offset="100%" stop-color="purple" />
4</linearGradient>

Aplicar un gradiente a stroke en lugar de fill

1<rect x="20" y="20" width="200" height="120"
2      fill="none"
3      stroke="url(#gradHorizontal)"
4      stroke-width="10" />

Crear un gradiente radial centrado

1<radialGradient id="radialCenter" cx="50%" cy="50%" r="50%">
2    <stop offset="0%" stop-color="white" />
3    <stop offset="100%" stop-color="darkblue" />
4</radialGradient>

Mover el punto focal de un gradiente radial

1<radialGradient id="radialFocus" cx="50%" cy="50%" r="60%" fx="25%" fy="25%">
2    <stop offset="0%" stop-color="gold" />
3    <stop offset="100%" stop-color="brown" />
4</radialGradient>

Reutilizar el mismo gradiente para varios elementos

1<circle cx="80" cy="80" r="50" fill="url(#gradHorizontal)" />
2<rect x="160" y="30" width="100" height="100" fill="url(#gradHorizontal)" />

FAQ – Gradientes SVG

¿Cómo aplico un gradiente SVG a una forma?

Define el gradiente en <defs>, dale un id y establece fill o stroke de la forma destino en url(#id). La referencia debe coincidir exactamente con el id del gradiente.

¿Cuál es la diferencia entre linearGradient y radialGradient?

Usa <linearGradient> para una transición de color a lo largo de una línea recta. Usa <radialGradient> cuando el color deba expandirse hacia fuera desde un centro o punto focal.

¿Puedo usar un gradiente SVG para stroke?

Sí. Define el gradiente en <defs> y establece stroke="url(#id)" en el elemento destino. Usa un stroke-width suficiente para que el gradiente sea visible.

¿Por qué el mismo gradiente se ve distinto en formas diferentes?

De forma predeterminada, gradientUnits="objectBoundingBox" asigna el gradiente al bounding box de cada elemento. Usa gradientUnits="userSpaceOnUse" cuando quieras la misma colocación basada en coordenadas en varios elementos.

¿Puedo cambiar colores de gradiente SVG mediante código?

Sí. En Python via .NET, carga el SVG y actualiza los atributos stop-color en los elementos <stop>. Consulta Cambiar colores SVG en Python para un flujo que edita paradas de gradiente.

Recursos relacionados

La especificación SVG 2 Paint Servers define gradientes SVG, servidores de pintura, paradas de gradiente y atributos relacionados.
Gradientes SVG en C# muestra cómo crear gradientes lineales y radiales mediante código con Aspose.SVG for .NET.
Cambiar colores SVG en Python incluye un ejemplo de Python via .NET para editar colores de paradas de gradiente.
Color SVG explica valores de color, opacidad, fill y stroke usados en ejemplos de gradiente.
Filtros SVG explica efectos visuales que pueden combinarse con arte relleno con gradientes.

Filtros SVG Dibujar un copo de nieve