SVG radialGradient: Defining Color Spreads

The SVG <radialGradient> element defines circular and elliptical color transitions by radiating color stops outward from a central point to an outer perimeter. It allows developers to create depth, lighting effects, and textured backgrounds in vector graphics by controlling geometric boundaries, focal origins, coordinate mapping systems, and color distribution stops.

Core Geometry Attributes

A standard radial gradient is defined by an outer circle using three primary attributes:

• cx and cy: Define the center point of the outer boundary circle. By default, both values are set to 50%.
• r: Defines the radius of the gradient’s ending circle. The default value is 50%.

The gradient spreads colors smoothly from the starting point outward until it reaches the edge defined by the radius r.

Setting the Focal Point

While cx and cy define the outer boundary, the SVG specification allows the origin of the color spread to be shifted independently using focal coordinates:

• fx and fy: Define the focal point where the 0% color stop originates. If omitted, they default to the values of cx and cy.
• fr: Defines the focal radius, which is the starting radius of the inner circle (defaults to 0%).

Moving fx and fy away from cx and cy creates an asymmetrical lighting or 3D spherical effect, directing the perceived light source toward the focal coordinate.

Defining Circular vs. Elliptical Spreads

The <radialGradient> element inherently defines a circular transition, but its rendered shape depends on the coordinate system:

1. Object Bounding Box (gradientUnits="objectBoundingBox"): This is the default setting. The percentages are mapped relative to the bounding box of the target shape. If applied to a non-square rectangle, the gradient naturally stretches to match the aspect ratio, forming an ellipse.
2. User Space Coordinates (gradientUnits="userSpaceOnUse"): Coordinates are mapped to the absolute SVG viewport coordinate system. In this mode, the gradient remains a true geometric circle regardless of the target shape’s dimensions.
3. Using gradientTransform: To create a precise elliptical spread in any coordinate system, the gradientTransform attribute can apply scale, skew, or rotate transformations directly to the gradient definition.

Defining Color Transitions with Stops

Color distribution along the gradient radius is controlled by child <stop> elements:

• offset: Determines where the color is placed along the radius, defined as a percentage (0% to 100%) or a float (0 to 1.0).
• stop-color: Defines the base color at that specific offset.
• stop-opacity: Controls the alpha transparency at the specified point.

The rendering engine interpolates colors linearly along the distance vector from the focal circle (fx, fy, fr) to the outer boundary circle (cx, cy, r).

Handling Overflow with Spread Methods

When the gradient does not fill the entire target geometry, the spreadMethod attribute determines how the area outside the boundary circle is rendered:

• pad (default): Extends the first and last color stops to fill the remaining area.
• reflect: Mirrors the gradient pattern continuously from 100% back to 0%, then 0% to 100%.
• repeat: Restarts the gradient pattern from 0% repeatedly until the shape is filled.