En una entrada pasada llamada:Dibujando nuestro propios SVG en HTML (parte 1) vimos cómo crear algunas figuras geométricas SVG básicas en HTML a través del elemento svg, sus atributos y definirles un estilo con CSS. En esta entrada veremos cómo definir y aplicar gradientes a cualquiera de estos SVG; hay dos tipos de gradientes SVG que podemos emplear en nuestros diseños:

• Linear: Empleando el elemento <linearGradient>. Un gradiente lineal es aquel generado de manera lineal.
• Radial: Empleando el elemento <radialGradient>. Un gradiente radial es aquel generado de manera circular.

Veamos una imagen comparativa de un gradiente lineal vs radial:

El gradiente lineal <linearGradient>

El gradiente lineal más sencillo que podemos construir es aquel que consta de apenas dos colores:

<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" />
    <stop offset="100%" />
</linearGradient>

Los atributos x1, x2, y1,y2 permiten indicar la posición inicial y final del gradiente.

Además se emplea el elemento <stop> que en conjunto con sus atributos permiten especificar el color y la posición del color; a través de la propiedad CSS stop-color se especifica el color y con el atributo offset especifica en donde empieza el color y donde termina.

Toda definición del gradiente debe ser colocado dentro de un elemento <defs> que permite reutilizar el recurso fácilmente a través de su identificador siempre y cuando el recurso referenciado se encuentre dentro de su padre <svg> quedando definido el gradiente de la siguiente manera:

<defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" />
        <stop offset="100%" />
    </linearGradient>
</defs>

Ahora, para referenciar el recurso anterior o gradiente a una figura por ejemplo una elipse referenciamos el identificador del gradiente en el atributo fill en la figura:

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" />
            <stop offset="100%" />
    </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Ejemplos gradiente lineal <linearGradient>

Finalmente, veamos un conjunto de ejemplos empleando el siguiente CSS:

.example stop:nth-child(1) {
	stop-color: rgb(255, 255, 0)/*Amarillo*/
}

.example stop:nth-child(2) {
	stop-color: rgb(255, 0, 0)/*Rojo*/
}

.example stop:nth-child(3) {
	stop-color: rgb(0, 255, 0)/*Verde*/
}

.example stop:nth-child(4) {
	stop-color: rgb(0, 0, 255)/*Azul*/
}

.example stop:nth-child(5) {
	stop-color: rgb(0, 0, 0)/*Negro*/
}

Dos colores horizontal

El ejemplo más sencillo de una figura que se le aplique un gradiente lineal, es definir el gradiente con dos colores a través del elemento <stop>.

Al definir el gradiente se define desde qué ángulo queremos dibujar el gradiente empleando los atributos x1, x2, y1,y2; como verás, al colocar el último punto en el eje de las X (x2) en 100% se desplaza de manera horizontal de izquierda a derecha:

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" />
            <stop offset="100%" />
    </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Tres colores vertical

En este otro ejemplo aplicamos un gradiente lineal con tres colores pero esta vez dibujamos el gradiente desplazandolo en vertical al colocar el último punto en el eje de las Y (y2) en 100%

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" />
            <stop offset="45%" />
            <stop offset="100%" />
    </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Cuatro colores lateral

Ahora dibujamos un gradiente de cuatro colores pero nos desplazamos en ambos ejes X2 y Y2:

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="50%">
            <stop offset="0%" />
            <stop offset="33%" />
            <stop offset="66%" />
            <stop offset="100%" />
    </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Cinco colores

Es posible dibujar tando colores en el gradiente como deseemos:

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" />
            <stop offset="25%" />
            <stop offset="50%" />
            <stop offset="75%" />
            <stop offset="100%" />
    </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

El gradiente Radial <radialGradient>

Para definir gradientes radiales hay que emplear el elemento <radialGradient> en lugar de <linearGradient>, para indicar la posición inicial y final se emplean cx, cy, fx y fy en lugar de los atributos x1, x2, y1,y2; veamos unos ejemplos:

Dos colores

En este ejemplo veremos un gradiente generado desde el medio de la elipse:

<svg>
    <defs>
        <radialGradient id="gradient" cx="50%" cy="50%" fx="50%" fy="50%">
            <stop offset="0%" />
            <stop offset="100%" />
    </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Tres colores

Variemos un poco el centro en donde se empieza a dibujar el gradiente:

<svg>
    <defs>
        <radialGradient id="gradient" cx="20%" cy="30%" fx="50%" fy="50%">
            <stop offset="0%" />
            <stop offset="45%" />
            <stop offset="100%" />
    </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>

Cuatro colores

Aquí aplicamos cuatro colores:

<svg>
    <defs>
        <radialGradient id="gradient" cx="50%" cy="50%" fx="50%" fy="50%">
            <stop offset="0%" />
            <stop offset="33%" />
            <stop offset="66%" />
            <stop offset="100%" />
    </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="100" ry="55" fill="url(#gradient)" />
</svg>