Gradients support

Gradients can be defined in the defs element^[1]

See Gradients and Patterns

.

For example:

   <linearGradient id="linearGradient4144"
     <stop offset="5%" stop-color="#F60" />
     <stop offset="95%" stop-color="#FF6" />
   </linearGradient>

Overview

The following attributes are supported for the both gradient specification types:

• id: the id of the gradient, to use in shapes which refer to this gradient
• xlink:href: the optional link to another gradient specification, allowing to reuse the Gradient stops specification from another gradient
• spreadMethod

Gradient stops

Each gradient specification can have one or several gradient stop children. Each stop specifies one ramp of color for the gradient. A stop has the following attributes:

• offset: indicates where the gradient stop is placed
• stop-color: indicates the color of the stop
• stop-opacity: indicates the color opacity

Note that these attributes can also be specified through the style attribute.

Linear gradient

The following attributes are specifically supported for the linear gradient specification:

• x1 and y1: the starting point of the gradient. If they are not specified, they will be assumed to be 0%
• x2 and y2: the ending point of the gradient. If they are not specified, they will be assumed to be 100% for x2 and 0% for y2

Example

The folllowing file:

   <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
         <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%"  stop-color="gold" />
            <stop offset="95%" stop-color="red" />
         </linearGradient>
      </defs>
      <circle cx="100" cy="100" r="80" fill="url('#myGradient')" />
   </svg>

Has the following result:

Radial gradient

The following attributes are specifically supported for the radial gradient specification:

• cx and cy: the center of the circle for the radial gradient
• r: the radius of the circle for the radial gradient
• fx and fy: the focal point for the radial gradient

Example

The folllowing file:

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047">
      <defs id="defs4">
         <linearGradient id="linearGradient4138">
            <stop style="stop-color:#bbe9ff;stop-opacity:1;" offset="0" id="stop4140" />
            <stop id="stop4190" offset="0.53469652" style="stop-color:#15ea15;stop-opacity:0.77254903" />
            <stop style="stop-color:#fff8bb;stop-opacity:0.5492537" offset="1" id="stop4142" />
         </linearGradient>
         <radialGradient xlink:href="#linearGradient4138"
            id="radialGradient4204" cx="281.83255" cy="153.32645" fx="281.83255" fy="153.32645" r="179.297"
            gradientUnits="userSpaceOnUse" />
      </defs>
      <g id="layer1">
         <rect style="fill:url(#radialGradient4204);stroke:#000000;" id="rect4136" 
               width="357.59399" height="105.05586" x="103.03556" y="100.79851" />
      </g>
   </svg>

Has the following result:

Limitations

• The gradientUnits attribute is not supported
• The gradientTransform attribute is not supported