SVG animation through animatemotion function

SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include:

  • <animate> - which allows you to animate scalar attributes and properties over a period of time.
  • <set> - which 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> - which moves an element along a motion path.
  • <animateColor> - which modifies the color value of particular attributes or properties over time. Note that the <animateColor> element has been deprecated in favor of simply using the animate element to target properties that can take color values. Even though it's still present in the SVG 1.1 specification, it is clearly noted that it has been deprecated; and it has been completely removed from the SVG 2 specification.

In addition to the animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec; these extensions include attributes that extend the functionality of the <animateMotion> element and additional animation elements. The SVG extensions include:

  • <animateTransform> - allows you to animate one of SVG's transformation attributes over time, such as the transformattribute.
  • path (attribute) - allows any feature from SVG's path data syntax to be specified in a path attribute to the animateMotion element (SMIL Animation only allows a subset of SVG's path data syntax within a path attribute). We'll talk more about animateMotion in an upcoming section.
  • <mpath> - used in conjunction with the animateMotionelement to reference a motion path that is to be used as a path for the motion. The mpath element is included inside the animateMotion element, before the closing tag.
  • keypoints (attribute) - used as an attribute for animateMotion to provide precise control of the velocity of motion path animations.
  • rotate (attribute) - used as an attribute for animateMotionto control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path. This attribute is the key to making motion along a path work as you'd expect. More about this in the animateMotion section.

SVG animations can be similar to CSS animations and transitions via by their nature. Keyframes are created, things move, colors change, etc. However, they can do somethings that CSS animations can't do, which we'll cover.

Why Use SVG Animations?

SVGs can be styled and animated with CSS (slides). Basically, any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element. But there are some SVG properties that cannot be animated through CSS that can through SVG. An SVG path, for example, comes with a set of data (a d="" attribute) that defines that path's shape. This data can be modified and animated through SMIL, but not CSS. This is because SVG elements are described by a set of attributes known as SVG presentation attributes. Some of these attributes can be set, modified, and animated using CSS, and others can't.

So, many animations and effects can simply not be achieved using CSS at this time. The CSS SVG animation gaps can be filled by using either JavaScript or the declarative SVG animations derived from SMIL.

Specifying the target of the animation with xlink:href

No matter which of the four animation elements you choose, you need to specify the target of the animation defined by that element.

In order to specify a target, you can use the xlink:href attribute. The attribute takes a URI reference to the element which is the target of this animation and which therefore will be modified over time. The target element must be part of the current SVG document fragment.

Repeating Animations with repeatCount

If you want to run an animation more than once, you can do that using the repeatCount attribute. You can specify the number of times you want it to repeat, or use the indefinite keyword to have it repeat endlessly.

