SVG stands for  Scalable Vector Graphic.

SVG is used to define vector-based graphics for the web in XML format. A SVG component is an exceptional sort of DOM component that emulates the language structure of a standard HTML component. SVG components have one of a kind labels, characteristics, and practices that permit them to characterize discretionary shapes - basically giving the capacity to make a picture straightforwardly inside the DOM, and in this way profit by the JavaScript-and CSS-based control that DOM components can be subjected to.

Animation is done by manipulating the attributes of shapes over time. There are 5 SVG animation element:-

• <set>
• <animate>
• <animateColor>
• <animateTransform>
• <animateMotion>

1. <set>:-

The set component is the most straightforward of the SVG movement components. It basically sets a credit to a specific worth after a particular time interim has passed. In that capacity, the shape is not consistently quickening, but rather just changes trait esteem once.

e.g of <set> element-

<circle cx="50" cy="50" r="35" style="blue; fill: yellow;">
    <set attributeName="r" attributeType="XML"
         to="100"
         begin="0s"  />

</circle>

2. <animate>:-

The animate component is utilized to invigorate a trait of a SVG shape. You settle the animate component inside the shape you need it connected to.

Here is a example:

<circle cx="50" cy="50" r="25" style="blue; fill: yellow;">
    <animate attributeName="cx" attributeType="XML"
             from="30"  to="470"
             begin="0s" dur="8s"
             fill="remove" repeatCount="indefinite"/>

</circle>

In the above example the animation will start from 0s and animation duration will be 5s. After the animation is finished the animated element will be set into its starting position.

3. <animateColor>:-

The <animateColor> element allows you to change the color of an SVG element or element group over time.

Here is the e.g of <animateColor>:-

<circle cx="60" cy="60" r="50">
        <animateColor attributeName="fill" 
                      attributeType="XML"
                      from="red"
                      to="yellow"
                      dur="5s"
                      repeatCount="indefinite"/>
    </circle>

4. <animateTransform>:-

The <animateTransform> element is used to transform the attribute of a shape.

e.g of <animateTransform> element:-

<rect x="20" y="20" width="100" height="40"
    style="stroke: #ff00ff; fill:none;" >
  <animateTransform attributeName="transform"
                    type="rotate"
                    from="0 100 100" to="360 100 100"
                    begin="0s" dur="10s"
                    repeatCount="indefinite"
          />
</rect>

5. <animateMotion>:-

The <animateMotion> component can animate the movement of a shape along a way. It can also move the shape to match the pitch of the path, like a car driving up and down hill.

Here is the example of <animateMotion>:-

 <rect x="0" y="0" width="30" height="15"
        style="stroke: #ff0000; fill: none;">
      <animateMotion
              path="M10,50 q60,50 100,0 q60,-50 100,0"
              begin="0s" dur="10s" repeatCount="indefinite"
              />
  </rect>