SVG Gradient - Radioactive

SVG radioactive gradual - <radialGradient>

<RadialGradient> element is used to define the radial gradient.

<RadialGradient> tag must be nested inside <defs> interior. <Defs> tag is the acronym definitions, such as special elements that can be defined like gradient.

Example 1

Define a radial gradient from white to blue oval:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• id attribute <radialGradient> tag can be a unique name for the gradient definition
• CX, CY, and r attribute defines the outermost circle and Fx and Fy define the innermost circle
• Gradient color range may be composed of two or more colors. Each color is specified using a <stop> tag. offset is used to define the start and end of the gradient
• Fill property element to link to the gradient of the ellipse

Example 2

Defined radial gradient from white to blue oval another:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).