En SVG (gráficos vectoriales escalables), los degradados se utilizan para rellenar formas con colores que cambian suavemente. Hay dos tipos principales de degradados en SVG: degradados lineales y degradados radiales. Le daré ejemplos para ambos.

Degradados lineales:

Ejemplo 1: degradado lineal vertical

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define linear gradient -->
  <linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>

  <!-- Apply linear gradient to a rectangle -->
  <rect width="200" height="200" fill="url(#linearGradient)" />
</svg>

Ejemplo 2: degradado lineal diagonal

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define linear gradient -->
  <linearGradient id="diagonalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>

  <!-- Apply linear gradient to a rectangle -->
  <rect width="200" height="200" fill="url(#diagonalGradient)" />
</svg>

Degradados radiales:

Ejemplo 3: gradiente radial

 XML
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Define radial gradient -->
  <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </radialGradient>

  <!-- Apply radial gradient to a circle -->
  <circle cx="100" cy="100" r="100" fill="url(#radialGradient)" />
</svg>

En estos ejemplos, los elementos <linearGradient> y <radialGradient> definen el degradado, y los <stop> elementos dentro de ellos definen las paradas de color a lo largo del degradado. El atributo fill de la forma (por ejemplo, <rect> u <circle> ) hace referencia al degradado utilizando la sintaxis url(#gradientId) .

¡Siéntete libre de experimentar con los atributos y valores para crear diferentes efectos de degradado!