Chapter 7 in the book provides an introduction into some of the many useful elements in SVG. Included is a discussion of the two gradients, linearGradient and radialGradient. They can’t be used to create a visual element by themselves, but are, instead, used to fill any shape that takes the fill attribute. For instance, one of the book examples defines four radialGradients, which are then used to fill four different circles. The last two circles in the example demonstrate how the radialGradient can be used to provide spherical highlights, especially when using a monochromatic color scheme, as shown in the fourth circle.
The following is the radialGradient definition used to fill the fourth circle in the example:
<radialGradient id="gradient4" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
<stop stop-color="white" offset="0%" />
<stop stop-color="#666" offset="50%" />
<stop stop-color="black" offset="100%" />
</radialGradient>
The stop elements are used to define the colors for the gradient, in this case white from 0 to 50%, and then gray from 50% to 100% black. SVG user agents, like the browser you’re using (which, hopefully, supports SVG), derive the radialGradient from these stops in combination with the other radialGradient attributes. From the example given, these attributes are:
- cx and cy define the size of the radialGradient’s outer circle and are equal to the 100% stop value
- r is the length (size) of the gradient circle
- fx and fy are the focal point for the gradient, equal to the 0% stop value
In the example, the focal point of the radial gradient is set to 30% along both x and y axis, which places it in the upper-left. If both were set to 50%, then the focal point would be in the exact center of the gradient.
An attribute that was not given explicitly in the previous examples was the spreadMethod, which provides instruction in how to fill the shape when the radialGradient is smaller than the containing element. The possible values are: pad, spread, and repeat, with pad being the default.
In the >third example, three circles are filled with three different radialGradients. The cx and cy values are 30%, the fx and fy values are 20%, the length is 50%. All that differs between the circles is spreadMethod, which is, from left circle to right: reflect, repeat, and pad. The reflect value causes the gradient to repeat, from the outside in; the repeat value repeats the pattern literally, which can lead to rather abrupt transitions; the last option, pad, fills in the remaining area of the circle with the color given for the 100% stop.
When creating radialGradients, you’re not restricted to three stops or different saturations of the same color. The following SVG example has a radialGradient that uses 6 different stops, with six different colors, creating a nice neon light effect. The radialGradient is then used to fill a rectangle, rather than a circle.
Four issues with the radialGradient, all specific to browsers. I’ve found that the reflect spreadMethod can cause minor havoc with the Firefox 3.x browser in the Mac, pushing down the size of the area, without necessarily impacting on the visual rendering. This makes it a bit tricky to define a view port, or include the SVG using the object element. Opera 9.5b has some rendering delays when using gradients, and Safari/Webkit doesn’t respect the object’s transparent background. You’ll also need to use a SVG plug-in with Internet Explorer. I’ll have more on the issues of browser SVG support in a follow up writing, which I’ll link here when finished.
To see radialGradient in action, check out the following from Open Clip Art:
Dave Pena’s Sakura, which uses opacity and the radialGradient to create the soft hues and gradual coloration. This image was pulled from the downloadable archives.
A wonderful workstation by Kobo. Notice the hard “light streak” across the monitors? I discuss this use of a light streak to provide an impression of a hard, shiny plastic surface in the book.
A tasty cake from Jean Victor Balin.
Zipped files of all the book examples can be downloaded from the O’Reilly book support site.