Skip to content
Related Articles

Related Articles

Improve Article
SVG <stop> Element
  • Last Updated : 05 Nov, 2020

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a defined value within the gradient element. This value tells the color and position to be used within the parent element.

Syntax:

<stop offset="" stop-color="" stop-opacity="" />

Attributes:

  • offset: It tells the distance where the gradient stop is positioned along the gradient vector.
  • stop-color: It tells color to be used at the stop point.
  • stop-opacity: It tells the alpha value or opacity to be used at the stop point. Default value is 1.

Example 1:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="300" height="300" 
        viewBox="0 0 100 100">
          
        <defs>
            <radialGradient id="gradient">
                <stop offset="20%" 
                    stop-color="gold" 
                    stop-opacity="0.5" />
  
                <stop offset="90%" 
                    stop-color="rgb(0, 0, 100)" 
                    stop-opacity="0.5" />
  
                <stop offset="70%" 
                    stop-color="rgb(100, 200, 0)" 
                    stop-opacity="0.7" />
            </radialGradient>
        </defs>
  
        <rect x="0" y="0" width="100%" 
            height="100%" fill="url(#gradient)" 
            style=" stroke: black;" />
  
        <rect x="15" y="15" width="70%" 
            height="70%" fill="url(#gradient)" />
  
        <text fill="Green" font-size="6" 
            font-family="Verdana" x="27" 
            y="52">GeeksForGeeks</text>
    </svg>
</body>
  
</html>

Output:



Example 2:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="300" height="300" 
        viewBox="0 0 100 100">
          
        <defs>
            <radialGradient id="gradient">
                <stop offset="10%" 
                    stop-color="red" 
                    stop-opacity="0.4" />
  
                <stop offset="50%" 
                    stop-color="gold" 
                    stop-opacity="0.7" />
                  
                <stop offset="100%" 
                    stop-color="shadow" 
                    stop-opacity="0.7" />
            </radialGradient>
        </defs>
  
        <rect x="0" y="0" width="100%" 
            height="100%" fill="url(#gradient)" 
            style=" stroke: black;" />
  
        <rect x="15" y="15" width="70%" 
            height="70%" fill="url(#gradient)" />
    </svg>
</body>
  
</html>

Output:

Example 3:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="300" height="300" 
        viewBox="0 0 100 100">
          
        <defs>
            <radialGradient id="gradient">
                <stop offset="10%" 
                    stop-color="gold" 
                    stop-opacity="0.2" />
  
                <stop offset="50%" 
                    stop-color="red" 
                    stop-opacity="0.3" />
                  
                <stop offset="0%" 
                    stop-color="shadow" 
                    stop-opacity="0.4" />
                  
                <stop offset="100%" 
                    stop-color="rgb(0, 300, 100)" 
                    stop-opacity="0.7" />
                  
                <stop offset="10%" 
                    stop-color="rgb(0, 300, 0)" 
                    stop-opacity="0.7" />
            </radialGradient>
        </defs>
  
        <rect x="0" y="0" width="100%" 
            height="100%" fill="url(#gradient)" 
            style=" stroke: black;" />
  
        <rect x="15" y="15" width="70%" 
            height="70%" fill="url(#gradient)" />
    </svg>
</body>
  
</html>

Output:

Example 4:




<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200">
        <defs>
            <linearGradient id="gradient">
                <stop offset="10%" 
                    stop-color="rgb(20, 200, 0)" 
                    stop-opacity="0.4" />
  
                <stop offset="95%" 
                    stop-color="rgb(200, 200, 0)" 
                    stop-opacity="0.4" />
            </linearGradient>
        </defs>
  
        <rect x="0" y="0" width="100%" 
            height="100%" fill="url(#gradient)" 
            style=" stroke: black;" />
  
        <rect x="30" y="30" width="70%" 
            height="70%" fill="url(#gradient)" />
  
        <text fill="Green" font-size="20" 
            font-family="Verdana" x="23" y="100">
            GeeksForGeeks
        </text>
    </svg>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :