Last updated 25 October 2012
The SVG working group (WG) has recently revised the definition of radial gradients in two ways:
These changes were made to better align with HTML5's Canvas. The WG, however, has not reviewed how these changes impact the attribute "spreadMethod".
In SVG 1.1, there are three values for "spreadMethod":
Consider for the moment the 'pad' option in the above figure. For a linear gradient it can be seen that the colors of the first and last gradient stops are continued to the right and left of the gradient. For a radial gradient only the color of the last stop is continued outside of the gradient area as SVG 1.1 radial gradients are "one-sided".
With the introduction of a focal circle in SVG 2, radial gradients now can have an inside as well as an outside. A previous figure in the SVG 2 draft shows that a radial gradient is only padded on the outside (see figure below). This is not consistent with how linear gradient padding is done in SVG nor radial gradients in Canvas (see below). I've just changed this for reasons discussed below.
The new SVG 2 radial gradient also allows the focal circle to be bigger than the normal circle of SVG 1.1 ('fr' > 'r'). The specification now uses the term start circle for the "focal" circle and the term end circle for the circle of SVG 1.1 (start and end are relative to the order in which circles which make up the gradient are painted). To be consistent between linear and radial gradients (and Canvas), the inside of a radial gradient should also be padded with the color of the first gradient stop.
The above procedure should also be applied for the other "spreadMethod" values as shown in the next figures:
Canvas only has the equivalent of "spreadMethod" = 'pad'.