Static SVG Export change?

[simonm61623273]

Hi all,

I've inherited a piece of work from a guy who left, and I'm banging my head against it, hoping someone can help.

We've got a complicated (static) graphic with many layers and movie clips, which we then export to SVG. Our site then consumes this and the javascript makes various bits interactive and so on.

This has all worked fantastically in the past, most recently about 6 months ago. However now when I go to export the image, it's missing all the movie clip IDs from the svg file, which was how we hooked it all together in the site. So here's a small sample:

Old export:

<g id="sh_2_bronze_0_Layer0_0_FILL">
<path fill="#CB632F" stroke="none" d="
M 58.75 204.55
L 64.75 208.2 64.75 198.35 58.85 194.75 58.75 204.55
M 0.05 158.9
L 0 158.9 0 168.75 46.35 197 46.6 187.3 0.05 158.9 Z"/>
<g id="sh_2_bronze" transform="matrix( 1, 0, 0, 1, 935.55,290.2) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#sh_2_bronze_0_Layer0_0_FILL"/>
</g>

New export:

<g transform="matrix( 1, 0, 0, 1, 935.55,290.2) ">
<g id="Layer_1">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<g>
<g>
<path fill="#CB632F" stroke="none" d="
M 58.75 204.55
L 64.75 208.2 64.75 198.35 58.85 194.75 58.75 204.55
M 0.05 158.9
L 0 158.9 0 168.75 46.35 197 46.6 187.3 0.05 158.9 Z"/>

So it looks like the old one split up the transform and the path, then used the actual MC ID (sh_2_bronze in this case) to reference the latter. But in the new export they're merged together and the ID is nowhere to be found.

My question is has something changed to the way the svg's export, or did my now ex-colleague do something mysterious that I have missed that made it export in the old way?

Appreciate any heads up anyone can give.

Cheers,

Si

[kdmemory]

Hi Simon

Next to Old export: and New export: I can't see a thing! What did you insert there? Images? Or svg-xml code?

However - I tried to File -> Export -> Export Image (Legacy) .... something. Nothing big, the stage with 3 buttons with Instance names each. In the resulting svg-xml I get the names as Ids. Excerpt:

<g id="t2" transform="matrix( 1, 0, 0, 1, 197.35,113.5) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#t_2_0_Layer0_0_FILL"/>
</g>
</g>

id="t2" that's my Instance name on the Animate Stage.

Are all elements you want to get an Id in svg-xml for really symbols in Animate instantiated with a name on the stage?

Klaus

[kdmemory]

Another thought:

In Animate version 19.0 and 19.1 the method Use advanced layers is activated by default. When you export as SVG the layers also become elements of the svg-xml.

Maybe as you say, "complicated (static) graphic with many layers and movie clips", you should untick Use advanced layers in Advanced Document Settings.

Klaus

[simonm61623273]

Hi Klaus, thanks for your responses.

I just checked the Use advanced layers and that is unticked, our document obviously predates that setting so it stayed off, which is good.

Sorry yes my sample code looked fine in preview and then got eaten when I posted. Let me cobble together an image to show my issue.

So as you can see, I don't get the id in the XML like you did for your instance. The only thing I've got is the name of the first layer in the movie clip "Layer 1". After posting I started working on a work around by changing the names of my layers, which is great when they're a simple graphic, but when they're multiple nested movie clips it's getting confusing.

And yes to confirm, all the items I want an ID for in the SVG are actual movie clips in the FLA and have instance names.

I've tried both Image Legacy export and publish to SVG and get the same results, so I presume they trigger the same tool?

Many thanks,

Si

[kdmemory]

Hi Simon

the difference between Old and New is

1. OLD <g id="sh_2_bronze" transform="matrix(...)"> becomes NEW <g transform="matrix(...)"> (id is missing)
2. NEW <g id="Layer 1"> (is there perhaps an underscore like Layer_1 ? that would be a generic name for layers in Animate.)
3. OLD <use xlink:href="..."> is not present in NEW
4. there is in OLD a second <g id="sh_2_bronze"_0_Layer_0_FILL"/> (the layer thing is integrated here)
5. in NEW are two empty <g> tags

Otherwise it's more or less identical. When I compare that with my svg-xml (above) using AN v19.0, mine looks in principle like your OLD export. Your NEW looks garbled to me. Something's wrong there.

Haven't got an answer yet but keep on thinking ..

Klaus

[simonm61623273]

Hi Klaus, yeah that's pretty much what I'd identified in the differences, but still absolutely no idea why it's doing it.

I've made a few changes to my fla, namely renaming all the layer names on the main stage, and then I've tweaked our javascripts to hook into the changed svg, so basically the site all works fine.

However I'd still like to fix this, since our svg when from 1.7mb to 3.4mb with only a couple of minor graphical tweaks.

Thanks,

Si

[KramSurfer2]

For me the big issue is the movement of the transforms and the 'extra' layers in the file which my app needs to be adjusted for.

I unchecked the 'Use Advanced Layers' option and this output difference is the same.  Now that I see what it's doing, adding the layer name inside the movieclip, I like it.  I'll be adjusting my javascript code to utilize this.  I'm not seeing a big size difference in my content.

old output

<g id="level_1" transform="matrix( 1, 0, 0, 1, 162.3,10) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#level_1_0_Layer7_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#level_1_0_Layer6_0_FILL"/>
</g>

new output

<g id="level_1">
<g id="level_1An_" transform="matrix( 1, 0, 0, 1, 162.3,10) ">
<g id="interior">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#level_1_0_Layer7_0_FILL"/>
</g>
</g>
<g id="exterior">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#level_1_0_Layer6_0_FILL"/>
</g>
</g>

[simonm61623273]

Whilst it's crap you've got the same issue I'm kinda relieved it's not just me!

I've done pretty much the same thing as you to work around it. But I'd just like to know what changed. And if it's going to keep happening then I'm going to have to look at moving our graphics to another application.

If anyone comes up with an actual solution to restore the format I'd love to hear it, otherwise I'll keep chugging away with the work arounds.

[KramSurfer2]

I had previously reconstructed exports from Illustrator, using the SNAPSVG.js library, to make the export from illustrator more friendly to our web apps.   It was rearragning the SVG on 'upload' to the server.  I basically place the SVG on the page and copy the elements into a new SVG on the same page reorganizing it.  Then upload the new SVG markup to the server as text and to save as SVG.   This was great as I could control the svg's much more than the illustrator export.  I think you could do that easily with Jquery today.

I stopped doing this when I found Animate's SVG was so well constructed.

I may need to get back to it now as I can't rely 100% that these won't change.

Seeing the 'new' file type is easy by searching for "_An" in the id properties, veruses "_Fl"  There could be a parser for each type and **WHEN** adobe changes the export again to suite their workflow, not ours, one just needs to create a new "conversion parser."