Export Flash to Animated SVG

While working on a project which required rich vector animations in the browser, I came across Dave Belias’ library for exporting still SVG frames from flash. I wondered if I could re-purpose it to export Animated SVGs, a relatively unknown standard for containing fully animated imagery within a single SVG file.


Flash Animated SVG

You may notice that the SVG motion tweens are a little smoother than flash, this is because they are completely time-based (whereas flash exports motion tweens as frame-based animations).


It's worth noting that both Flash and Animated SVG are complex systems and I gaurantee this won't work for all animations.

What it does

While the initial code base was a little tricky to work with (sorry Dave), I managed to rearrange a few things and get it to do the following:

  • Shapes
  • Bitmaps
  • Symbols (i.e. repeated imagery is included once only)
  • Classic Motion Tweens
  • Shape tweens (as frame animations)
  • Guided motion tweens (as frame animations)
  • Old school tween easing (-100 to 100)
  • Masks (not much testing)

It doesn't do:

  • Custom easing
  • New After-effects style tweens
  • Actionscript or frame label export
  • Unsynchronised nested timelines*

* In Animated AVG, all timelines are hooked into a central timer, to have a nested timeline play over a different duration to the parent timeline is, from what I can tell, impossible. You can still use whatever frame settings you want for nested graphic symbols, but they will play the same each time over.

I think all of the controls are fairly self-explanatory but if there's enough interest I'll post some more info.

Get the latest release here

Or mess with the repo

A note regarding output size

The main thing to reduce size is whether you choose to use movieclips or graphics for any sub animations.

Because the playhead of a graphic symbol can be controlled by the parent timeline (in flash pro), they must be exported frame-by-frame in the output SVG, resulting in a much bigger file. This is useful if you have many of the same short sub animation, all running at different times (in relation to the root timeline). The output ill include an additional element per frame of the sub animation.

In SVG, movieclips are tied in to the same central timer, and the beginning time of their animation is set within the symbol, as a result, every time a movielcip is reused at a different starting frame (in relation to the main timeline) it must be included again in the output SVG. Because these aren't frame-by-frame elements they are much smaller than their graphic equivalent and they can contain real tweens.

It's also worth noting that it doesn't matter whether the nested clips are movieclips or graphics in the library, it only matters what the instance on the stage is set to in flash pro.

Updates - 22/05/2014

