SVG Gradients

Gradients are used to fill or stroke shapes and text with smooth color transitions along a vector from one color to another. Gradients in SVG are defined within <defs> element and then referenced with URI. There are two types of gradients:

  • linear
  • radial

Linear gradients

A linear gradient is a transition of colours along a straight line. Linear gradients are defined by <linearGradient> element. The <linearGradient> element has the following attributes:

  • id attribute set a unique ID used to reference the gradient.
  • x1, y1, x2, y2 attributes define a gradient vector for the linear gradient. The default value is 0% for x1, y1, y2 attributes, 100% for x2 attribute.
  • gradientUnits attribute has 2 values:
    • objectBoundingBox (default) is set when the user coordinate system for attributes x1, y1, x2, y2 is established using the bounding box of the element to which the gradient is applied.
    • userSpaceOnUse is set when the user coordinate system for attributes x1, y1, x2, y2 is established using the viewbox
  • gradientTransform attribute contains the information about the transformations made to a gradiemt before it is applied.
  • spreadMethod attribute defines how the gradient is spread through the shape. The spreadMethod has the following values:
    • pad (default) - terminal colors of the gradient are used to fill the remainder of the target region
    • reflect - the gradient pattern is reflected start-to-end, end-to-start, start-to-end, etc. until the target region is filled.
    • repeat - the gradient pattern is repeated start-to-end, start-to-end, etc. until the target region is filled.
  • xlink:href attribute references to another gradient from which attributes are inherited.

The colour and opacity of a gradient is set withis the <stop> element. The <stop> element is a child element to either the <linearGradient> element or the <radialGradient> element and it has the following attributes:

  • offset attribute indicates where the gradient stop is placed. Can be either a number or a percentage.
  • stop-color attribute sets the colour to be used at a gradient stop.
  • stop-opacity attribute sets the opacity of a given gradient stop.

Here is a simple example:

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	  <defs>
		  <linearGradient id="Gradient1">
			  <stop offset="0%" stop-color="yellow"/>
			  <stop offset="20%" stop-color="green"/>
			  <stop offset="40%" stop-color="red"/>
			  <stop offset="60%" stop-color="blue"/>
			  <stop offset="100%" stop-color="orange"/>
		  </linearGradient>
	  </defs>
	  <rect x="0" y="0" width="100" height="50" fill="url(#Gradient1)" stroke="blue" stroke-width="2"/>
  </svg>							
							

Here is the resulting image filled with the gradient:

Radial gradients

A radial gradient is a gradient where the colour transition occurs along a circular path. Rradial gradients are defined by a radialGradient element. The radialGradient element has the following attributes:

  • id attribute set a unique ID used to reference the gradient.
  • cx, cy, r attributes define the largest (outermost) circle for the radial gradient. The default value is 50%.
  • fx, fy define the focal point for the radial gradient.
  • gradientUnits attribute has 2 values:
    • objectBoundingBox (default) is set when the user coordinate system for attributes cx, cy, r, fx, fy is established using the bounding box of the element to which the gradient is applied.
    • userSpaceOnUse is set when the user coordinate system for attributes cx, cy, r, fx, fy is established using the viewbox
  • gradientTransform attribute contains the information about the transformations made to a gradiemt before it is applied.
  • spreadMethod attribute defines how the gradient is spread through the shape. The spreadMethod has the following values:
    • pad (default) - terminal colors of the gradient are used to fill the remainder of the target region
    • reflect - the gradient pattern is reflected start-to-end, end-to-start, start-to-end, etc. until the target region is filled.
    • repeat - the gradient pattern is repeated start-to-end, start-to-end, etc. until the target region is filled.
  • xlink:href attribute references to another gradient from which attributes are inherited.

Here is a simple example:

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	  <defs>
		  <radialGradient id="Gradient1">
			  <stop offset="10%" stop-color="yellow"/>
			  <stop offset="50%" stop-color="green"/>
			  <stop offset="80%" stop-color="orange"/>
		  </radialGradient>
	  </defs>
	  <rect x="0" y="0" width="100" height="50" fill="url(#Gradient1)" stroke="blue" stroke-width="2"/>
  </svg>							
							

Here is the resulting image: