Today we’re going to talk about SVG. More specifically, we're going to talk about how to animate SVG graphics with a really awesome little library called Snap.
I’m not sure how many of you work with SVG regularly, but just in case you’re unfamiliar, here’s a quick refresher on why SVG is a totally viable thing to use in your web apps.
SVG stands for Scalable Vector Graphic, and it is exactly that. It’s a 2-d, vector-based image format, and it opens up a lot of possibilities for interesting interaction design.
The first useful thing about SVG is that it’s resolution independent. It looks good at any size and will never appear fuzzy.
Because the images are defined as text elements and attributes, SVG images can be significantly smaller to download than you standard JPGs, PNGs or GIFs, and that opens a lot of doors for creating visually complex yet performant experiences for your users.
Also, if you need the same image in different sizes (like a logo or icons), you’re in luck! With SVG you can use the same file for all purposes, which cuts down on bandwidth. Along the same lines, you can repurpose the same image file with different colors and treatments, which negates the need for raster sprites with all the possible hover states and retina sizes, etc. You don’t need to do that anymore and it’s wonderful.
Like I just mentioned, SVGs are styleable. You can access and modify different properties for paths, shapes, gradients, opacity, filters, text, clipping masks – all those good things.
SVG is rendered to the page as markup, so all the text within the graphic is available to search engines and – as long as you configure it appropriately – it’s also available to assistive technologies like screen readers. Plus with the SVG 2.0 spec that’s coming out, we’ll have more universal support for tabindexes on SVG elements. I’m super excited about this because it opens all sorts of doors for exposing data via keyboard navigation.
So now that we know why we’re using SVG, the next question is: Why make the effort to animate things?
This is a question I’ve struggled with, having very conflicted opinions about when the extra code and computation for animations does or does not outweigh performance concerns. There’s a give-and-take with that decision-making process, but for now, I’d like to put performance hits on the backburner and just focus on the opportunities that animation offers to enhance the user experience. We'll go over the goals of animating on-screen elements, and then review a few best practices for animated interfaces.
It's about time
When you think about animations in interaction design, the key thing to keep in mind is that animations are time-based – and good animations smooth the transition of an element’s state in order to add meaning and value to the user's experience.
Things like physics, speed, and synchronization all come into play when designing animations. The more you can mimic true-to-life experiences, the more seamless and invisible the animation will be to your user – which is exactly what you want. The goal of animating an element is to make the screen function more like the real world. In real life, things don’t abruptly change state. An ice cube doesn’t go from solid to liquid in a split second. Rather, it melts, transitioning from one state to the next.
Without the transition an ice cube and a puddle of water seem like two completely different things – it’s the transition that ties them together. And the same goes for animated graphics and UI elements. When things change abruptly, your user gets lost. But by animating the change – for example, animating the scroll to an anchor link instead of directly jumping to it – then your user always knows how they came to be where they are, and context is preserved.
Here’s a basic example:
Facebook’s Jake Blakely recently wrote an awesome post on the “why” of animation design, some of which we’ve gone over already, but I’ll summarize again here:
- Animations create more fluid transitions, which feels more natural to the user.
- Animations can provide visual feedback or context to an interaction. An example would be a progress bar or loading icon – something to let the user know that an action is happening.
- Animations can guide the user’s attentions. Our eyes are naturally drawn to motion, and animations can help the user know what to do next. An example is a submit button that changes color once the form is complete, which catches the user’s attention and lets them know which action to take next.
- Animations can elicit an emotional response. This is the really interesting thing about effective animations – because animations that are well executed – animations that seem fluid and natural and mimic the real world in some way – have real-world effects on humans. Humans can be delighted or disappointed or frustrated, all thanks to your UI.
Now that we know why we should use SVG and why we should animate things, the next question is: Why Snap? Why should we use Snap.svg to animate our vector graphics?
The quick answer is: because it’s super easy.
But of course there’s a longer answer. Here’s some background on Snap:
Snap replaces Raphael
Snap is essentially the replacement for Raphael.js, the original go-to library for SVG animation. Raphael was really cool because it could support browsers as far back as IE6 with it’s VML fallback for environments that didn’t support SVG. Thankfully, most of us don’t need to support old IE anymore, so we can stop weighing down our apps with huge libraries that try to cater to every old IE quirk. Snap.svg supports IE9+, and it was written by the same guy, Dmitri Baranovskiy, who created Raphael back in the day. So it’s a very comprehensive solution.
Snap is powerful
The functionality goes far beyond what Raphael was able to do. Snap allows you to not only generate new SVGs, but it will actually work with existing SVGs that you created in Illustrator or Inkscape or some other way. It provides a robust API for manipulating SVG content, and the animations it supports are spectacular – smooth, performant, and they even work surprisingly well on mobile devices. The official Snap.svg website describes the animation API as “simple and intuitive” – but it actually is. A click is a click, a hover’s a hover, and
.animate() gets you into all sorts of fun.
Snap is free and open source
It’s also fairly lightweight. What's not to love?
How can you get started?
Here are some slides: