SVG Animation in simple way…

SVG stand for the “SCALABLE VECTOR GRAPHICS”

While working on a project i come to know that there are less pages that practically show that how the animation in svg works and also svg animation is so much easy that i have expected so here is the basic understanding of the SVG Animation.

 

Basics of the SVG Animation

SVG graphics can be animated using the animation elements. The predefined elements of the svg animation are as below:

• <animate> – This will allows you to animate scalar attributes and properties(i.e. Transform attribute, Style Attribute).
• <set> – This is a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property.
• <animateMotion> – This will create the animation on the path.
• <animateColor> – This will change the color of the svg on particular time.

There are few more animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec. The SVG extensions include:

• <animateTransform> –  This allows you to animate one of SVG’s transformation attributes over time.
• path (attribute) – This will allows feature from SVG’s path data syntax to be specified in a path attribute to the animateMotion element .
• <mpath> – This is  used in conjunction with the animateMotion element to refer a motion path that is to be used as a path for the motion. The mpath is an element which are included inside the animateMotion element before its closing.
• keypoints (attribute) – This is attribute which are  used for animateMotion to provide precise control of the velocity of motion path animations.
• rotate (attribute) – This is attribute of animateMotion, Used to control whether an object is automatically rotated, so that its x-axis points in the same direction or opposite direction of vector of the motion path.

SVG animation are almost similar to CSS animation and transitions via by their nature. Keyframes are created, things are transformed, colors are change, etc. This all can be done by CSS, But theire are some more things that can’t be done by the CSS and we have to relay on the JavaScript or the SVG Animation.

How to Use the AnimateTransform element for the SVG animation?

if we need to Transform the block of a SVG than this element is used. as we know that we can use this tag at two places inside the block or the outside with its reference. just have a look with the code below,

<animateTransform attributeName="transform" 
attributeType="XML" 
type="rotate" 
from="0 128 128" 
to="360 128 128" 
dur="8s" 
repeatCount="indefinite"/>

Here

• attributeName is the attribute which we wanted to change
• attributeType is XML as we are animating a svg
• type is rotate (this can be different as per the need this can be scale, translate, skewX, skewY)
• from is having the value of the start in the form of “deg x-axis y-axis” (if we need to translate than we need to give the coordinates ‘x-axis y-axis‘ of the start and the end)
• dur is the length of the animation is seconds.
• repeatCount can be a positive number or the indefinite to repeat the animation.
• delay can be used to delay the start of the animation.

here is the working example of it