adobe animate export svg options

The difference between expoting SVG from Adobe animate and Illustrator

I normally create my vector graphics in Adobe Animate, just because since University (back when it was called Flash) it’s what I’ve used the most, even though I know Illustrator is the more popular tool for vector graphics. 

You can export as SVG from both, but weirdly they’re different. Here’s a side-by-side-screenshot of the code that is generated of an image with lots of repeating circles.

svgs from adobe animate and illustrator

With Illustrator being the more popular tool for creating SVGs I thought it would be superior. The export controls you get certainly give you more flexibility (a screenshot of my chosen options is below). But there’s something cool that Adobe Animate does. Even though it looks longer in the screenshot, Animate has the shortest code for the same graphic in this case (477 bytes shorter).

illustrator svg export settings

It makes the code shorter by defining the repeating object once, then referencing it every time it’s used. Whereas Illustrator declares each identical object separately.

Even running it through SVGOMG, which compresses and optimises SVG files doesn’t improve this.

I’m not going to start caring too much about these extra lines in my SVGs, because it’s going to be a very small filesize either way (compared to PNG & JPG anyway). But I just thought it was worth noting the difference.