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