Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<defs>

<!-- Linear - horizontal gradient -->
<linearGradient id="horiz_linear" x1="0%" y1="0%" x2="100%" y2="0%" >
<stop offset="0%" style="stop-color:yellow" />
<stop offset="100%" style="stop-color:green" />
</linearGradient>

<!-- Linear - vertical gradients -->
<linearGradient id="vert_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" style="stop-color:red" />
<stop offset="100%" style="stop-color:yellow" />
</linearGradient>

<!-- Radial - a centered circular gradient -->
<radialGradient id="radial1" cx="50%" cy="50%" r="50%" >
<stop offset="5%" style="stop-color: pink" />
<stop offset="100%" style="stop-color: blue" />
</radialGradient>

<!-- Radial - with adjusted focal point using the fx and fy attributes -->
<radialGradient id="radial2" fx="35%" fy="20%">
<stop offset="5%" stop-color="white" />
<stop offset="40%" stop-color="#ffb0b0" />
<stop offset="90%" stop-color="#ff8080" />
</radialGradient>

</defs>

<rect x="10" y="10" width="120" height="80" style="fill:url(#horiz_linear)"/>
<rect x="10" y="100" width="120" height="80" style="fill:url(#vert_linear)"/>
<circle cx="70" cy="230" r="40" style="fill:url(#radial1)" />
<circle cx="70" cy="330" r="40" style="fill:url(#radial2)" />

</svg>

Linear gradient - is assumed to start at the left edge of the area to be filled and end at the right edge. This vector can be changed using the x1, y1, x2, and y2 attributes. Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ. Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ. Angular gradients are created when x1 and x2 differ and y1 and y2 differ.

Radial gradient - is based on a circle, the center and radius of the outer circle (at which the gradient vector ends) can be adjusted using the cx, cy and r attributes. The focal point (at which the gradient vector starts) can be adjusted using the fx and fy attributes.

Element <stop> - allows to indicate the colors that they constitute the ends of the gradient.

Each <stop> element has two important components: an offset attribute and a stop-color style rule. The offset attribute determines the point on the gradient line at which a color is defined. This value is in relation to the start and stop points defined previously.

When the gradient goes through the whole object (like the first example), from 0 to 100%. The offset for the yellow color is on 0% and for the green color on 100%.

Often, the offset attribute is listed as a percentage, although pixel values are also accepted.