¿Por qué usar degradados en SVG?

Los degradados transforman tus gráficos SVG, añadiendo profundidad y dinamismo con transiciones suaves entre colores. En nuestros tutoriales anteriores, aprendiste a crear figuras primitivas como círculos y rectángulos, polilíneas, y a trabajar con vectores en <path>. También exploramos cómo insertar imágenes, videos, mover elementos SVG, darles color con fill y stroke, e incluir CSS/JavaScript embebidos (Conoce mas de los gráficos SVG). Ahora, es momento de dominar los degradados, una técnica esencial para diseños modernos.

Un degradado SVG se define en la etiqueta <defs> y se aplica a elementos como círculos, rectángulos o caminos mediante un identificador único en fill="url(#grad)". Puedes usar software como Adobe Illustrator o Inkscape para crear degradados, pero requieren experiencia. En esta guía, aprenderás métodos más accesibles: desde crear degradados con código hasta usar herramientas visuales como creadorlogos.com. ¡Sigue leyendo!

Tipos de degradados en SVG

Antes de sumergirnos en el código, exploremos los tipos de degradados más usados en SVG y diseño. Algunos son nativos en SVG, mientras que otros (como el cónico) requieren alternativas con CSS o simulaciones.

• Degradado Lineal (<linearGradient>): Transición de color a lo largo de una línea recta.
• Degradado Radial (<radialGradient>): Transición desde el centro hacia el exterior, como un círculo.
• Degradado Cónico (conic-gradient): Transición circular, como una rueda (no nativo en SVG, pero se puede simular).
• Degradado Multicolor: Usa múltiples puntos de color en un degradado lineal o radial.
• Degradado con Transparencias: Aplica transparencias a los colores para efectos de desvanecimiento.

A continuación, veremos cómo implementar cada uno con código y ejemplos visuales.

Crear degradados con <linearGradient> y <radialGradient>

La forma más directa de aplicar degradados en SVG es definiendo un <linearGradient> o <radialGradient> dentro de una etiqueta <defs>. Luego, lo aplicas a un elemento con fill="url(#id)". Aquí te muestro cómo hacerlo para cada tipo.

Degradado Lineal (<linearGradient>)

Un degradado lineal transita colores a lo largo de una línea recta. Define los puntos iniciales y finales con x1, y1, x2, y2, y usa <stop> para los colores. Vamos a desglosar este código paso a paso para que sea fácil de entender, incluso si no tienes experiencia con programación ni SVG.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>

Explicación de cada codigo degradados:

• <svg>: Esto es como el lienzo donde dibujamos nuestro diseño. Define el área donde aparecerá todo, como un papel grande. Aquí decimos que el dibujo tiene 200x200 píxeles y usamos viewBox="0 0 200 200" para que se ajuste bien al tamaño.
• <defs>: Es un contenedor de definiciones. Aquí se colocan elementos que no se dibujan directamente pero que pueden ser reutilizados, como degradados, filtros o patrones.
• <linearGradient>: Define un degradado lineal, que es una transición de color que va en línea recta.
• id="grad1": Es un identificador único, como un nombre especial para este degradado.
• x1="0%" y1="0%": Punto de inicio del degradado en la esquina superior izquierda.
• x2="100%" y2="0%": Punto final del degradado en la esquina superior derecha.
• <stop>: Define los puntos de cambio de color en el degradado.
• offset="0%": Este color aparece al inicio del degradado.
• stop-color="red": Comienza en rojo.
• offset="100%": Este color aparece al final del degradado.
• stop-color="blue": Termina en azul.
• <rect>: Dibuja un rectángulo en el lienzo utilizando el degradado mediante fill="url(#grad1)".

Variaciones del degradado lineal

Cambiando los valores de x1, y1, x2, y2, puedes hacer que el degradado sea horizontal, vertical o diagonal:

