How to show an animated SVG on a WebPage (OS 11.6.25)


I want to show an animated SVG on a WebScreen.

1) I create an animation with SVGGator (Web SVG creator)

2) I export this as animated SVG

2.1) with JavaScript inside

2.2) only with CSS inside

2.3) booth with on_load and on_hover

3) If I open this 4 files in Chrome browser, I could see the animation

4) if I want to import one of this animated SVG's in outsystems, I get the message "Unsupported image format or invalid image."

5) I read in the forum that I could import the SVG as resource and could be import it as object (with an expression). I do this. But if I open the WebPage, I could see any picture.

6) I also download an free animated svg and try the same (point 4 & 5) with the same result

Could anyone explain me how I could show an animated SVG in a WebPage (if possible with techniques inside OutSystems, because I do not have the rights to install extensions on the development server for testing)



Please check this post.


I read this post before I create my post.

- I import my animated SVG as resource

- I create on the WebPage a container

- i create a style in the css of the page

SyntaxEditor Code Snippet

BKImage {
 background-image: url(/LISTest/LIS-FinalV0.4css.svg)   

- I set this style-class to the container

- I put also some text and labels inside the container, that the container has a dimension

I see only the text and the labels fields on the page.



I saw that the component "inline-svg" is installed on our development server. 

This component is very easy to use and do all I want. 

At the first run I get an errormessage, that the file (svg image) was not found.

Than I saw, that you have explizite to say that the resource have to deploy to target directory.

After I have changed the deploy action the other way also work ;o)