SVG Linear

SVG Linear Gradients

Understanding SVG Gradients

Gradients create smooth color transitions. SVG supports two main types of gradients:

• Linear Gradients (<linearGradient>): Colors transition along a straight line.
• Radial Gradients (<radialGradient>): Colors transition radially from a central point.

This chapter focuses on linear gradients.

The Element

The <linearGradient> element defines a linear gradient. It must be placed within a <defs> (definitions) section. The <defs> element hosts reusable SVG definitions.

Linear gradients are defined by a vector (x1, y1) to (x2, y2).

• Horizontal gradient: y1 equals y2; x1 differs from x2.
• Vertical gradient: x1 equals x2; y1 differs from y2.
• Angular gradient: Both x1, x2 and y1, y2 differ.

The gradientUnits attribute (userSpaceOnUse or objectBoundingBox) determines if gradient coordinates are absolute or relative to the object’s bounding box (default).

Example 1: Horizontal Linear Gradient

Applying a horizontal gradient (yellow to red) to an ellipse:

An ellipse filled with a horizontal gradient transitioning from yellow on the left to red on the right.

SVG Code:

<svg width="400" height="150">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:yellow; stop-opacity:1;" />
      <stop offset="100%" style="stop-color:red; stop-opacity:1;" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Code Explanation:

• <linearGradient id="grad1">: Defines the gradient with a unique ID.
• x1, y1, x2, y2: Define the gradient vector. Here, 0% to 100% horizontally.
• <stop> elements: Define color stops along the gradient.
• offset: Position of the color stop (0% to 100% or 0 to 1).
• style="stop-color:color; stop-opacity:value;": Sets the color and opacity for the stop.
• fill="url(#grad1)": Applies the gradient to the ellipse’s fill.

Example 2: Vertical Linear Gradient

Applying a vertical gradient (yellow to red) to an ellipse:

An ellipse filled with a vertical gradient transitioning from yellow at the top to red at the bottom.

SVG Code:

<svg width="400" height="150">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:yellow; stop-opacity:1;" />
      <stop offset="100%" style="stop-color:red; stop-opacity:1;" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Note: The only change from Example 1 is in the <linearGradient>: x2 is 0% and y2 is 100%, creating a vertical path.

Example 3: Gradient with Text

An ellipse with a horizontal gradient and text overlaid:

An ellipse with a yellow-to-red horizontal gradient, with the white text “SVG” centered on it.

SVG Code:

<svg width="400" height="150">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:yellow; stop-opacity:1;" />
      <stop offset="100%" style="stop-color:red; stop-opacity:1;" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text x="155" y="86" fill="#ffffff" font-family="Verdana, sans-serif" font-size="45">
    SVG
  </text>
</svg>

Code Explanation:

• The <text> element is added after the ellipse. SVG elements are rendered in the order they appear in the document.
• The text is styled with fill, font-family, and font-size.

Practical Applications:

Linear gradients are widely used for backgrounds, buttons, chart bars, progress indicators, and to add depth or visual interest to any SVG element. You can use more than two stops for multi-color gradients.

For more complex gradient transformations or spread methods, refer to the SVG specification on MDN Web Docs.