SVG Radial Gradient

SVG gradients must be defined within the <defs> tag.

Radial gradient

The <radialGradient> tag is used to define a radial gradient.

The <radialGradient> tag must be nested within the <defs> tag. The <defs> tag is an abbreviation for definitions and allows for the definition of special elements such as gradients.

Please copy the following code into a text editor, then save the file as "radial1.svg". Place this file in your web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100">
style="fill:url(#grey_blue)"/>
</svg>

Code explanation:

The id attribute of the <radialGradient> tag can define a unique name for the gradient, the fill:url(#grey_blue) attribute links the ellipse element to this gradient, the cx, cy, and r attributes define the outer circle, while fx and fy define the inner circle The gradient color range can be composed of two or more colors. Each color is defined by a <stop> tag. The offset attribute is used to define the start and end positions of the gradient.

View Example

Another example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100">
style="fill:url(#grey_blue)"/>
</svg>

View Example