Skip to main content
joechump
joechump
Inspiring
May 25, 2017
Question

Exporting Layered Vectors to Illustrator - It is possible (just)...

  • May 25, 2017
  • 3 replies
  • 3018 views

Ok, so it's taken me a while but I found a way. Was gutted to find that Animate CC only supports SVG export under legacy. SVGs do not support layers. Which makes them lame. Our workflow relies on assets created in Animate then exported as layers to illustrator and then brought into After Effects for animation.

So to find that I could no longer export layered FXG files to illustrator was a little upsetting... Ok I nearly cried.

Solution is not ideal but it works and may help anyone who wants to take a complex layered Animate file into Illustrator and beyond and retain all the layers. This requires you to still have Flash CS6 and Illustrator CS6 installed:

Step 1: Create and layer up your .fla file in Animate CC.

Step 2: Save the .fla file  (You do NOT need to export anything, just save the .fla)

Step 3: Open the .fla in Flash CS6. (Yes you can do this. Ignore warning. It won't support fancy new Animate features but basic vectors will be fine - experiment.)

Step 4: Export the file as an FXG

Step 5: Open the FXG in Illustrator CS6 (Illustrator CC has forgotten how to open FXG)

Step 6: Save as .ai

Ok, not that simple BUT better than having to re-layer everything in illustrator. Especially when it's a complex file.

Tips: Do not try to do this with files that contain text. Or outline (break apart) the text first.

I wish we just had an illustrator export from Animate. Would make life so much simpler.

(P.s. I was told by Adobe to use the publish option SWF Archive for getting stuff out to After Effects. However this is useless to us due to the way it exports each layer at full stage size and as a separate file. So imagine a character's head with tonnes of space around it - not good for animation. You can clip this off on import but you will then lose registration between layers making alignment of them impossible.)

This topic has been closed for replies.

3 replies

M
martham13480231
Inspiring
November 1, 2019

Please bring back FXG.
SVG is no solution for coworking with complex files in Flash and Illustrator.
Since years i've installed old cs6 version of Flash and Illustrator only for the FXG export / import.
Thanks!

    ceznov
    ceznov
    Inspiring
    May 23, 2019

    2019 and Adobe still haven't fixed that... although they gave us new option (Optimze for Character Animator) and it keeps the layers names, but exports with lots of errors in paths...

    joechump
    joechumpAuthor
    Inspiring
    May 23, 2019

    I've found a script for illustrator which can extract the Flash layers from the SVG and put them back into named layers again in Illustrator. It's very quick and easy to use but it doesn't solve the fact that the SVG export you're working from usually contains many inaccuracies and errors in paths as you say. In my opinion, the SVG export is not fit for purpose. It is now legacy so I'm hopeful that there may be a better option for vector export on its way but no progress seems to have been made on this for years. FXG was a good format. What we really need is a direct to Illustrator .ai export, perhaps using the old FXG as an engine for the conversion or fixing the problems with SVG export. Im still running a copy of CS6 just for getting hold of my vectors...

    ceznov
    ceznov
    Inspiring
    May 24, 2019

    Hi no it is perfectly fine to run CS6 and CC as far as I know. I paid for a license on each so I don't see why I can't use them and I haven't found any technical problems with doing so other than it will probably stop running on my Mac at some point...

    SVG to layers scripts are below. Place in the appropriate scripts folder for Illustrator. (Took me a while to find it but a quick Google will help) then run from the scripts menu in Illustrator.

    https://github.com/JcBernack/IllustratorScripts/archive/master.zip

    If you want more info then go to this page and scroll to the last answer – it's by the genius person who wrote the scripts:

    https://stackoverflow.com/questions/6745952/creating-illustrator-top-layers-in-svg/26478172#26478172?newreg=4158aab57869436f84a30842abb7124d

    My version of one of the above scripts is below which has no dialogue popups and just does the basic task instantly. (The scripts are great but I was finding the popups with settings were unnecessary for my purposes so stripped them out.)

    Use at your own risk, I'm not a coding expert but I don't think there's anything bad in here.

    Save as a .jsx file and place in appropriate Illustrator scripts folder:

    // check if document may be valid

        if (app.activeDocument.layers.length > 1) {

            throw new Error("Expected a document with just a single layer.");

        }

        #include "ConvertGroupsIntoLayers.jsx"

        var failLayer = app.activeDocument.layers[0];

        // convert the groups into actual layers

        var n = ConvertGroupsIntoLayers(failLayer, 0);

        // move them to the document

        var m = failLayer.layers.length;

        for (var i = failLayer.layers.length-1; i >= 0; i--) {

            failLayer.layers.move(failLayer.parent, ElementPlacement.PLACEATBEGINNING);

        }

        // remove the bad container layer

        failLayer.remove();


    Thanks for the script!

    I am not sure if I'm doing it right... So I export legacy image from Animate CC (.svg). Then I open it in Illustrator CC. I see one layer (Layer 1) with multiple Groups inside it. All the names are the same <Group>. After that I run the script you wrote. But an error pops up:

    Error 48: File or folder does not exist.

    Line: 9

    -> #include "ConvertGroupsIntoLayers.jsx"

    Colin Holgate
    Colin Holgate
    Inspiring
    May 26, 2017

    Although the SVG only has one layer, the layer is split into more than one group. See this message for a JavaScript routine to convert groups to layers:

    How to convert groups into layers by retaining groups names

    joechump
    joechumpAuthor
    Inspiring
    May 27, 2017

    Hi, thanks for this but I can't see that the layer names in Animate CC would carry across to the groups in the SVG file. Therefore layer names would be lost which, in a complex file - e.g. a character with 50 named layers, is very annoying. FXG used to retain layers and names through into Illustrator.

    So unless I'm missing something, this would have the same effect for my purposes as release to layers in illustrator which I can do already. I don't then want to have to rename all the layers. Unless I'm missing something?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices