If you’ve ever worked with SVG you probably noticed the fact that the tools you have to use in the process are relatively unstable and can give you unpredictable results. There are a lot of small pitfalls which can cause you to do the same work over and over again, until you get desired results.
After I noticed that I spend more and more time doing the things that easily could have been avoided, I decided to document the process highlighting the key points to keep in mind while working with SVG. So, this post therefore serves as a reference for me, and possibly, can be of use for somebody else.
Creating the Artwork in Adobe Illustrator
It all starts in Adobe Illustrator, where I create the artwork. For me this process is completely intuitive, starting just from a small idea (a face, a weird animal, an owl) and gradually adding more elements, shapes, colors and other things as I draw.
Tip1. Fit to Artwork Bounds
As soon as the illustration is complete, the first problem shows up: artboard size issues. Countless times I’ve put SVG image on a page, gave it specific width and height and then found out that it was being displayed at a size smaller or bigger than what I specified. It is caused by an amount of white space inside the SVG viewport. Now, because I’m not a professional illustrator, my drawings are usually pretty simple, so in order to deal with this issue I simply go to Object → Artboards and select an option Fit to Artwork Bounds . That makes my artboard just big enough to fit the drawing inside of it.
Tip2. Name and Group Each Layer
Fairly often I get carried away by the illustration and absolutely forget about the project structure. So, second small tip here would be to name your layers, because the layer names are going to be converted into id’s and class names for the generated SVG. It doesn’t have to be a complex system with lots of naming rules, just simple names to tell elements and groups apart from each other.
Saving the Artwork in SVG Format
At this point everything is ready to transform my drawing into SVG document. Adobe Illustrator natively supports saving vector images to fully editable SVG format, so it’s not some kind of temporary export option. But I prefer to simply copy generated SVG code into my text editor and work with it there. To do this I go to File → SaveAs and in the format dropdown at the bottom select SVG . Next, in the dialog stuffed with tons of options that pops up, I generally keep everything by default, because I really don’t know what all those options mean, but here’s a couple moments to keep an eye on:
- SVG Profile: SVG 1.1
- Tick off the checkbox Preserve Illustrator Editing Capabilities
Finally, I click the button SVG Code… to see the actual code, and copy it into my editor.
Tip3. Fix _1_ and Id’s in the SVG Code
You probably noticed Illustrator’s excellent naming convention for the generated SVG code.
Yeah, those annoying underscores are a pain in the butt😁. But I fix that using find in Sublime (Ctrl + H) and replace _1_ to nothing. In the same way I prefer to replace all id’s in the SVG to classes. However, one thing to remember here:
Note: you can’t reference gradients and other dynamic fills with classes.
So, I manually go and change those to ids.
Tip4. Remove Hidden Layers with Raster Images
Sometimes in Illustrator I use raster image as a background for outlining. And it’s no big deal, when I’m done with the drawing I simply make it a hidden layer and forget about it. But those images still show up in the generated SVG code, so I remove them manually. They’re usually not that hard to notice because of their distinct BLOB-like view in the document.
Putting SVG Image into HTML File
I’ve created a blank project which I just copy, rename the folder and it’s basically ready for the next steps. And the next step is to inline SVG code into html page. Of course there’s multiple variants of including your SVGs in the page, but I chose inline variant because:
- It’s more performant
- It saves you another HTTP-request
- You can attach event handlers to everything
Tip5. Put SVGs Inside a Container
I always try to put my SVGs inside of a containing element, in that way it can be easily centered, resized, and overall it’s much easier to work with it.
Animating SVG Parts
Let’s look at the example of simple animation using one of my recent pens: Owlymug.
In this pen I animate the wings of an owl with the help of simple CSS transform:
rotate. Firstly, I identify the part of the image that needs to be animated. In our case it’s the groups with the classes RightWing and LeftWing .
As this is a very simple animation, I can jump right into the browser and apply transform: rotate(90deg) right there, and check out the results of transformation. Usually by default it’s going to rotate itself by exact middle of the element, and in most cases this is what I need, but in this case I need to transform the origin of the rotation. With a bit of tweaking and experimenting, I see that for the left wing transform-origin should be 68% 22% , and for the right wing 34% 22% .
Ok, now I simply add the animation rule to the elements, name the animations shake-left-wing and shake-right-wing respectively, set the animation duration to 2s and specify that it’s going to be repeating infinitely .
After that, I only need to create @keyframes rule for each animation, specifying the rotation degrees.
That’s it! Our happy owl animation is now complete.
Hopefully, this post can save somebody, who is an absolute beginner in animations, some time in the future. Additionally, I now have a reference in case I forget something after not working with animations for a while.
Of course, I might have missed a few tips that can make the process even simpler, so If you know any, please feel free to share them in the comments below. Cheers!