Define color gradients

The <defs> element acts as a definition or container element. In this element other elements are defined which are reused within the SVGs, e.g. color gradients. Each element within the <defs> element is assigned an id attribute so that it can be referenced by other elements in the SVG.

<defs>
  <linearGradient id="MyGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop stop-color="#FFFFFF" />
    <stop stop-color="#FF0000" />
    <stop stop-color="#000000" />
  </linearGradient>
  <linearGradient id="MyGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0.0" stop-color="#FFFFFF" />
    <stop offset="0.2" stop-color="#EDEDED" />
    <stop offset="0.8" stop-color="#DADADA" />
    <stop offset="1.0" stop-color="#B3B3B3" />
  </linearGradient>
</defs>

To apply a gradient to an element, use the fill attribute on the respective element and reference the corresponding gradient by its identifier, e.g. fill="url(#MyGradient1)".

<rect x="0" y="0" width="100" height="100" fill="url(#MyGradient1)" />

• Linear gradient

• Radial gradient