Animated SVG plays in Safari but not in Firefox

I have a strange issue, I have added an animated SVG to Hype, when I preview this plays fine in Safari but is static is Firefox as per the attached document.

If I just drag the icon to the browser FF and Safari the icon plays fine - am I doing something wrong?

Here is a link to the Hype file:


you shouldn’t load the svg as a backgroundimage.
place the svg-code as innerHtml or use an object-Tag or a src-Attribute with img-tag …
there are some other possibilities … google will be your friend :slight_smile:

Putting the SVG inline will be enough to make this work.

Here is a screenshot of it working in FF.

Here is the revised HYPE file demonstrating how. (28.3 KB)

1 Like

Many thanks drew,

I see from the example that the inline works.


The difference between import of the svg file and inline html in a widget is. And essential. If we take svg with animation in one cycle, instead of around:

  • the imported file is played once, how many times not to repeat a scene anew
  • inline each time repeats the animation cycle anew when the scene is again active
    It solves actually a problem of difficult animation scenarios in case of a combination of html5 and animation svg.

To your attention the file with an example, which I слелал for few minutes, for experiment. (14,0 КБ)

Thanks for the above example! I thought this would have been fixed from the firefox issue but it looks like it is still a problem. I may need to investigate further and figure out the difference.