Skip to content
Related Articles

Related Articles

SVG <linearGradient> Element

View Discussion
Improve Article
Save Article
  • Last Updated : 14 May, 2022
View Discussion
Improve Article
Save Article

SVG <linearGradient> Element allows the developer to define linear gradients to apply  SVG elements. It allows a smooth transition from one color to another. This is the most reliable technique. 

Linear gradients can be defined as vertical, angular gradients or horizontal:

  1. Vertical gradients are created when x1 and x2 are equal and y1 and y2 different.
  2. Angular gradients are created when x1 and x2 differ and y1 and y2 are different.
  3. Horizontal gradients are created when y1 and y2 are equal and x1 and x2 different.

Features:

  • Using the default gradient left to right, although that can be changed easily; I’ll show you how in a moment.
  • The stop element handles for gradients are similar to Adobe products and photoshop.
  • The offset positions can be valued from 0 to 1 or as percentages from 0% to 100% It represented the color radiated by the structure.
  • The colors to be used in the gradient can be defined from any of the CSS colors.

Syntax:

 The id attribute of the <linearGradient> tag must be unique for the gradient. 
The x1, x2, y1, and y2 attributes of the <linearGradient> tag will represent the start and end position of the gradient.

<linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%">

A gradient’s color range can be made up of two or more sorts of colors. A stop> tag is used to specify each color. The offset attribute is used to represent from where the gradient color will begin and end.

<stop offset="0%" 
    style="stop-color:rgb(0,255,0);stop-opacity:1"/>

The fill attribute links the ellipse element to the gradient.

<ellipse cx="190" cy="70" 
    rx="85" ry="55" fill="url(#Geek1)"/>

Example 1: Defining an ellipse linear gradient from Green To Blue.

Inside the <linearGradient> tags their are two color stops defined by <stop> elements. The first color stop sets a blue color at an offset of 0% and the second set a green color at an offset of 100%.

HTML




<!DOCTYPE html>
<html>
<svg height="150" width="400">
    <defs>
        <linearGradient id="Geek1" x1="2%" 
            y1="1%" x2="100%" y2="1%">
            <stop offset="0%" style=
                "stop-color:rgb(34, 221, 81);stop-opacity:1" />
            <stop offset="100%" style=
                "stop-color:rgb(11, 22, 172);stop-opacity:1" />
        </linearGradient>
    </defs>
      
    <ellipse cx="200" cy="70" 
        rx="85" ry="55" fill="url(#Geek1)" />
</svg>
  
</html>


Output:

Green To Blue

Example 2: Defining a rectangle linear gradient from Red To Black.

The linear gradient inside the <defs> tags gives the gradient an id of linear. The id is then referenced by the rectangle fill property. 

HTML




<!DOCTYPE html>
<html>
<body>
    <h1>GeeksForGeeks</h1>
    <svg width="600" height="600">
        <defs>
            <linearGradient id="Geek1">
                <stop offset="0%" stop-color="#FF0000"/>
                <stop offset="100%" stop-color="#00FFF00"/>
            </linearGradient>
        </defs>
        <g>
            <text x="30" y="50">GeeksForGeeks: </text>
            <rect x="100" y="100" width="200" height="200" 
                stroke="green" stroke-width="3" 
                fill="url(#Geek1)"/>
        </g>
    </svg>
</body>
</html>


Output:

 

Supported Browsers: The following browsers are supported by this SVG element:

  • Chrome
  • Edge
  • Firefox
  • Internet Explorer
  • Safari
  • Opera

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!