I have added a new updated installer.
I've been slowly improving performance and output.
It should run several times quicker and the output should be many times smaller (and run faster).
The tool still runs best in CS6, it runs with a few group bugs in CS5.5, it runs with some stage scale issues in CC.


  1. Hey, Tom!

    What tool did you use for exporting flash to SVG? Do you have statistics on how much it decreased the file size? Thank you for sharing!

  2. Hi Tom

    I have 3 mac computers I have tried to export from all running the latest operating system and software – 0S x El Capitan v10.11.6, with Adobe Animate CC 2018 v18.0.2 and Animated SVG v3.56. Every computer has an export issue on a server or local on the desktops – The output directory could not be found. Please update it and try again. [/Users/………

    Can you please help, the plugin would be a massive help to our company for web animations if it works?

    Thanks Nolan

    • Hi Nolan,
      Sorry, I’m not really supporting this plugin any more.
      I could make time for paid work but otherwise I’m probably too busy.

  3. This is such a great plugin. Saved my life when it comes to making complex SVG animations.

    Is anyone else having an issue with their animation pausing on mobile when revisiting a URL after the initial visit?

    It would be awesome to find a fix or some information on this.


    • Actually, just realized that the SVG animation is pausing in Safari browser both desktop and mobile.

      Anyone have a solve for this?

      Thanks again!

    • Hi Trevor,
      If you post a link to your SVG file I can take a quick look.
      Maybe some formatting that Safari doesn’t like.

    • Hi Trevor,

      I have installed this plug-in but couldn’t find in Adobe Flash Professional.

      Can you tell me where i can found it and hoe to use please it very need full.


  4. Hi!

    I’m not a dev at all, so a lot of terms are quite obscure to me, sorry for that, but when I try to export my file, I get this “TypeError: svgXml.defs[0] is undefined” and the export fails (I think. I don’t know where it would create my file).
    I’ve seen this question in the comments already but couldn’t find an answer that would work for me. I’m using Animate CC 2017 if it helps.

    Is there something i can do to make it work?

  5. Hi,
    Thanks for the awesome tool 🙂
    I’m using cs6, v 3.36 and it’s working … but not all the time
    some times when my animation take more than 160 frames (i’m using 20 fps) or when i use 1920 p scale file the extraction takes a long time then error msgs appears most of them (out of memory)
    is there a solution for this ? or is it just limited due to scale of frames ?
    will it help using animate ?
    Thanks again

    • Hi Ahmed,
      Yeah, currently this is limited by the amount of memory that Flash/Animate allows plugins to use (in the JSFL environment).
      The tool itself uses E4X also, which isn’t very memory efficient, so that doesn’t help either.

      When I’ve run into this issue in the past, I have exported each layer of the main timeline separately and manually combined the resulting SVG files. If you’re familiar with XML this shouldn’t be too difficult, otherwise, I’m not sure I can help.

  6. I have animate cc 2017.1 and flash cs 6 installed on my PC still it shows error on export and generates a crash log

  7. I get this error when I try to export any idea what this means?

    TypeError: svgXml.defs[0] has no properties
    SVG Export Failed

  8. Hello,

    Thank you for creating this plugin, and making it free!

    I am using this plugin with Flash CS6, and I am getting an error when I try to export a very simple shape tween animation (using the Export panel):

    TypeError: svgXml.defs[0] has no properties

    Is there a fix for this, or perhaps a setting I have missed?


    • So sorry… for some reason, these recent comments were not visible until AFTER I posted mine. I noticed the last version that supports CS5/CS6 is v3.37. I have installed that version, and it is working.


  9. Hi Tom,

    Thanks for this extension, it’s excellent.

    I’ve had a problem with one particular FLA that raises the error:

    TypeError: svgXml.defs[0] is undefined

    Prior to that I see this message in the output:

    doNextTimeline: 0 file:///undefined/graphic.svg

    I noticed a few others have seen the TypeError but I’m not sure how to fix it.

    Could you give me any pointers in what’s happening here please?

    Many thanks,

    • OK, making my previous comment helped me understand the issue and I’m now able to convert the problematic FLA to animated SVG successfully.

      For those with the same error, I had created a new FLA and copied a sprite from another FLA into it. The first time I tried to export to SVG, a message appeared saying ‘Please save the FLA before exporting’ or words to that effect. When I did save the FLA, I got the TypeError message when converting. I think this was because the animation plugin had not picked up the new FLA file location as indicated by the message:

      doNextTimeline: 0 file:///undefined/graphic.svg

      To fix it, I closed the FLA down then reopened it. After that the export worked perfectly.

      Thanks again for this tool!

  10. Sheharzad Arshad

    December 13, 2016 at 8:25 am

    I would like to use this tool but I got an error.
    TypeError: svgXml.defs[0] has no properties

    Application version: Flash CS6
    File type: AS3
    Plugin version: v3.50.0
    Installation method: Extension Manager
    Description of timeline: Single layer with frame by frame animation of drawn shapes. No tweens.
    How I got the error: Clicking export on the SVG panel created a cvs file and an empty temp folder. The output window reads the following:
    doNextTimeline: 0 file:
    //file location…/filename_ShapeContainer.svg

    Then the output window suddenly reads this error message:
    TypeError: svgXml.defs[0] has no properties

    The tool appears to still be working with a blue striped loading bar still moving under the cancel button but nothing happens.

    Could you kindly help me figure out how to solve this error?
    Thank you,

  11. Hello Tom,
    I have succesfully installed the plugin for Adobe Animate CC 2017 via the zxp installer. But when I try to export my animation to svg i get the error message “The output directory could not be found. Please update it and try again.”.
    It creates a folder to put the svg file in but it is always empty.
    Any tips how to solve this?

  12. Hi Tom,
    Installation went well but I don’t know how to use this. Every time I click on “export”, I have the message “Exporting from Non-Flash documents is not supported”. But it’s a flash document, and the animation is pretty basic as I just want to test. Here is a screenshot: https://dl.dropboxusercontent.com/u/4895444/flash2svg.jpg

    • Hi Sam,
      Yeah, the messaging on this alert is a little confusing.
      This is because the document is an HTML Canvas document, which doesn’t have any scripting support.
      You should create an Actionscript 3 document instead and copy/paste your layers across.

  13. Hey Tom,

    Is it possible to use the extension with Animate CC 2017? Can’t seem to get it installed. I use the extension a lot so I hope it works with the Animate upgrade!!

    Cheers, Basil

    • Yeah, it should work just the same in 2017, although I have noticed that after closing the plugin Illustrator sometimes crashes, I’ve logged a bug report with Adobe, so hopefully this will be fixed in the next minor release.

      If you are having trouble installing the plugin, try installing with ZXPInstaller.

    • Thanx! Unfortunately I still can’t get it installed. ZXP installer notes: “Installation failed because the extension is not compatible with the installed application”.

    • Hi! Finally got it installed but now I have the same issue as Linus..
      I’m using the latest Animate version.

      Hope there is a way to solve this!

  14. Hey there, I’m looking to use this for a project. I have it working in CC 2014. I also have CS6 installed, but it isn’t showing up in there for whatever reason.

    I just made a quick test file of a square symbol moving around using a Classic Tween, and it’s giving me this error:
    TypeError: svgXml.defs[0] is undefined

    Any thoughts? What I’m trying to do is to get a logo animation onto a website. Initially I’d done it in After Effects and exported through Photoshop as an animated GIF, but the aliased edges are looking bad. I assume this is my best alternative option? Thanks! Mike

    • Hi Mike,
      You can follow the instructions here to manually install in CS6:

      Note that the last version which supports CS6 is v3.36.

      As for the issue you’re having in CC 2014, you’d have to send me the FLA to have a look.

      I probably wouldn’t recommend adding a dependancy on SMIL (which may be deprecated sometime in the future) just for a logo. I’d probably lean towards a JS based solution based on whatever JS libraries you’re already using.

  15. Hi Tom,

    Loving the script but I have been asked to take some character animation and re purpose it for a website.

    I have a feeling its an issue with the timelines ( I got rid of the newish style tweens after reading your documentation) is it possible to email you the file and you can take a look at it? I’ve tried to get it to work for two days now and its almost working!



  16. Dear Tom,
    I am trying to use your plugin on Adobe Animate and works very well. i ask you if or where I can find a way, perhaps with jquery, to start the animation via javascript command in the html file.
    You suggest me know how can I do ?


    • Hi Antonio,
      Yeah, this is possible.
      Set “Begin Animation” to “on beginElement()”.
      Then call the beginElement method on the root svg element.
      If you were using jquery it’d be something like:

    • Dear Tom,
      thanks for the quick response!
      I had already tried a solution such as this, but the browser console gives me “Uncaught TypeError : Can not read property ‘ beginElement ‘ of undefined “…

    • Note that you can’t load the SVG into an image tag if you want to trigger it this way, as the element must be accessible in the same DOM as your JS.

      You can use the jquery method element.load(pathToSvg) to load an SVG into the same DOM.

      Check out the script on this page for an example:

    • thanks Tom, work perfectly!

  17. Hey Tom,

    I am trying to create an animated asset for website similar to this gif but using adobe animate cc.
    something like this;

    View post on imgur.com

    When I export using the svg. animation tool I get a broken svg animation
    with no resemblance to what i created in the timeline or the placement of elements placed onto the stage. I was wondering if this was because I was maybe using Adobe Animate CC instead of Flash CS6?

    Thanks for the plug in am excited to use it! 🙂

    • Adobe Animate should work with the plugin just fine. If you send me your FLA file I can take a look.

  18. I’ve tried to use this extension just to test some flash animation I had.
    It worked fine in most browsers. However, while trying in the Microsoft Edge, it just stopped to display the animation correctly. I suppose Microsoft did something with its new browser that don’t let svg animation to play fine. 😉

    • Hey Fernando,
      Both Internet Explorer and Edge have never supported SVG animations. The SVG should still display but if you want it to animate in Microsoft browsers, you’d have to use a JS-based polyfill.

Leave a Reply

Your email address will not be published.


© 2021 Thomas Byrne

Theme by Anders NorenUp ↑