Animating SVGs with the Keyshape App

by Lars Miller | Dec 11, 2018

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.

See the Pen Message Center Static – PNG by Lars Miller (@larsmiller) on CodePen.

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.

See the Pen Message Center Static by Lars Miller (@larsmiller) on CodePen.

Animating the SVGs

While SVGs have their own embedded animations (SMIL), it’s more limiting than CSS animations can offer. Since SVG files are actually code (instructions), they are written in a way that we can manipulate using javascript and CSS when displaying them in a browser. Here’s a simple example of animating the color of the icon on hover.

See the Pen Message Center Static by Lars Miller (@larsmiller) on CodePen.

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.)

See the Pen Message Center Static by Lars Miller (@larsmiller) on CodePen.

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.

Learn More

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.