Better Adobe Illustrator SVG exports make GSAP animating easier

[PointC 8,599 Likes (Superhero)]

Hey fellow GreenSockers,

 

I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator.

 

I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI.

 

Tip 1: IDs
If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path.

 
Tip 2: Grouping
If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export.

 

You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually.

 

You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it.

 
Tip 3: Export Settings
Choose File –-> Export –-> Export As -->  then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings.

 

The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG.

 

The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all.

 

 

Here’s what you get with that export.

 

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500">
  <defs>
    <style>
      .cls-1 {
        fill: #333;
      }

      .cls-2 {
        fill: #ff0;
      }

      .cls-3 {
        fill: #7ac943;
      }

      .cls-4 {
        fill: #3fa9f5;
      }

      .cls-5 {
        fill: #ff931e;
      }

      .cls-6 {
        fill: none;
        stroke: #e6e6e6;
        stroke-miterlimit: 10;
        stroke-width: 4px;
      }
    </style>
  </defs>
   <g id="backgroundGroup">
    <rect id="backgroundGray" class="cls-1" width="1000" height="500"/>
  </g>
  <g id="masterGroup">
    <g id="nestedCircles">
      <circle class="cls-2" cx="650" cy="150" r="50"/>
      <circle class="cls-3" cx="650" cy="350" r="50"/>
      <circle class="cls-4" cx="850" cy="150" r="50"/>
      <circle class="cls-5" cx="850" cy="350" r="50"/>
    </g>
    <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/>
    <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/>
    <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/>
    <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/>
    <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/>
    <g id="straightLines">
      <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/>
      <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/>
      <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/>
    </g>
  </g>
</svg>

 

For styling I prefer to set it to Presentation Attributes.

 

 

 

Here’s what you get with that setting.

 

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500">
  <g id="backgroundGroup">
    <rect id="backgroundGray" width="1000" height="500" fill="#333"/>
  </g>
  <g id="masterGroup">
    <g id="nestedCircles">
      <circle cx="650" cy="150" r="50" fill="#ff0"/>
      <circle cx="650" cy="350" r="50" fill="#7ac943"/>
      <circle cx="850" cy="150" r="50" fill="#3fa9f5"/>
      <circle cx="850" cy="350" r="50" fill="#ff931e"/>
    </g>
    <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/>
    <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/>
    <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/>
    <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/>
    <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/>
    <g id="straightLines">
      <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/>
      <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/>
      <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/>
    </g>
  </g>
</svg>

The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary.

 

You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective.

 

The nested circles can be targeted like this:

tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15);

Or easily targeted as a group:

tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360});

 

 

See the Pen WzbOgQ by PointC (@PointC) on CodePen

 

Bottom line: Better artwork prep will make your GreenSock life easier.

 

Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be.

 

Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful.

 

Happy tweening.

 

[GreenSock 8,117 Likes (Superhero)]

Excellent tips as usual, Craig! Thanks for taking the time to write this up. 

[Sahil 2,541 Likes (Superhero)]

I think Craig's both posts should be merged together and posted as blog.

[OSUblake 9,990 Likes (Superhero)]

6 hours ago, PointC said:

 Tip 3: Export Settings
Choose File –-> Export –-> Export As -->  then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings.

 

I've seen you and other people mention that, but I couldn't figure it out. It opens up a window like a typical file save as, so I never hit the export button because it looked like it was just going to save it and then close the window. I didn't realize that pressing export button will open up another window.

 

I've always copied and pasted, which is fine for smaller graphics. It adds some underscores and numbers to the IDs, but the markup is formatted, and usually pretty easy to cleanup by hand. But now I won't have to do that, so thanks!

[PointC 8,599 Likes (Superhero)]

7 hours ago, OSUblake said:

I didn't realize that pressing export button will open up another window.

 

I know, right? For their SVG export and save process, Adobe has chosen the Russian nesting doll method. 

[Carl 9,066 Likes (Superhero)]

Great job, Craig!

Very helpful.

 

This is pretty much my approach and find it better than most.

 

I still find it a bit ridiculous to have to go through so many "file > export as" steps for each revision.

It would be much better if there was an option to either have:

• a window that shows live SVG code as you make changes
• a single button "show svg code"

maybe someday i'll have the patience to submit a request to the illustrator people

 

[MindGamer 32 Likes (Newbie)]

This is my workflow as well.

 

Although I do the same thing with Affinity Designer to avoid the Adobe tax. 

 

It works perfectly. Grouped layers in Designer get ID'd correctly in the SVG output. 

 

Some things don't output well in either Illustrator or Designer though when it comes to SVG output. Layer effects are dicey. Some fill types are quirky. Transform Matrix does odd things. Etc. The trick is to use just simple lines and fills without using more advanced vector features/effects.

 

 

 

 

[Visual-Q 586 Likes (Leader)]

If you're exporting a single object say a logo or something  you can export a selection directly using Export Selection. It doesn't give you all the formatting options though.

 

 

 

 

 

 

 

 

 

 

[Tasty Sites 65 Likes (Contributor)]

Thanks Craig!

Spent a lot of time trying to make this as smooth as possible and had an almost identical approach for layers and export.
Even had some crazy macro for
 
File –-> Export –-> Export As -->  then choose ‘Save as type: SVG’ 

When I discovered presentation attributes things got a lot cleaner... that cls was making me mad 




Adobe added the assets export panel that makes the process a little better, it exports (or should) a cleaner code for some more complex stuff
https://gyazo.com/1fc0451d9022da2e1c377d637e4fcb87

It can be a bit frustrating because the options for the export are hidden, but you just change them once 
https://gyazo.com/b9b2562d7280039bb66c924b4f23c8e2
 

