Using some key features in Sketch and Illustrator, designers can export HTML-supported code to display an SVG (including shape tags like rectangle, circle and line). To find out how to animate SVGs without tinkering in CSS, take a look at this article by Jakob Jenkov: netm.ag/jenkov-278 (opens in new tab).
However, with CSS alone, SVGs not only respond to changes in scale, but to other CSS3 animation attributes. They transform (both in 2D and 3D) and transition effortlessly, without a designer or developer needing to export out new assets – each of the elements can be classed and called out individually by CSS. Sarah Drasner's motion-path solution on CSS-Tricks (netm.ag/drasner-278 (opens in new tab)) is worth a look.
These tools take the guesswork out of deciding out if an animation is too long or short, allowing designers and devs to focus instead on how animations inform the user's interaction, and delighting them with a bit of the unexpected.
To see effective SVGs in action, explore this short list of animated sites.
02. El Burro
The site for El Burro (www.elburro.no (opens in new tab)) includes delightful line art depicting tacos, sombreros and cacti. It uses Velocity.js, and animation is triggered by scrolling.
03. Katie Kolvacin
Sparkbox designer Katie Kolvacin has delightful vector animations all over her personal site (kovalc.in (opens in new tab)). All are built with SVGs, and are fun to watch.
This article was originally published in net magazine (opens in new tab) issue 278.