• Horizontal: Usa x1="0%" y1="0%" x2="100%" y2="0%".
• Vertical: Cambia a x1="0%" y1="0%" x2="0%" y2="100%".
• Diagonal: Usa x1="0%" y1="0%" x2="100%" y2="100%".

Ejemplos visuales

Degradado Radial (<radialGradient>)

Un degradado radial transita colores desde un centro hacia afuera. Usa cx, cy, r para definir el centro y radio del degradado.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad2)" />
</svg>

• <radialGradient>: Crea un degradado que sale desde el centro hacia afuera, como si los colores se expandieran en círculos.
• cx="50%" cy="50%": El centro del degradado, justo en el medio del lienzo (50% de izquierda a derecha y 50% de arriba a abajo).
• r="50%": El radio del degradado, que determina hasta dónde llegan los colores desde el centro (50% del ancho total).

Ejemplo visual

Variaciones del degradado radial

Cambiando los valores de cx, cy, r, puedes ajustar la posición del centro y el alcance del degradado radial:

• Centro desplazado a la esquina superior izquierda: Usa cx="25%" cy="25%" r="50%" para mover el centro del degradado hacia la esquina superior izquierda, manteniendo el mismo radio.
• Radio pequeño: Usa cx="50%" cy="50%" r="25%" para reducir el radio, haciendo que el degradado se concentre más cerca del centro.
• Radio grande: Usa cx="50%" cy="50%" r="75%" para aumentar el radio, extendiendo el degradado más hacia los bordes.

Ejemplos visuales

Degradado Multicolor

Puedes añadir múltiples <stop> para crear degradados con más de dos colores.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3">
      <stop offset="0%" stop-color="red" />
      <stop offset="33%" stop-color="yellow" />
      <stop offset="66%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</svg>

Explicación de cada parte para principiantes

• <linearGradient>: Crea una transición de colores en línea recta.
• offset="0%" stop-color="red": Comienza con rojo al inicio (0%).
• offset="33%" stop-color="yellow": Cambia a amarillo en un tercio del camino (33%).
• offset="66%" stop-color="green": Cambia a verde en dos tercios del camino (66%).
• offset="100%" stop-color="blue": Termina en azul al final (100%).

Ejemplo visual

Degradado con Transparencias

Usa stop-opacity para añadir transparencias a los colores, creando efectos de desvanecimiento.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="200" fill="white" />
  <defs>
    <radialGradient id="grad4">
      <stop offset="0%" stop-color="purple" stop-opacity="1" />
      <stop offset="100%" stop-color="purple" stop-opacity="0" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad4)" />
</svg>

Explicación de cada parte para principiantes

• <rect>: Un rectángulo que cubre todo el lienzo, pintado de blanco como fondo.
• offset="0%" stop-color="purple" stop-opacity="1": En el centro (0%), el color púrpura es totalmente visible (opacidad 1).
• offset="100%" stop-color="purple" stop-opacity="0": En los bordes (100%), el púrpura se vuelve invisible (opacidad 0), como si desapareciera.
• <circle>: Dibuja un círculo con centro en (100, 100) y radio de 90 píxeles.

Ejemplo visual

Modificar degradados con JavaScript

Puedes manipular los colores y puntos de parada (<stop>) dinámicamente mediante JavaScript seleccionando los elementos por su ID y cambiando sus atributos de color o posición en tiempo real.

Colorear con degradados en creadorlogos.com

Si prefieres evitar editar código complejo de matrices y puntos de parada, en creadorlogos.com puedes aplicar degradados lineales y radiales de forma completamente visual, eligiendo direcciones, ángulos y múltiples colores con un par de clics para descargar tu logotipo listo para producción.

Simular degradados cónicos en SVG

Aunque SVG nativo no incluye una etiqueta directa para degradados cónicos (tipo rueda de color), estos se pueden simular eficientemente mediante la superposición de múltiples trazados vectoriales o mediante máscaras avanzadas y filtros CSS embebidos.