Animation in SVG requires specific instructions. Use the SVG Animation Attributes Glossary to identify and define common properties. Animation is about motion. In order to create that motion, the browser needs the details on what, when and where for your action. This is done with attributes. 

Target Attributes

The target attributes point the parser to the item involved in the animation.

attributeName—identifies the property for the animation such as fill, radius or an axis


attributeType—points to a namespace location for the attribute. The choices for type are XML or CSS

Control Attributes

Control attributes manage the specs of the animation. For example, you use a control attribute to determine the timing of the action.

• begin—start the animation
• dur—defines how long the animation will last
• end—ends the animation
• restart—sets parameters for restarting—choose always, whenNotactive or never
• repeatCount—defines the number of times the animation runs
• repeatDur—defines the duration of the repeated action
• fill—action the element takes after the animation i.e. remove or freeze
• min—sets a minimum for the animation
• max—sets a maximum for the animation
• from—sets a starting value for the animation such as size or coordinate
• to—specifies an ending value for the animation
• values—these are key points separated by semi-colons such as coordinates