Not sure anyone will use this but's also worth to know that you can just select all artwork, ctrl+c and paste it anywhere
https://gyazo.com/2f2c653b500d58df5f7caade7e9defc3
(edit: Probably that's the method @OSUblake mentioned  ^^')

A lot of crap attached to the last one, but it's handy when you just need to check smth simple.


Overall, the process is a pain, the assets export sometimes crashes (exports nothing - that can be frustrating if you aren't prepared for it ;D ) - need to restart illustrator after that, not sure if that's only my thing.

It still exports junk like some g id="Layer_2"


But a huge benefit of it is that you can have multiple SVGs in one document and control, group, change stuff you want to export

Happy Exporting
 

[PointC 8,599 Likes (Superhero)]

@Visual-Q @Tasty Sites @MindGamer - thanks for jumping in with extra info. It's always good to see other workflows and tips.

 

@Carl - I've tried to submit feature requests for SVG export changes. The feeling I get from Adobe is that their team thinks they know best and they don't pay much attention to user requests in this area. One new feature I've requested in the past is in Beta now - larger anchor points and control handles. Those tiny dots are almost impossible to grab sometimes. I've also requested a visual reference for path direction. Most 3D packages overlay a gradient on splines so you can easily see the direction and flip if necessary. Maybe a hollow dot at one end and filled dot at the other? How freaking hard would that be Adobe? As it is now, you have to add an arrowhead to an AI path to figure out which way it's going. 

 

Looks like Adobe may be short on cash though as I just received an email today that my fee is going up a few bucks a month after my next renewal.   

 

If anyone does want to submit a feature request or up-vote an existing request, you can do that here:

https://illustrator.uservoice.com/

[Visual-Q 586 Likes (Leader)]

Quote

The feeling I get from Adobe is that their team thinks they know best and they don't pay much attention to user requests in this area. 

 

Unfortunately Adobe seems to have fallen into the morass of a big company and beaurocracy. It's no doubt all fractured product teams each trying to protect their own little kingdom. They 've lost much of the agility required to innovate.

 

I had high hopes when they were touting XD that they would come out with a killer app and website design tool. But it's total meh. 

[Tasty Sites 65 Likes (Contributor)]

Yeah the path direction is like "yhhhhm did I pushed the reverse path direction - I need to export it out and see" (then do it like 3 more times with multiple paths) 
I lost all hope for Adobe when they shut down Edge Animate - they just aren't listening. I like illustrator but it's definitely not built for web usage.

Had hoped XD will change the game, but they just went from clunky beta to full paid app that isn't worth the price (yet?). 
Heard Affinity is worth to try - I'll definitely  check it out if they send me  "the email"
Would love to change software for something like Sketch - any windows alternatives besides Affinity? ;P 

 

Edited March 15, 2018 by Tasty Sites
Adobe Rage :D

[OSUblake 9,990 Likes (Superhero)]

On 3/12/2018 at 6:36 PM, Tasty Sites said:

I lost all hope for Adobe when they shut down Edge Animate - they just aren't listening. I like illustrator but it's definitely not built for web usage.

 

Haha! I lost all hope when Adobe replaced Fireworks with Edge Animate.

 

On 3/12/2018 at 6:36 PM, Tasty Sites said:

Heard Affinity is worth to try - I'll definitely  check it out if they send me  "the email"

 

I got an email within minutes. Check your junk folder. If that doesn't work, I would try using a country like the United States.

 

And there's always Inkscape. 

https://inkscape.org/en/

 

[francis789 6 Likes (Newbie)]

Quote

I lost all hope when Adobe replaced Fireworks with Edge Animate

I believe their purpose in buying MacroMedia was to get Fireworks out of the way so they could go on selling Illustrator+Photoshop to people who do web graphics and don't need the overpriced overcomplexified features.

[Visual-Q 586 Likes (Leader)]

Fireworks would have been a secondary consideration. Adobe bought Macromedia to get Flash primarily, though that didn't work out so well for them, and Dreamweaver which was more popular than GoLive. 

[greykrav 1 Likes (Newbie)]

I followed these directions,

I found that the above added even more extraneous group names, I understand how to morph from one path to another however I am still not understanding how to morph an entire svg, since it doesnt allow morphing from groups, and for aything other than simple shapes the above method results in creating groups that might contain many paths, how can we get a group that contains many paths to morph into another group that might also contain many paths?  

 

[GreenSock 8,117 Likes (Superhero)]

@greykrav do you have a reduced test case in codepen that you could share? 

 

I suppose if you have matching quantities of paths in the starting and ending groups, you could loop through them and map them to each other (morph each one). But if you're trying to animate entire groups with varying numbers of shapes/paths, it seems like a logically impossible thing to do without some serious hacking (like morphing extra shapes to blank shapes that you fabricate). 

 

If you have a bunch of <path> elements that all share the same fill/stroke styles, then you should be able to merge them all together into a single <path> so that you can just feed that into MorphSVGPlugin. Literally just concatenate their "d" values. Again, once I see a demo it'll be much easier for me to offer tailored solutions. 

[therddlr 6 Likes (Newbie)]

Thanks for this tips. But what about Artboards when export? Are you choosing Fit to Artboard? Because if doesn't then Illustrator will add transforms. 

[PointC 8,599 Likes (Superhero)]

You'll see in my example above that I used a background rectangle set to the same dimensions as the SVG (1000x500). Always start every AI --> SVG project with a background rectangle the same size as the SVG. You can delete it once you export, but it will keep everything sized properly and your coordinates will be where you expect. I talked a bit about this technique here: