SVG Gradients

svg gradient are capable to fill multiple colors in single element.

Example 1

 <svg  height="170" width="240">
    <defs>
    <linearGradient id="colorFill" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(2251, 20, 55);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <circle cx="100" cy="80" r="50" fill="url(#colorFill)"></circle>
  </svg>

Example 2

  <svg  height="230" width="300">
    <defs>
    <linearGradient id="colorFill1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(20, 20, 55);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
    </linearGradient>
       <linearGradient id="colorFill2" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="20%"
      style="stop-color:rgb(55, 21, 64, 1);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(255, 44, 37);stop-opacity:1" ></stop>
    </linearGradient>
      <linearGradient id="colorFill3" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="20%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(8, 8, 37);stop-opacity:1" ></stop>
    </linearGradient>
     <linearGradient id="colorFill4" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="10%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
        <stop offset="20%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
        <stop offset="60%"
      style="stop-color:rgb(33, 150, 243);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(33, 150, 243)stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <text x="10" y="50" font-size="45px" fill="url(#colorFill1)">SVG</text>
     <text x="10" y="100" font-size="45px" fill="url(#colorFill2)">SVG </text>
    <text x="10" y="150" font-size="45px" fill="url(#colorFill3)">SVG </text>
       <text x="10" y="200" font-size="45px" fill="url(#colorFill4)">SVG </text>
  </svg>