Open In App

SVG <animate> Element

Last Updated : 16 Jun, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate.

Syntax:

<animate attributeName="" values="" dur="" repeatCount="" />

Attributes:

  • Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
  • Global Attributes: some global attributes used like core attributes and styling attributes, etc.

Below given are a few examples of the above element: 

Example 1: 

html 
<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 50 50">
        <rect width="10" height="10" fill="green">
            <animate attributeName="rx" values="0;20;0"
                dur="2s" repeatCount="10" />
        </rect>
    </svg>
</body>

</html>

Output:

 

Example 2: 

html 
<!DOCTYPE html>
<html>

<body>
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1>  
    <h2> 
        SVG animate element 
    </h2>  
    <svg viewBox="0 0 50 50">
        <rect width="7" height="7" fill="green">
            <animate attributeType="CSS" attributeName="opacity" 
           from="1" to="0" dur="4s" repeatCount="indefinite" />
        </rect>
    </svg>
</body>

</html>

Output:

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

  • Chrome 2 and above
  • Edge 79 and above
  • Firefox 4 and above
  • Safari 4 and above
  • Opera 9 and above
  • Internet Explorer not supported

SVG <animate> Element

T

taran910
Improve
Article Tags :

Explore

Lightbox