Animating SVGs with the Keyshape App
Using SVGs on web pages is an old idea that’s becoming newer and better with the rise of CSS animations. Let’s dive into what they are, how to go about animating SVGs, and the serious advantages in both quality and small file size. I’ll forgo explaining why one might want animations on their page(s).
Bitmap vs Vector
Before I dive into how/why on animation, I feel it’s necessary to show that the difference between bitmaps (PNGs, JPGs, GIFs) and vector files (SVG, AI, EPS) is that bitmaps store what each pixel looks like, while vectors are instructions sent to the browser (or another program) on how to draw that design. On the fly. It’s amazing.
Let’s take a look at a mobile phone ringing icon that our designer Dillan created for a recent project. Now, if I were to export this icon as a PNG, it would work… most of the time. What if we want it at a larger size or different color? No, PNG won’t allow us to change any of that. We cannot access the individual pixels in a PNG, so we cannot change the color. We can make the image bigger, but with a serious loss in quality. When you double a bitmap, what were the instructions for one pixel now become the instructions for 4 pixels (a bigger square) and well… it looks terrible.
As a contrast, in this pane, you can see that with SVG, we can increase the size of the image as well as change the color with no loss in quality. File size? The PNG comes in at 2k and the SVG at 1k. It might not seem like much, but when you get into more complex images, the gains can be much greater.
Animating the SVGs
Now, using a SWEET program Keyshape App, I can manipulate all the SVG elements using all the wonderful CSS animations possible using keyframes, transforms, opacities, blending, scale, skew… all that good stuff. This is the result of that at a mere 4k!!! That’s no movie or GIF, that’s lines being drawn and manipulated right on your screen. (Click “rerun” if you don’t see the animation right away.)
Why not gif?
Sometimes you have to use GIFs… like the featured image on this post. Social media posts and many other platforms won’t allow you to use SVGs, but on a website, anything goes. The big advantage is file size, however. Our above animation is 4k, no matter if that image is 20px or 2000px. The file size for our 800px X 400px featured image? 156k. 4k vs 156k. That’s why SVG over GIF.
If you want to learn more about how to animate SVGs with the Keyshape App, I highly recommend checking out Juan at DesignForVentures.co‘s tutorials. If you have any experience with any timeline-based software (audio/video editing), it’ll come quite naturally.