Gradient

There are two types of gradient in SVG: linear and radial gradient.

You would declare gradients inside the <defs> element, and you must give the gradient an id attribute so you can reference it.

Gradient SVG attributes

gradientUnits

Defines the coordinate system for the gradient. Specify either:

• objectBoundingBox — uses the size of the object that references the gradient (the coordinate values will range from 0 to 1).
• userSpaceOnUse — uses the viewport coordinates (you need to know where the object is and place the gradient coordinates accordingly).

Gradient SVG elements

<linearGradient>

• x1 — start x coordinate (default is 0%)
• y1 — start y coordinate (default is 100%)
• x2 — end x coordinate (default is 0%)
• y2 — end y coordinate (default is 0%)
• href — reference to another <linearGradient> that will be used as a template
• gradientUnits — defines the coordinate system for attributes x1, y1, x2, y2: specify userSpaceOnUse (use the viewport coordinate) or objectBoundingBox (use the bounding box of the element that references this gradient)
• spreadMethod — defines how the shape is filled beyond the defined edges of the gradient; specify pad (just use the edge color, default), reflect, or repeat
• gradientTransform — space-separated CSS transform functions, e.g. skewX(20) translate(-35, 0)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- gradient definition -->
  <defs>
    <linearGradient id="gradient1">
      <stop offset="10%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <!-- test rectangle -->
  <rect x="10" y="10" width="80" height="80" rx="10" fill="url(#gradient1)" />
</svg>

<radialGradient>

• cx — x coordinate of the end circle's center (default is 50%)
• cy — y coordinate of the end circle's center (default is 50%)
• r — radius of the end circle (default is 50%)
• fx — x coordinate of the start circle's center (default is the same as cx)
• fy — y coordinate of the start circle's center (default is the same as cy)
• fr — radius of the start circle (default is 0%)
• href — reference to another <linearGradient> that will be used as a template
• gradientUnits — defines the coordinate system for attributes cx, cy, r, fx, fy, fr: specify userSpaceOnUse (use the viewport coordinate) or objectBoundingBox (use the bounding box of the element that references this gradient)
• spreadMethod — defines how the shape is filled beyond the defined edges of the gradient; specify pad (just use the edge color, default), reflect, or repeat
• gradientTransform — space-separated CSS transform functions, e.g. skewX(20) translate(-35, 0)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- gradient definition -->
  <defs>
    <radialGradient fx="50%" fy="10%" spreadMethod="repeat" id="gradient2">
      <stop offset="0%"  stop-color="aqua" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <!-- test rectangle -->
  <rect x="10" y="10" width="80" height="80" rx="10" fill="url(#gradient2)" />
</svg>

Stop SVG element

<stop>

Represents a color stop in a gradient vector.

• offset — where the stop is; specify a number like 0.5 or 50%
• stop-color — color of the stop, e.g. #ff0000
• stop-opacity — opacity of the stop, e.g. 1

References

• Gradients in SVG (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients
• <linearGradient> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
• <radialGradient> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient
• gradientUnits (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits
• spreadMethod (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/spreadMethod
• gradientTransform (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientTransform
• <stop> (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop