SVG <discard> Element

Last Updated : 14 May, 2022

The <discard> SVG element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents.

Implementation:

The width and height represent the area of the canvas in which the animation will occur.

<svg width="1000" height="1000">

cx represents the X-axis, cy represents Y-axis, r represents the color, and fill represents the color inside the circle.

<circle id="circle2" cx="100" cy="300"  r="190" fill="green"

The begin attribute defines when an animation should begin or when an element should be discarded.

The <discard> element may occur wherever the <animate> element may. Allows developers to specify the time at which particular elements are to be discarded.

The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

The SVG <animateMotion> element provides a way to define how an element moves along a motion path.

Example 1: Rotating Circle at one point.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>GeeksForGeeks-Discard</title> 
</head> 
<body> 
    <svg width="800" height="600"> 
        <circle id="circle2" cx="400" cy="300" r="100" 
            fill="none" stroke="green" stroke-width="70"
            stroke-dasharray="15 15"> 
            <animateTransform attributeName="transform" 
                type="rotate" begin="1s" dur="10s" 
                from="0 400 300"
                to="-720 400 300"/> 
            <discard begin="2s"/> 
        </circle> 
    </svg> 
</body> 
</html>

Output:

Example 2: Rotation in Filled circle all around the canvas.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>GeeksForGeeks-Discard</title> 
</head> 
<body> 
    <svg width="1000" height="1000"> 
        <circle id="circle2" cx="100" cy="300" r="190" 
            fill="green" stroke="green" stroke-width="70"
            stroke-dasharray="3 3"> 
            <animateTransform attributeName="transform" 
                type="rotate" begin="1s" dur="10s" 
                from="0 400 300"
                to="-720 400 300"/> 
            <discard begin="5s"/> 
        </circle> 
    </svg> 
</body> 
</html>