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

[joechump]

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.)

[Colin Holgate]

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]

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?

[ceznov]

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]

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]

Could you show me where I can find the script?

BTW. isn't it forbidden to use both CC and CS6 apps?

[joechump]

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...

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();

[ceznov]

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"

[ceznov]

Ok, I used the original script and it worked. Unfortunately I didn't understand your explanation. I thought that somehow Illustrator is able to bring back the original layer names even when I don't use the "Optimize for Character Animator" option. But that doesn't work obviously Well, SVG is crap. It doesn't bring the layers as it should, loses some details, changes some layer names... terrible. The CS6 fix is the only way I guess...

Although I'm also looking for some other way to fix it, but with no luck at the moment. Since we can easily export all the layers from Animte as single SWF's, I thought it may be possible to convert those SWF's into AI or EPS files. And it is indeed possible. For example with ReaConverter. But unfortunately I cannot find a way to easily merge those AI or EPS files into one, so that I have all those layers in one project with the same names as in Animate... but maybe there is another way with this conversion idea that I haven't figure out yet...

[joechump]

My bad. The script would only work with the other file ConvertGroupsIntoLayers.jsx present as it's trying to include it. Once you have installed the other scripts from the link then this script should work as the other jsx will be there but it's basically just a simpler version of the original fix script. It works perfectly for me and keeps the layer names the same. However, it won't fix the rotten svg export you are working from and to be honest – there's got to be an easier way than this Adobe? I still feel that Animate has some of the best and simplest vector creation tools but its export options for vectors are dire and constantly let it down. 

[ceznov]

At the moment it turned out that it's not that easy to convert SWF into SVG. I found a script to merge mutliple SVG into one. But without proper conversion it's still useless

[martham13480231]

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!