SVG <stop> Element

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:

html

<!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:

html

<!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:

html

<!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:

html

<!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:

Explore