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 building the svg animation to play in Rise maybe?
Hi Ian, you can try editing your SVG image in a text editor, such as Notepad, and add width and height attributes to the opening <svg> tag. Then, save and close the file and reimport it into Rise 360. This is the recommended solution for SVG images that won't zoom in Rise, and it might be worth a try for animated SVG images.
I noticed that adding an animated SVG to Rise360 the animation plays when adding it. So in the block editor you see it animating...but then in the preview it doesnot animate anymore...
Testing some more...
After some more tests it appears that adding an animated SVG ( i made them in SVGator ) will work, but only on load. Thats mainly inherent of my SVGs, Gonna try a looping one...and one with interactivity...to see if that works.
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...
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!
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!
Thanks for the hot tip, your animations look great! We're just wondering, how you were able to get the code for your svg? Is it a json file? Were you using after effects with Body Movin/Lottie? Thanks so much, we are really trying to crack the code on this one.
For this sample is used SVGator in which you can animate any svg. And then decide whether to export it as CSS or Js based SVG. With the above mentioned drawbacks when using CSS. And this is all inline then...as its an option in SVGator on export..
I do use the AfterEffects / BodyMovin / Lottie workflow. Used it in Storyline too before and then indeed you can use separate JSON files and thus even make changes in script on it with Javascript in Storyline. Contact me directly if you need more help.
I didn't know much about Rise but I know YewCraft ( https://yewcraft.com ), which can import SVG animations and static designs but you can also draw your own custom SVGs and animate them there without any coding skills.
The problem is that SVGator exports inline javascript into your SVG and then Articulate go and strip it back out again, presumably because they are fearful of malicious scripts. Scripted SVGs are great for animated graphs and such (better than the build in "charts" which are lackluster at best), but they need javascript to work consistently.
I have to attach the SVG files as previews, publish, then go back into the zip and replace the SVGs with the originals. Not ideal, and not remotely compatible with the Review 360 workflow.
10 Replies
Hi Ian, you can try editing your SVG image in a text editor, such as Notepad, and add width and height attributes to the opening <svg> tag. Then, save and close the file and reimport it into Rise 360. This is the recommended solution for SVG images that won't zoom in Rise, and it might be worth a try for animated SVG images.
I noticed that adding an animated SVG to Rise360 the animation plays when adding it. So in the block editor you see it animating...but then in the preview it doesnot animate anymore...
Testing some more...
After some more tests it appears that adding an animated SVG ( i made them in SVGator ) will work, but only on load. Thats mainly inherent of my SVGs, Gonna try a looping one...and one with interactivity...to see if that works.
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...
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!
And it would be great if we could use SVG like that in Storyline too ;-) Allready made a request for that...
Hi Math!
![]()
<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 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
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!
Thanks for the hot tip, your animations look great!
We're just wondering, how you were able to get the code for your svg? Is it a json file? Were you using after effects with Body Movin/Lottie?
Thanks so much, we are really trying to crack the code on this one.
Hi Jess,
For this sample is used SVGator in which you can animate any svg. And then decide whether to export it as CSS or Js based SVG. With the above mentioned drawbacks when using CSS.
And this is all inline then...as its an option in SVGator on export..
I do use the AfterEffects / BodyMovin / Lottie workflow. Used it in Storyline too before and then indeed you can use separate JSON files and thus even make changes in script on it with Javascript in Storyline. Contact me directly if you need more help.
Kind regards,
Math
Hi Ian,
I didn't know much about Rise but I know YewCraft ( https://yewcraft.com ), which can import SVG animations and static designs but you can also draw your own custom SVGs and animate them there without any coding skills.
The problem is that SVGator exports inline javascript into your SVG and then Articulate go and strip it back out again, presumably because they are fearful of malicious scripts. Scripted SVGs are great for animated graphs and such (better than the build in "charts" which are lackluster at best), but they need javascript to work consistently.
I have to attach the SVG files as previews, publish, then go back into the zip and replace the SVGs with the originals. Not ideal, and not remotely compatible with the Review 360 workflow.