Prepare SVG Files for the Web and CSS Optimization
Having unique avatars is a great way to personalize your website and make it more fun for your users. Creating your own SVG files is actually quite easy albeit a bit labor-intensive, but so worth it. I’m going to show you step by step (using Illustrator) how I clean up the files, organize the layers, and finally save the SVG file to be optimized for the web, all of this creates clean code that can be easily customized with CSS.
You can see the avatars here.
Disclaimer — this is not a how-to-use Illustrator article, I’m assuming you have at least a basic understanding of the program at this point.
The first thing you will need is a vector graphic, I created mine in Illustrator. Once you have your design the way you want it you’re ready to clean it up and get it ready to be saved as an SVG.
With your file open go to “window” then click “layers” to open the layers panel.
With your layers panel open click the arrow to view all layers.
Now you can see all the different layers in your file.
It’s time to start cleaning up your layers. This will help to shrink your file size considerably and make it easier for you or your developer to change colors with CSS.
I start with “select all”, this shows the outlines and overlaps of all my layers. You want to get rid of any overlaps.
Start by selecting the color you want to clean up first. Here I’m starting with the skin.
Select only one layer (I’m selecting the face) this will set the color in the color picker.
Now “select all”, then go to your tools and select the “shape builder tool”. This will allow you to drag your cursor across your shapes merging the layers together and reducing the number of layers you have.
This is the clean-up part, it can be tedious but it’s worth it. Continue doing this for all layers until each one is clean. You may end up with a few layers of the same color because the color is separated by another color in the design, don’t worry about this. It can still be grouped with the rest of the same color.
You will also want to convert any strokes to outlines, this will also enable you to merge them.
It’s also a good idea to smooth out lines using the “smooth” tool, this will remove any unnecessary anchor points on your lines. Just make sure not to overdo it.
Once you’ve cleaned up all of your overlapping layers you can begin grouping layers and naming them.
Keep your names short and relevant.
I also like to order my groups based on location; for example, I put hair on top, then eyebrows, and continue moving down the face to the shirt… you get the idea.
Remember when you group your layers the group name will be an ‘id’ and the layer name will be a ‘class’ in CSS. If you think of it in terms of the code it may help you to organize your layers better.
Finally, now we are ready to save the file as an SVG.
The first thing you need to do is “fit the artboard” to your design.
Next, go to “file” then “export” “export for screens”.
This will open a pop-up where you will see a thumbnail of your design, this is where you will name your SVG.
Then select SVG under formats.
Right above the SVG is a settings wheel, open and it will give you options for saving. Click on SVG, make sure to follow the formatting below.
When your file is saved you can check in your finder to see how large the file is. The more you clean up your lines and merge your layers, the smaller your file will be.
I have found that by saving SVG files this way I can get them as small as I need them. When comparing them to using SVG compression software I am always within 0–2% of what could be achieved with SVG compression software.
Check out the following links to my avatars and download the project to use them on your website!
