Why SVGs?
Designing for the modern web, we need images that look good on any screen size and at a high resolution. Don’t get me wrong, I love saving every PNG I make into three different size versions (and who doesn’t?), but SVG files offer some unique opportunities in the way of vector icons, illustrations, and as you’ll see here, animations. That’s right, you can animate SVG vector images with CSS! The temptation to try my hand at something unknown proved insurmountable, and I decided to try my hand at an SVG animation via CSS.
Remembering a static text transformation project saved from my college days, I realized that it would be a perfect place to start from. It’s a simple Illustrator file with 20 instances of a text transformation, making it a great candidate for copy/pasting each instance into a frame-by-frame animation. I should mention, I love Don Quixote.
Here’s the Finished SVG with CSS Animation!
Do you see over yonder, friend sancho?
Animating (and creating) a series of vector images with CSS ends up being fairly straight-forward. And best of all, you can even implement the small amount of necessary CSS code within the limitations of a builder like Squarespace, or WordPress.
Resources and Further Reading
Want to try your hand at making an SVG sprite animation yourself? Save some time and headache, and follow the resources I used, listed below. These were by far the best ones I found.
A great article on SVG Sprites from Smashing Magazine by Sarah Drasner (My main resource. I used “Technique #2”)
Some things the article doesn’t cover: cross browser compatibility (i.e.: <@keyframes> vs. <@-webkit-keyframes>), and the necessity of getting a file onto server space, linking to an existing one, or uploading one into WordPress. To address these steps, here are the resources I recommend checking out:
W3.org CSS Animations Documentation
CSS-Tricks – Keyframe Animation Syntax
If you’re in need of a source SVG file to get your animation going, you can simply use the source SVG from the Smashing Mag article.
Have fun creating! And let me know what you come up with!
Originally published March 27, 2015