Designing for Code — SVGs
Setting up SVGs intended for animation and interaction design.
Intro 👋
If you’re looking to add visual interest or interactivity to a website or webapp, SVGs are a fantastic option for visuals. Since they’re vector-based, you get unlimited scalability and clarity compared to raster and bitmap images. And because they’re made up of code, you can manipulate every single shape with CSS — add animations, interactions, or dynamically change the color scheme—something that you cannot do with icon fonts. However, as with any method of coding, there are many things to watch out for to avoid making writing or maintaining code any harder than it has to be. This article aims to cover how that applies to creating SVGs that are intended to be animated.
Who is this article for?
Web, UX, or UI designers who want to create animated SVG graphics (icons, illustrations, etc.) for the web.
What will you get out of this article?
A step-by-step guide on what to do with your SVG graphics after you’ve designed them and before you start animating them with code. Nothing in this guide is required to add animations to SVGs. But it will make your life (or the life of whoever is adding the animations) much much easier, as well as avoid creating potential bugs or code conflicts.
Why SVGs?
Need some selling points to your manager or developer on why you should SVGs? I’ve got a shortlist here.
Step By Step Instructions 📝
If you haven’t created your graphic, yet, go ahead and read through section 2 (Clean up your design), as some of those steps can be done during the design phase to save you time. I personally recommend working in Sketch, especially if you’re creating icons, because it’s specifically intended for creating web graphics. Some of the steps in this guide are also easier to perform in Sketch. But if you’re making more complex illustrations, you may find it better to design in Illustrator. If you’re using a design tool other than Sketch or Illustrator, you’re probably fine, but may run into questions not anticipated in this guide. You can also try opening your design in Sketch if saved as an SVG.
Note: These steps are simply advisories for best practices. They are not required. Furthermore, if you’re not animating individual layers inside the SVG — for eample, basic hover states such as scale or rotate that would also work on a JPEG or PNG — this guide is not necessary and will have no affect on your animation.
1 ) Clean up your design
This section focuses on things you can do in your design software to help clean things up and avoid issues later on.
Setup your file
Sketch: If you’re working in Sketch, either create a new artboard with the graphic you want to export or create a new file with just the graphic. Either way, make sure you keep a copy of the original graphic in case you want to change the design later.
Illustrator: If you’re working in Illustrator, it’s best to make sure the only layers in your file are part of the graphic you plan to export. Keep a copy of the original file in case you want to change the design later.
Vectorize strokes
Web browsers sometimes have trouble rendering strokes that are aligned to the inside or outside of their shapes. I recommend either re-constructing those lines to be center-aligned or flattening them to solid shapes to avoid potential rendering issues in the browser. Or, to make things even simpler, any strokes that you do not plan to animate, go ahead and flatten to filled shapes just to be safe. If you do leave strokes aligned to the inside or outside, make sure you do thorough browser testing once it’s been exported to SVG. Tip: Check out this great tutorial from CSS Tricks on SVG line animation.
Outline text
Rendering live text inside an SVG is possible, but requires the font being made available in the web page where the SVG is being displayed. So unless you need the text to be actual text and you’re able to serve up the font file it needs, you’ll need to convert it to outlines.
Add a container
If you select your artboard and export it as an SVG, design software usually does not honor empty white space and crops it out. So if your graphic needs white space around it, add a transparent rectangle in the back to enforce a bounding box.
Round to nearest whole pixel
This is more important the smaller your graphic is. Keep in mind that you’re designing for the screen, which means each pixel is a perfect sqaure. If you have any straight lines or edges that don’t sit exactly between pixel grid lines, that’s going to result in a fuzzy line, especially on screens with lower pixel density (non-retina). Your graphics will look more crispy and clear across all devices if they’re pixel-perfect, especially if adding animation causes your viewer to pay more attention to the deails. If your design software offers a pixel preview, you can use that to test the results.
Check rounded corners
Let’s say you have a rectangle that’s 10px tall with rounded corners set all the way up to 100px. A radius more than a 5px (half the rectangle’s height) won’t actually look any different, just yet. But if the height on the rectangle increases once it’s been animated, the border radius will also grow if it can. So just keep in mind that if you want your border radius to stay fixed, make sure it’s set to exactly the size you want before exporting your SVG. As of this writing, Sketch v 50.2 automatically reduces the border radius on a shape if you apply a radius beyond what it’s capable of rendering, unless you override it in the text field. So if you’re using Sketch, you may be able to ignore this step entirely. Tip: You can also override a border radius with CSS.
Check for raster images
If you have any raster or bitmap images inside your graphic, those can be embedded or linked. Embedded images get converted to Base64 code when saved/exported. Linked images (an option in Adobe Illustrator) requires that you store the image outside of the SVG somewhere, which can allow the image to be updated independently of the SVG code. If you’re working with a developer, just be sure to check in with them and decide which method is most appropriate for your situation.
Limit groups
Using groups can be helpful in keeping your design files organized and easy to edit later. But when applying animation, simplifying your layer structure can help you focus on just the few parts of your graphic you want to animate. Additionally, for every group in your file, there are 2 extra lines of SVG code. So keep things simple by reducing the number of groups to the essentials that you plan on animating.
Limit layer names
When your SVG gets exported, all group and layer names will be converted to id tags. And chances are you have a ton of layers with pretty generic names. For example if you duplicated an oval multiple times, you may have something like “Oval 1”, “Oval 1 Copy”, “Oval 1 Copy 2”, etc…Most likely, those names aren’t going to be helpful to you at all and will be a nightmare to get rid of in the code. I’ll explain more on why they would need to be removed under Clean up ID tags, down below. For now, here’s what you can do in your design file to help make the code far more manageable:
Imagine all the layer names in your file disappeared and you only restored the most important layer names needed in order to navigate your file for applying the animations you have in mind. Which ones would you chose? Rename all non-essential layers to the same thing. For the purposes of this exercise, rename these layers to “#remove#” just because it’s super unique. This will save you a ton of time, later. And if you’re using Sketch, you can make this even faster by using the Rename It plugin for bulk renaming layers in a flash!
Separate responsive layers
I’ll go more in depth on responsive SVGs in another article. But here’s the gist: to show different versions of your graphic under different situations, like screen sizes or hover states, separate those versions into different top-level groups in your design file. For example, your main groups might be named “Mobile”, “Tablet”, and “Desktop” or “Default” and “Hover”.
Export/Save your SVG
You’ve cleaned up your design file! Good job 👏. It’s time to export it.
Sketch: If you’re using Sketch, select either your graphic or the artboard it’s sitting on and use Sketch’s Export menu in the bottom-right of the window. Your settings should look like the image, below. Click the “Export…” button and select where you want it to be saved. That’s it!
Illustrator: If you’re using Illustrator, make sure your file is clear of anything you don’t want exported. Select File → Export… from the main menu. After you select where you want it to be saved and hit Export, you’ll see an additional menu:
Here are my recommended settings if you’re going to be animating the SVG. If you want to learn more about these settings, Adobe has the details here. When you’re done, hit OK and you’re all set.
Test your SVG
Now that your SVG has been exported, open it in your web browser to make sure everything looks good. If you made responsive layers, it’s going to look a little funky for the moment since they’re all going to overlap.
2) Clean up the code
You’ve been a real trooper, so far. You did a bunch of work cleaning up your design file and got it exported to a slick SVG that’s almost ready to be animated. Hang in there! There’s not too much more to go!
Open the SVG you just exported in a code editor. If you don’t have one, check out Atom, which is what I like to use. We’ll walk through how you can clean up the SVG code so that when you get started with adding animation code, you’ll have a clean and tidy file that’s easier to navigate.
Tip: After each step, open the SVG in your web browser to make sure everything still looks okay just in case something goes wrong. If you made responsive layers, go ahead and comment out the non-default layers so you can see what your graphic should look like more clearly.
Remove unnecessary tags
Design software tends to add extra code that you won’t need in your file. Here are some things to look for that can be deleted:
XML tags:
<?xml version="1.0" encoding="UTF-8"?>Auto-generated comments, titles, and description tags:
<! — Generator: Sketch — http://www.bohemiancoding.com/sketch -->
<title>Artboard</title>
<desc>Created with Sketch.</desc>Clean up ID tags
All group and layer names appear as id tags in the code. To avoid CSS conflicts, IDs should be converted to classes or simply removed if they’re not going to be used. For reference, these are examples of a circle with an id vs. class vs. comment:
<circle id="Dot" fill="#D8D8D8" cx="20" cy="10" r="41"></circle><circle class="Dot" fill="#D8D8D8" cx="20" cy="10" r="41"></circle><!-- Dot -->
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
Back in the Limit Layer Names step, I recommened that you rename a bunch of layers in your design file to “#remove#”. If you did that, you can now bulk remove the IDs those turned into by using your code editor’s find and replace tool. In the find field, type id="#remove#" and leave the replace field blank. If picked a different layer name, then type between the parentheses instead.
Now that all the extraneous IDs are gone, you can focus on the IDs that are left. Again, these should be converted to classes unless you have a specific reason to use an ID. To change each ID to a class, use find and replace again, but find id= and replace with class=. Or you can manually change them if you want to leave some as IDs. I recommend going one step further to make sure your ID and Class names are unique. I like using something relative to the specific SVG, like this:
<svg id="SVG-logo">
<g class="SVG-logo-top">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
<g class="SVG-logo-bottom">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
</svg>That way I know for sure it’s not going to conflict with anything else in the code where the SVG might be used.
Another handy thing you can to do make your code easier to navigate is to add comments above main sections of your SVG, like above groups. For example:
<svg id="SVG-logo">
<!-- Top -->
<g class="SVG-logo-top">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
<!-- Bottom -->
<g class="SVG-logo-bottom">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
</svg>FYI: Those “<g>” tags in your code are your layer groups.
Organize responsive versions
If you made responsive layer groups in your design file, then you’re going to want to add some CSS to your SVG by creating a “style” tag inside your SVG:
<svg id="SVG-logo">
<style>
// Add your responsive CSS here
</style>
<g class="mobile">…</g>
<g class="tablet">…</g>
<g class="desktop">…</g>
</svg>For now, just add some basic CSS to hide anything that shouldn’t show by default. Then you’ll be ready to preview your file in a web browser and make sure things are looking good. More on responsive SVGs coming soon. Stay tuned.
Save your file!
Save your file and give yourself 2 big pats on the back because you just completed a ton of really picky file prep!
START ANIMATING!
Now that your SVG is exported and cleaned, the real fun starts…adding animation! If you’re interested in another how-to with some tips, tricks, and examples, stay tuned. I’ll be posting another article on SVG animation, where we’ll delve into applying CSS animation into our beauiful new vector graphics. Get excited.
