pelicin › web › SVG

Gradient

You can apply gradients as fills or strokes.

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>
| LIVE PREVIEW

<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>
| LIVE PREVIEW

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