Animated SVG background not showing up

So I placed a animated svg file as my background, and in the blocs web browser preview mode it works fine. however, when I upload my website to my web hosting, the svg background does show up. I don’t believe that my browser is the problem because when I open http://consyncdigital.com/ (created by @mackyangeles )in my browser (both desktop and phone) the svg background works.

If anyone has had this problem or knows how to solve it, it would be a great help.
thanks in advance :slight_smile:

First check the svg file size. If you open the html file offline and it works try changing the folder you are uploading. Maybe a cache issue is not displaying it

1 Like

Ok, I will check it when I get home. What do you mean by check the file size? Because I have a few svg images on my website, and they are shown perfectly, however, the svg background does not show up. Just a note, the svg background is 3KB, and the image svg is 35KB.

EDIT:
Also, what do you mean by ‘change the folder you are uploading’? hahaha Do you mean the folder that I am uploading to the web hosting?

Thanks again @chicuelo

If you have a 5.8 mb file, the download will be lazy, so first check the size of the svg to ensure a fast display.

When you visit a site the browser stores in cache the files, so if you upload and replace the artwork many times to test you may see corrupted css files and everything is not displayed in the right way. You can clear your browser’s history or you can use another folder to test.

If everything fails check the svg format output when you save the file

1 Like

The size of the animated background svg is 3kb. So I don’t believe it should take long to display.
I am not 100% what you mean by ‘use another folder to test’.

I am basically trying to achieve this background effect: http://consyncdigital.com/ (created by @mackyangeles). So I am puzzled how @mackyangeles managed to get it to work, however, I am not managing.

Again, thanks in advance haha.

Hi @gadusidup, can you send us the link of preview and the SVG file?

1 Like

Take note that Animated SVGs are not for everyone. I manage to do trial and error to achieve the effect I like. :slight_smile:

1 Like

Yes, sure thing.

Blocs preview (the waves(svgs) move): https://goo.gl/nxLeCD
SVG Files: https://goo.gl/egQr3K
(@mackyangeles I kinda took your SVGs of the waves. If it is a problem, I completely understand. I will remove them if you want. I probably won’t stay with these SVGs anyways. I will probably use different ones. Im just trying to learn with SVGs at the moment)

Thanks :slight_smile:

Hi @gadusidup, have you tried creating your own Animated SVG instead? Where did you upload the preview site?

1 Like

Create an Animated SVG, then set it as background.

1 Like

I have set it as the background. The problem is, when I upload the files to my web hosting, the background does not display.

Please check img permission on you web hosting… it should be 644

1 Like

Not the whole img folder, just the img file…

1 Like

You are a lifesaver @mackyangeles :heart_eyes:
I will start designing my own SVG file now :slight_smile: