SVG Export Settings for Custom CSS Animations | Adobe Illustrator
Knowing the right way to export an SVG (scalable vector graphics) file can be tricky, especially if your goal is to animate it later. When doing my own research on the subject, I quickly realized there weren’t a lot of resources to pull information from.
Cue the process of trial and error that totally doesn’t make you want to throw your laptop out the window.
After several attempts at getting Illustrator to generate the most optimally structured code for custom CSS animations, I finally found the settings that work best. Since information on this topic is scarce, I’m sharing what I’ve learned via a handy 13-step guide.
Heads Up!
This step-by-step guide is current with Adobe Illustrator Version 23.
To view which version of Illustrator you have, open your program and click the ‘Illustrator CC’ tab located in the top navigation menu. Then, click the ‘About Illustrator…’ option.
A window with some information should pop up. I’ve included a screenshot of what is displayed on mine and have circled the version number in red.
If you’re running the same version as me, great — you should be able to follow these steps with no problems! Going forward, this method should be compatible with most versions of Illustrator (unless Adobe releases changes that alter settings used here). If you’re running an older version and this guide works, let us know in the response section below.
Alright, now that we’ve got that squared away, let’s take a look at the steps!
The Step-By-Step Roadmap
When following this guide, pay extra attention to Step 8. There are two options available that are dependent on your preferences.
Step 1: Select all graphics on the artboard [shortcut keys: command ⌘ + a on Mac/ctrl + a on a PC]. To achieve this without using shortcut keys, find the ‘Select’ tab in the top navigation and choose the ‘All’ option.
Step 2: Click the ‘Object’ tab in the top navigation menu.
Step 3: Click ‘Expand Appearance’. This converts design elements like paths, lines, etc. into editable vector shapes. If this step is skipped, you may see some transparent gray lines or shapes in your image that are caused by a number of design elements that were made in Illustrator.
Step 4: Click the ‘File’ tab in the top navigation menu.
Step 5: Hover over the ‘Export’ option and click the ‘Export As’ option.
The following window will be displayed. Steps 6 through 9 are to be done in this window.
Step 6: Name your file and choose where you’d like to export the file.
Step 7: Find the ‘Format’ dropdown menu at the bottom of the window and select SVG (svg).
*Step 8: Check the ‘Use Artboard’ option below the Format dropdown menu if you wish to include only the graphics inside your artboard. If you wish to include graphics that extend outside of the artboard, leave this unchecked.
Step 9: Click the ‘Export’ button to continue.
The following window will be displayed. Steps 11 and 12 are to be done in this window.
Step 10: Adjust the settings as follows:
- Styling: Internal CSS
- Font: SVG
- Images: Embed
- Object IDs: Layer Names
- Decimal: 2
- Leave the ‘Minify’ and ‘Responsive’ checkboxes unchecked.
If checked, Illustrator would compress your code by removing any unnecessary characters like white spaces or new lines. This is not an ideal code structure to work with as you would have to separate the code yourself.
Step 11: Click the ‘OK’ button at the bottom right of the window.
Step 12: Locate the file from wherever you saved it. This was done in step 6. In my example screenshot you can see that my awesome.svg file was saved to my desktop.
Step 13: Right click the file and open it in your text editor.
And BAM, you now have the most optimal SVG code ready for custom CSS animations!
Achievement Unlocked
Now you can begin sifting through the code blocks to identify what is what.
To bring this article full circle, here are three workflow options for finding which part of the graphic belongs to which particular block of code:
Option 1
If your designer named their layers, then this process will be easy. With the file opened up in your editor, search for the layer name and then write a comment above it to label what it is for future reference.
Option 2
If your designer didn’t name their layers, you can name them yourself in Illustrator, save the file and then export. From here, you can follow through with the above paragraph’s comment/label workflow.
Option 3
If for whatever reason you’re working with unnamed layers, the labelling process will be a bit longer, but still doable. You can begin by commenting out code blocks and seeing which element was removed from the image. Once identified, uncomment the code block and label it with a comment above it. Do this for the rest of the file until everything is labeled.
After all of the code is labelled, identify which graphics you want to animate. Then, remove the commented labels for graphics that you will not be animating to reduce file size.
From there, you can start to write the custom CSS animations in between the style tags and add their respective class to the code as you test the animation and move along to the other graphics you want to animate.
Finished Animated SVG Example
Below I’ve included an example of a finished animated SVG that I did for a recent project at Envy Labs. Feel free to look at how it’s structured and play around with the different animated elements!
Did this article help solve a problem you were experiencing? Did you create a really awesome animated SVG? Let me know in the response section below!
Also, if you have any questions about something mentioned in this article that you want me to go more in-depth on, share them below! There may be other readers who have the same question and would benefit from having that dialogue documented here.
About the Author
Casey Ocampo is a Front-end Developer at Envy Labs, a data-driven web application consultancy with a focus on interactive training and visualization.
If you’re interested in hiring us or want to have a chat about your project, you can reach us by email at hello@envylabs.com. We’re happy to get acquainted and talk about your idea!
