SVG animated don't work in Firefox

[DesignDealer]

I recovered an animated SVG (generated by the excellent : Vivus Instant - inline SVG animation with CSS  )

On MAC. I put it in Muse. It works on Safari and Chrome but NOT on Firefox?

To test, I dragged the animated SVG into firefox directly to see if this came from Firefox. But, it works. So there's a problem with the Muse code. ? Does anyone have a trick?

[ankushr40215001]

Hello,

Could you please help me with the URL of your site so that I can have a look at it?

Regards,

Ankush

[DesignDealer]

This !

Home

[VivekP · Accepted solution]

Hi DesignDealer,

If you look at the documentation of Vivus at vivus-instant/readme.md at master · maxwellito/vivus-instant · GitHub  they have mentioned that codes to ensure it works fine. As per them codes with <object> tag works best and Muse create <img> tag by default that may not work everywhere as per their documentation.

I tried your direct image link in the object tag and it worked in firefox as well.

1. Open page in Design Mode.

2. click object >> Insert HTML

3. paste following code and click OK

<object type="image/svg+xml" data="http://www.designdealer.fr/Partages/dossiers/test/images/adobe_animated.svg?crc=4169862713"></object>

This time preview should work fine in Firefox as well.

If this works fine then the process to use such svg images will be as following.

1. Add the SVG to Assets folder

To add this SVG to assets folder click "File >> Add files for upload" in Muse.

After adding the svg you should be able to see it listed in Assets panel  (File >> Assets)

2. Create the object tag code

In case of Muse code will be as following

<object type="image/svg+xml" data="assets/your_animated_svg.svg"></object>

in the example above name of the SVG file is your_animated_svg.svg in case you file name is different then you have to change it.

3. Adding the code in Muse

To add this codes in Muse Go to Object >> Insert HTML and paste the code mentioned in the step 2.

Click OK and resize the embedded HTML box as per your Designing need.

Regards,

Vivek

[DesignDealer]

I have read the tips above and now that works. I use

"File >> Add files for upload"

and insert code

<object type="image/svg+xml" data="assets/your_animated_svg.svg">

It Functioning. Thank you.

[VivekP]

You are welcome. I am glad that I was able to help.

Regards,

Vivek

[Ussnorway]

the code works ok in FF at my end

test page = Vivus Instant - inline SVG animation with CSS

[pnoypie]

The animation works http://www.designdealer.fr/Partages/dossiers/test/images/adobe_animated.svg?crc=4169862713, I think it's the embedding