<svg width="200" height="200" style="border: 1px blue solid" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myLinearGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
    <radialGradient id="myRadialGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="2" fill="url('#myLinearGradient')" />
    
  <!-- using my radial gradient -->
  <circle cx="10" cy="5" r="2" fill="url('#myRadialGradient')" />
</svg>