WebReference.com - Scalable Vector Graphics: The Art is in the Code (7/8)

[previous] [next]

SVG: The Art is in the Code

Gradients

One of the most visually appealing facets of SVG comes through its ability to create gradients. A gradient is a smooth transition from one color to the next. In addition, several color transitions can be applied to the element making for some striking effects.

There are two main types of gradients available to SVG. These are:

Linear Gradients
Radial Gradients

Linear Gradients

Linear gradients can be defined as horizontal, vertical or angular gradients. An important concept to remember is that horizontal gradients are created when the y1 and y2 attribute values of the gradient are the same, but the x1 and x2 attribute values differ. A vertical gradient by comparison differs because the x1 and x2 attribute values are the same, but the y1 and y2 values differ. As one may expect an angular gradient is created when both pairs of attribute values differ from each other.

The color range for a gradient can be composed of two colors or alternatively a number of colors. Each color that makes up the gradient's appearance is specified using a <stop> element. The <stop> element has two attributes associated with it: stop-color and stop-opacity. Since SVG allows individual colors to have varying degrees of opacity, some very subtle but striking effects can be achieved. Let's look at an example to familiarize ourselves with the concept:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
	<defs>
	<linearGradient id="violet-orange" x1="0%" y1="0%" x2="100%" y2="0%"
			spreadMethod="pad" gradientUnits="objectBoundingBox">
	<stop offset="0%" style="stop-color:rgb(216,192,216);stop-opacity:1"/>
	<stop offset="100%" style="stop-color:rgb(175,23,87);stop-opacity:1"/>
	</linearGradient>
	</defs>
	<ellipse cx="204" cy="193.5" rx="75" ry="67.5"
		 style="fill:url(#violet-orange);stroke:rgb(74,74,80);stroke-width:1"/>
</svg>

View example 18 in a new window.

A gradient is defined within the <defs> tag by using <linearGradient>. The id attribute allows for the unique identification of the gradient. The x1,x2, y1,y2 define the starting and ending position of the gradient. The spreadMethod attribute has three possible values:

pad: which specifies that terminal colors should be used to fill the gradient.
reflect: specifies that the target region should be filled using the following parameters from start to end and from end to start.
repeat: specifies that the gradient's region should be filled from start to end in a continuous repeating cycle.

The gradientUnits="objectBoundingBox" attribute designated that the gradient should be contained with a bounding box. The other possible value for this attribute, onUserSpace, designates that the gradient should be rendered according to the browser client rather that a box model.

The stop tag is used to define a single color. The offset attribute is used to define where the gradient color begins and ends. For example, changing the 0 value to 80 in the first color would see the first color end at the 80% point along the gradient. We can also create two tone colors with gradients by assigning the first value as being greater than the second value as shown here:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
	<defs>
	<linearGradient id="pink-purple" x1="0%" y1="0%" x2="100%" y2="0%"
			spreadMethod="pad" gradientUnits="objectBoundingBox">
	<stop offset="50%" style="stop-color:rgb(216,192,216);stop-opacity:1"/>
	<stop offset="0%" style="stop-color:rgb(175,23,87);stop-opacity:1"/>
	</linearGradient>
	</defs>
	<ellipse cx="204" cy="193.5" rx="75" ry="67.5"
		 style="fill:url(#pink-purple);stroke:rgb(74,74,80);stroke-width:1"/>
</svg>

View example 19 in a new window.

As we discussed earlier, an element can utilize the xlink method to link back to the linear gradient definition. In this instance, an ellipse, through its style properties, is linked back to the pink-purple gradient definition. As is the case with all SVG elements, style attributes such as opacity can be applied to gradients.

Radial Gradients

The other type of gradient allowed in SVG is the radial gradient. The tag to define a radial gradient is <radialGradient> and like the <linearGradient> tag it also must be nested within the <defs> tag.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<radialGradient id="fade-to-black" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="229.5" cy="200.5" rx="112.5" ry="100.5"  style="fill:url(#fade-to-black)"/>
</svg>

View example 20 in a new window.

The radial gradient uses similar principles to the basic ellipse shape to define the shape of the radii. An easy way to think of the composition of radial gradients is to think of them as being composed of two circles, an outer circle and an inner circle. The cx, cy and r attributes define the outermost circle, while the fx and fy define the innermost circle. The f in fx and fy literally stands for focal point. To better illustrate the two circle concept, let's modify some of the values to produce other gradient effects:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<radialGradient id="fade-to-black" cx="20%" cy="48%" r="50%" fx="50%" fy="50%"
			spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="229.5" cy="200.5" rx="112.5" ry="100.5"
 style="fill:url(#fade-to-black)"/>
</svg>

View example 21 in a new window.

In the above example we modified the cx attribute to be 20% instead of the original 50% to shift the gradient over to one side. In the next example, we build on the previous example and alter the fy attribute to be 10% in order to shift the gradient onto an angle:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<radialGradient id="fade-to-black" cx="20%" cy="48%" r="50%" fx="50%" fy="10%"
			spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="229.5" cy="200.5" rx="112.5" ry="100.5"  style="fill:url(#fade-to-black)"/>
</svg>

View example 22 in a new window.

Have a good play with the cx, cy, r, fx and fy attributes to gain a sophisticated understanding of the possibilities here. Other than those attributes, a radial gradient's properties work in exactly the same fashion as a linear gradient.

[previous] [next]

Created: November 21, 2001
Revised: November 21, 2001

URL: https://webreference.com/authoring/languages/svg/intro/7.html

WebReference.com - Scalable Vector Graphics: The Art is in the Code (7/8)

SVG: The Art is in the Code

Gradients

Linear Gradients

Radial Gradients

Find a programming school near you