SVGBasics

The last circle on the previous page is actually filled by a gradient. Gradients and Patterns are called "Paint Servers" in SVG. Colours are also called "Paint Servers." This probably doesn't matter to you.
The way to make a gradient in SVG is with either a linearGradient or radialGradient element. I'll call both of these gradient elements. The gradient element needs to contain colours to stop at along with the positions that these colours should show up in. Between the stop colours, the colour of the gradient will change from the colour at one stop to the colour at the other stop. Outside the bounds of the first and last stop, the behaviour of the gradient is defined by the spreadMethod attribute of the gradient element. The default value is "pad" which keeps the colour of the nearest stop. The values "reflect" and "repeat" allow you to make an infinite triangle wave or sawtooth wave (respectively).
The easiest way to understand mapping a linear gradient is to think of a graphics program where you've used a two colour linear gradient fill. Generally, you draw a line and the gradient starts where you started drawing and ends where you finished drawing. Getting into the nitty-gritty parts, I'm saying that the point you clicked to start gets coloured with the first colour of the gradient. The point where your line ends gets the second colour. In between the two points there are stripes of all the blends of the two end colours (like the shades of pink if one end is white and the other is red). All the "stripes" will be perpendicular to the line you drew.
A linearGradient is located with the points (x1,y1) and (x2,y2). These can be given as percentages or coordinates. I recommend percentages. This automatically scales the shape you're filling to the range 0 to 100 on both the x and y axes. Using a percentage for the offset values in your stops makes that part simple as well. The length of the line is scaled that way from 0 (the start of the gradient) to 100 (the end). The math just goes to sin at that point. Here's an easy example:

Gradient Example

Suppose I have a box that's 50x50 with a top left corner at 25,25. I want a gradient fill to make diagonal stripes on my box from corner to corner. I could specify my gradient as going from 25,25 to 75,75. Now suppose I shrink the box a little. My gradient will get messed up. Instead I could just specify my gradient as going from (0%,0%) to (100%,100%).

Adding a third colour in the middle doesn't take a lot of thinking when using percentages for coordinates.