We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The  animate SVG element is used to animate an attribute or property of an element over time.
It's normally inserted inside the element or referenced by the xlink:href attribute of the target element.

Usage context

CategoriesAnimation element
Permitted contentAny number of the following elements, in any order:
Descriptive elements

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGAnimateElement interface.

Example

SVG

<?xml version="1.0"?>
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

Result

Specifications

Specification Status Comment
SVG Animations Level 2
The definition of '<animate>' in that specification.
Editor's Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<animate>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support2 ?4 No94
attributeName ? ? ? ? ? ?
attributeType ? ? ? ? ? ?
to ? ? ? ? ? ?
from ? ? ? ? ? ?
dur ? ? ? ? ? ?
repeatCount ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ?2 ?49.54 ?
attributeName ? ? ? ? ? ? ?
attributeType ? ? ? ? ? ? ?
to ? ? ? ? ? ? ?
from ? ? ? ? ? ? ?
dur ? ? ? ? ? ? ?
repeatCount ? ? ? ? ? ? ?

Document Tags and Contributors

Last updated by: fscholz,