Radial Gradients

Last updated 25 October 2012

The Problem

The SVG working group (WG) has recently revised the definition of radial gradients in two ways:

  1. A focal circle can be used instead of a focal point.
  2. The center of the focal circle (corresponding to the focal point in SVG 1.1) can be outside the (start) circle. (See: WG minutes.)

These changes were made to better align with HTML5's Canvas. The WG, however, has not reviewed how these changes impact the attribute "spreadMethod".

SVG 1.1

In SVG 1.1, there are three values for "spreadMethod":

A demonstration of the various spreadMethod options.

Figure from SVG 2.0 draft showing from left to right: 'pad', "reflect", and "repeat" for a linear gradient.

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".

SVG 2

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.

A radial gradient using a focal circle.

Figure from SVG 2.0 draft showing a radial gradient with a focal circle and the 'pad' option.

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.

Radial gradients using focal circles.

Examples of padding both the outside and inside of radial graients.

The above procedure should also be applied for the other "spreadMethod" values as shown in the next figures:

Radial gradients using focal circles.

Examples of "spreadMethod" = 'reflect'.

Radial gradients using focal circles.

Examples of "spreadMethod" = 'reflect' when start circle and end circle do not overlap. The start circle is the smaller circle on the right.

Canvas

Canvas only has the equivalent of "spreadMethod" = 'pad'.

Canvas example with end circle inside start circle.

Canvas example with start circle and end circle touching. For SVG, the entire plane outside the end circle would be light green.

Canvas example, with non-overlapping start and end circles. The start circle is the larger circle on the left.

Canvas example, with non-overlapping start and end circles. This is the same as the above example but with start and end circles swapped.

Canvas example, with identical start and end circles. Nothing is painted.