SVG Linear Gradients

Posted in SVG Tutorial

Updated on Oct 13, 2024

By Mari Selvan

210 - Views

4 mins

1 Comment

Photo Credit to CodeToFun

Introduction

SVG (Scalable Vector Graphics) provides a powerful way to create vector graphics for the web. One of the advanced features in SVG is the ability to apply linear gradients to shapes. Linear gradients create a smooth transition between two or more colors along a straight line, adding depth and dimension to your graphics.

In this guide, we will explore how to create and use SVG linear gradients.

Syntax

To define a linear gradient in SVG, you use the <linearGradient> element within a <defs> block, followed by the <stop> elements to specify the gradient colors. The gradient is then applied to an SVG shape using the fill attribute. Here's the basic structure:

Syntax

Copied

<svg>
  <defs>
    <linearGradient id="gradientID" x1="start-x" y1="start-y" x2="end-x" y2="end-y">
      <stop offset="percentage" stop-color="color" />
      <!-- Add more <stop> elements as needed -->
    </linearGradient>
  </defs>
  <shape fill="url(#gradientID)" />
</svg>

Attributes

id: A unique identifier for the gradient.
x1, y1: Coordinates for the starting point of the gradient (usually 0%).
x2, y2: Coordinates for the ending point of the gradient (usually 100%).
offset: Specifies where the gradient stop is placed, typically a percentage (e.g., "0%", "50%", "100%").
stop-color: The color at the gradient stop.

Example

Let's create an SVG rectangle filled with a linear gradient:

index.html

Copied

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#grad1)" />
</svg>

How it works?

In this example, we define a linear gradient that transitions from yellow to red horizontally. The gradient is then applied to a rectangle that fills the entire SVG canvas.

Conclusion

SVG linear gradients enhance the visual appeal of your graphics by allowing smooth color transitions. They are easy to implement and highly customizable, making them a valuable tool for web designers and developers.

By mastering linear gradients, you can add a professional touch to your SVG artwork.