The animation I did is:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 280 280" style="enable-background:new 0 0 280 280;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F06428;}
.st1{fill:#FFFFFF;}
.st2{fill:#333333;}
</style>
<title>Fox Loader</title>
<g id="Background">
<circle class="st0" cx="140" cy="140" r="140"/>
</g>
<path class="st1" id="fox_path" d="M219.5,47.7l0.1-0.4l-0.3-0.2c-0.3-0.2-0.6,0-0.8,0.1c-51.3,24.2-89.1-1.7-89.4-2l-0.7-0.5l-0.1,0.8
c-3.6,25.9-12.8,43.4-12.9,43.6l-0.2,0.5l0.5,0.2c0.1,0,3,1.5,7.8,5.3c-11.1,16.5-51.9,34.9-52.3,35.1l-0.2,0.1l-0.1,0.4l0,0l0,0
l-9.9,32l58.6,67.8l0.1,0.1l47.4,4.4h0.1l30.2-10.8l0.2-0.1l11.8-22.2l-40.1-20.6l23.6-73.2c10.3-7,18.3-10.3,18.4-10.4l0.5-0.2
l-0.2-0.5c0,0-0.1-0.4-0.3-1.4l0,0c0,0,0,0,0,0C210.7,91.8,210.3,79,219.5,47.7z M191.8,107.7c-5.6,3.8-11.8,8.8-17.8,14.8
l-10.7-11.8l4.8-45.7c1.4,0.1,2.8,0.2,4.3,0.2c1.8,0,3.7-0.1,5.5-0.3l32.4,32.2c-2.2,1-9.2,4.2-17.8,10.1L191.8,107.7z M152.5,172.7
l0.4-0.1l-19.8-68.3c7.5,8,16.7,20.1,25.9,37.8l0.2,0.3l0.3,0c0.4,0,0.5-0.4,0.6-0.6c0.1-0.1,0.1-0.1,0.1-0.1
c1.2-1.9,2.4-3.8,3.7-5.6l-2.5,41.2L152.5,172.7z M151.8,172.3l-78.1-41.1c8.4-1.7,50.4-10.5,60.3-20.1L151.8,172.3z M129.3,47.1
l-0.2,0.2c0-0.1,0-0.2,0.1-0.3C129.2,47,129.2,47,129.3,47.1z M156.8,63.2c3.4,0.9,6.8,1.5,10.3,1.8l-4.7,45.5l-15.6,9.2
c-14.5-20.8-26.8-28.6-29.9-30.3L156.8,63.2z M117.1,88c0-0.1,0.1-0.2,0.1-0.3l0.1,0.1L117.1,88z M118.6,87
c19.7-19.4,13.1-35.8,11.3-39.3c6.5,6.5,14.3,11.4,23,14.3c0.9,0.3,1.8,0.6,2.7,0.9L118.6,87z M159.3,140.4
c-4-7.7-8.1-14.2-11.9-19.9l14.9-8.8L159.3,140.4z M160.4,139.5l2.8-27.4l10.1,11.1C168.8,128,164.3,133.4,160.4,139.5z M179.2,64.9
c13.9-1.5,26.5-7.3,36.5-13.5c-17.6,22.3-8.7,39.5-5.9,43.9L179.2,64.9z M218.2,48.5C218.2,48.5,218.2,48.6,218.2,48.5
c-15.8,10.6-39.8,21.2-65,12.6c-8.1-2.8-15.6-7.3-21.8-13.2c6.2,3.5,21.7,10.7,43.1,10.7C189.7,58.5,204.6,55,218.2,48.5z M128.9,48
c1.6,3,8.5,19.1-11.1,38.3C120.6,80.3,126.1,66.4,128.9,48z M124.2,95.8c2.2,1.8,4.7,4.1,7.4,6.9l0,0l2.1,7.3
c-8.8,9.3-51.2,18.3-60,20.1c3.7-1.7,11.5-5.6,20-10.4C109.2,110.9,119.4,102.8,124.2,95.8z M62,162.6l9.5-30.6l88,101.4l-39.5-3.6
L62,162.6z M162.7,233.6L162.7,233.6L162.7,233.6L162.7,233.6z M196.7,223.4L166.9,234l-2.8-0.3l43-29.9L196.7,223.4z M162.7,233.5
l22.1-43l22.8,11.7L162.7,233.5z M183.9,190.1l-22.4,43.5l-0.6-0.1L72.6,131.7l95.3,50.1l0,0L183.9,190.1z M168.2,180.9l-5.9-3.1
l2.6-43.2c8.3-11.1,18-19.5,26.5-25.4L168.2,180.9z M206.2,82.7c-1.7-13,5.1-24.6,11.5-32.2c-7.3,25.6-7.9,38.1-7.6,43.5
C208,90.6,206.7,86.7,206.2,82.7z"/>
<g id="Dot">
<circle class="st2" cx="0" cy="0" r="3"/>
</g>
<defs>
<animateMotion xlink:href="#Dot" begin="0s" dur="19s" id="anime1" repeatCount="indefinite" path="m129,46.25l12.25,5.5c0,0 14.75,4.75 14.75,4.75c0,0 17,2 17,2c0,0 17.75,-1.5 17.75,-1.5c0,0 12.25,-3 12.25,-3c0,0 16.5,-6.25 16.5,-6.25c0,0 -6.25,21.75 -6.25,21.75c0,0 -2.25,14.75 -2.25,14.75c0,0 -0.5,13 -0.5,13c0,0 -18.5,10.75 -18.5,10.75c0,0 -23.25,73.5 -23.25,73.5c0,0 39.75,20.75 39.75,20.75c0,0 -10.75,20.75 -10.75,20.75c0,0 -30,11.5 -30,11.5c0,0 -47.25,-4 -47.25,-4c0,0 -58.75,-68 -58.75,-68c0,0 9.75,-32 9.75,-32c0,0 18,-9 18,-9c0,0 16.25,-9.5 16.25,-9.5c0,0 15.25,-12.75 15.25,-12.75c0,0 3.5,-4.25 3.5,-4.25c0,0 -8,-5.75 -8,-5.75l12.5,-43zl0,0z
l2.875,11.125l-0.75,7.875l-3,8l-4.875,7.5l-6.625,7.375l39.375,-25.375l11.75,1.875l10.625,-0.25l32.5,32.375l-4.125,-9l-1.375,-5.875l0.125,-7.625l2.25,-8.875l3.625,-7.75l6.25,-8l-12.125,6.75l-13.125,5.25c0,0 -12.375,2.5 -12.25,2.5c0.125,0 -10.5,0.375 -10.5,0.375c0,0 -11.375,-1.375 -11.375,-1.375c0,0 -12.75,-4.625 -12.75,-4.625c0,0 -11.875,-7.875 -11.875,-7.875c0,0 -4.625,-4.375 -4.625,-4.375z
l12.625,10.75l11.75,5l2,0.25l-39.75,26.75l15.25,12.5l16.75,21l11.5,18.25l14.5,-17.5l16.25,-14l11.25,-7.5l9.5,-5l-32.75,-32.5l13.5,-2.75l15.25,-5.75l11.5,-7.5l-17.5,6.25l-16.75,3l-15.25,0.5l-12.5,-1.75l-14.5,-4l-12.625,-6z
l12.625,10.75l11.75,5l2,0.25l-39.75,26.75l15.25,12.5l16.75,21l11.5,18.25l14.5,-17.5l16.25,-14l11.25,-7.5l9.5,-5l-32.75,-32.5l13.5,-2.75l15.25,-5.75l11.5,-7.5l-17.5,6.25l-16.75,3l-15.25,0.5l-12.5,-1.75l-14.5,-4l-12.625,-6z
l13.625,7l11.75,3.25l19,2.5c0.125,0 12.875,-1.75 13.125,-1.75c0.25,0 18.75,-4.25 18.625,-4.25c0.125,0 10.375,-3.25 10.25,-3.25c0.125,0 2.375,-1.5 2.25,-1.5c0.125,0 -2.625,10.25 -2.75,10.25c0.125,0 -4.375,22.5 -4.5,22.5c0.125,0 -0.375,15.75 -0.375,15.75c0,0 -18,11 -18.125,11c0.125,0 -19.625,16.5 -19.75,16.5c0.125,0 -10.625,-12.75 -10.75,-12.75c0.125,0 4.875,-47 4.75,-47c0.125,0 -11.625,-1.25 -11.75,-1.25c0.125,0 -39.375,26.5 -39.125,26.25c0.25,-0.25 14,11 13.875,11c0.125,0 17.125,20.5 17,20.5c0.125,0 12.875,20.5 12.75,20.5c0.125,0 4.125,-5.75 4,-5.75c0.125,0 -1.875,42.25 -1.875,42.5c0,0.25 -90,-47 -90.125,-47c0.125,0 89.625,103.5 89.5,103.5c0.125,0 23.375,-44.25 23.25,-44.25c0.125,0 23.875,12 23.625,12c-0.25,0 -45.25,31.75 -45.375,31.75c0.125,0 -42.375,-3.25 -42.5,-3.25c0.125,0 -58.875,-68.25 -59,-68.25
c0,0.5 10.25,-31 10.125,-31c0.125,0 15.625,-3.25 15.5,-3.25c0.125,0 21.125,-5.5 21,-5.5c0.125,0 20.375,-7.25 20.25,-7.25c0.125,0 6.125,-4.5 6,-4.5c0.125,0 17.875,62.25 17.75,62.25c0.125,0 9.625,5 9.5,5c0.125,0 3.125,-43 3,-43c0.125,0 -5.375,6.5 -5.5,6.5c0.125,0 -11.875,-21 -12,-21c0.125,0 15.875,-10 15.75,-10
l10.375,12l-13.5,17.75l8.5,-76.5l-12,-1.75l-11.75,-4.75l-8.75,-6l-6.5,-5.5
" />
</defs>
</svg>