Forum Discussion

IanRogers-883b2's avatar
IanRogers-883b2
Community Member
5 years ago

Animated SVG images in Rise?

I know you can import svg images into Rise without any problem, but when I import an animated svg image it doesn't seem to play at all. Is there anyway make that work? Possibly some manner of buildi...
rise 360
MathNotermans-9's avatar
MathNotermans-9
Community Member
5 years ago

So i tested a bit more and these are the results...
https://360.articulate.com/review/content/33063901-1793-4bf6-93e2-0aed60b3f906/review

SVG with animation can be generated in 2 ways. With Javascript or with CSS. The Javascript based SVG animations donot work in Rise360. The CSS based animations do work in Rise360, however creating SVG with CSS has some major lacking features. First of all you cannot use transform related animation, you have to make sure all your animation is point and path focused. Thats not good, allthough if you know it, you can take that into account when creating your animation.

However the worst part of CSS based SVG animation is not all browsers support it. It works fine on the latest Chrome and Edge, but it doesnot on Firefox and probably Safari and Macs neither.

So Articulate really should add this as a feature... Make sure Javascript controlled SVG works on Rise, because those SVG animations work on all browsers.

For those who want to test with the 2 types of SVG adding them...

Renz_Sevilla's avatar
Renz_Sevilla
Staff
5 years ago

Hi Math Notermans! Thanks for bringing this to our attention and thoroughly testing this across different browser types as well as sharing your two sample images.

We have this documented, and we'll let you know if we make any changes that help!

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    5 years ago

    And it would be great if we could use SVG like that in Storyline too ;-) Allready made a request for that...

    • Renz_Sevilla's avatar
      Renz_Sevilla
      Staff
      5 years ago

      Hi Math!

      Thanks for patiently waiting! The team investigated and we'd like to let you know this behavior is expected. 

      The SVGs using JavaScript are in <object> tags and CSS are in <img> tags.

      We wrap all our image uploads in <img > tags and since all of our images are wrapped in <img > tags, CSS based SVGs are the only ones that will work. As for the browser limitation, most browsers limit or prohibit the use of interactivity in tags making animated SVGs work poorly.

      Thanks again for initially bringing this up and if we make any updates to this, or how SVGs work in Rise, we'll let you know!