export animated SVG ?

[Exe2k]

I thought this is what animate is designed for. But may be i do smth wrong. I need to export a simple svg animation with tweens, but the farest result i could get to is a sequence of SVG files instead to be a single animated file.

Plz help, how to export my animation as a single SVG\HTML(with animation)\or anything I could use on my HTML page as animation (except SWF of course)?

[n. tilcheff]

Hi mate,

Animate can't export animated SVG. (There may be some extension that does it, but I've heard that it has been unsupported for a long time.)

What you can do is convert your file to HTML5/Canvas and export that without generating textures/spritesheets, i.e. the vectors will remain vector.

Then you can embed this html into your webpage as an iFrame.

Here is an example of such 'embeds' on our website:  http://flash-powertools.com/keeping-cycles-flexible-for-easy-re-timing-by-using-service-frame-and-wo...

[Exe2k]

Thank u again, Nick. an iFrame is absolutley OK. Could u help me plz with publishing settings? A screenshot or smth. Because when i untick "Export image assets" - I get just blank html page with no animations.

[n. tilcheff · Accepted solution]

Here you go, mate:

Convert your AS3 file to Canvas:

There are some limitations:

Color effects, radial gradients, animated masks - you will get warnings when you publish or things might not look like they should so you will have to figure out alternative ways of achieving the same results by trial and error.

These are the settings that will not export your vectors as bitmaps/spritesheet, i.e. will keep them vector:

You can change the Export Image Assets > Export as to experiment with the other options.

You will end up with a HTML and JS files and an images folder that holds the preloader GIF.

If you open the HTML you will see that it calls 

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

I'd rather host a copy of createjs on my server, so put it somewhere and change that path.

Embed the HTML as an iFrame.

[Exe2k]

Thank u, really helpfull 

[webWahine]

Hi Nick

Thank you for the help! Ilustrator has changed so the screens aren't the same anymore but I did get a test file working. Would you be able to upload new screens based on the latest verison of Illustrator with your fav suggestions? As another long time Flash user it astonishes me that we are back to using timelines and a bunch of code and a big chunk of sequential svg files to embed in a site just for an animates vector file when it was so prefect 2 decades ago! Thanks, Jodi

[n. tilcheff]

Hi Jody,

None of the screens above are from Illustrator. This is Animate. Animate is Flash.

[webWahine]

Oh, right, so sorry, that’s what I meant 😊

Sent from my iPhone