Computer Graphics

Fill colors for an SVG shape may be gradient fills that interpolate colors between pre-specified colors. The pre-specified colors are called stops.

Linear gradients interpolate the colors in a linear direction. The following example draws a box with a horizontal linear gradient from yellow to coral:

<svg width="80" height="80"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <linearGradient id="lineargrad1"
         x1="0%" x2="100%" y1="0%" y2="0%">

         <stop offset="0%" stop-color="yellow" />
         <stop offset="100%" stop-color="coral" />

      </linearGradient>
   </defs>

   <rect width="80" height="80" fill="url(#lineargrad1)" />

</svg>

In this example, a linearGradient element with unique identifier “lineargrad1” is defined in a defs element. The value of the fill attribute of the rect element tells the SVG interpreter to find that unique identifier in the current document.

The x and y attributes of the linearGradient element specify interpolation steps relative to the colors specified in the stop elements. Changing those values may change the direction of the gradient. For example, the following values generate a diagonal gradient:

x1="0%"  y1="0%"  x2="100%"  y2="100%"

And for a vertical gradient:

x1="0%"  x2="0%"  y1="0%"  y2="100%"

More than two colors may be specified. The following gradient uses three colors, transitioning from yellow to coral to orange:

<svg width="80" height="80"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <linearGradient id="lineargrad2"
         x1="0%" x2="0%" y1="0%" y2="100%">

         <stop offset="0%" stop-color="yellow" />
         <stop offset="50%" stop-color="coral" />
         <stop offset="100%" stop-color="orange" />

      </linearGradient>
   </defs>

   <rect width="80" height="80" fill="url(#lineargrad2)" />

</svg>