SVG animation (SMIL), how to repeat the whole animation? - html

Question

I am building a set of SVG icons and I need to include the animations within the SVG file - no Javascript or no CSS. The idea is to have standalone SVG files that can be added as is in my html code such as <img src="my-icon.svg">
Each icon has a set of SMIL animations including intro, main animations, event trigged animations and outro.
The SVG file looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" ...>
<g id="group1" ...>
<path id="path1" d="M0-0l37.5,27,...">
<path id="path2" d="M0-0l37.5,27,...">
...
</g>
<g id="group2" ...>
...
</g>
<!-- Intro -->
<animate
id="animation1"
attributeName="opacity"
from="0"
to="1"
begin="2s"
dur="1.5s"
keySplines="1 0 1 1"
calcMode="spline"
/>
<!-- Animations -->
<animateTransform
id="animation2"
xlink:href="#arrows"
attributeName="transform"
type="translate"
from="..."
to="..."
begin="animation1.end - 1s"
dur="2s"
values="..."
keyTimes="..."
keySplines="..."
calcMode="spline"
repeatCount="3"
/>
<animate
...
/>
...
<!-- Outro -->
<animate
id="animationX"
attributeName="opacity"
from="1"
to="0"
begin="animation3.end - 1s"
dur="1.5s"
keySplines="0.5 0 1 0.5"
calcMode="spline"
/>
</svg>
This example shows a on-time stack of animations that I'd like to repeat indefinitely - I need to repeat the whole animation.
Any idea?

Answer 1

As I understood from your question, you need to perform several animations in succession
And after the end of the last animation, go to the execution of the first animation
This can be done using the condition to start the first animation
begin="svg1.click;animation4.end", where
svg1.click - Starting animation for the first time after clicking
animation4.end - Restarting the same animation after the end of the last animation
This is how the looping of several sequential animations is realized.
The animation will start after clicking
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" style="border:1px solid">
<g id="group1" opacity="0">
<path fill="#6DBB00" d="M16 0a16 16 0 100 32 16 16 0 000-32z"/>
<path fill="#FAFAFA" d="M24.1 12.6l-8.7 8.7a1.3 1.3 0 01-1.8 0l-4.4-4.4a1.3 1.3 0 112-1.8l3.3 3.3 7.7-7.7a1.3 1.3 0 112 2z"/>
</g>
<g id="group2" >
</g>
<!-- Intro -->
<!-- Icon appearance animation -->
<animate
xlink:href="#group1"
id="animation1"
attributeName="opacity"
values="0;1"
begin="svg1.click;animation4.end"
dur="1s"
fill="freeze"
restart="whenNotActive"
/>
<!-- Animation of moving icons -->
<animateTransform
id="animation2"
xlink:href="#group1"
attributeName="transform"
type="translate"
values="0,0;32,0"
begin="animation1.end"
dur="1s"
fill="freeze"
restart="whenNotActive"
/>
<!-- Outro -->
<!-- Disappearing icon animation -->
<animate
xlink:href="#group1"
id="animation3"
attributeName="opacity"
values="1;0"
begin="animation2.end"
dur="1s"
fill="freeze"
restart="whenNotActive"
/>
<!-- Animation of returning the icon to its original position -->
<animateTransform
id="animation4"
xlink:href="#group1"
attributeName="transform"
type="translate"
values="32,0;0,0"
begin="animation3.end"
dur="1s"
fill="freeze"
restart="whenNotActive"
/>
</svg>

Answer 2

I looked around a bit and it should be: repeatCount="indefinite"
I stumbled upon this page pretty quick and just tried it out myself
hope it works!