SVG skills have fast become an essential part of any frontend developer's toolkit. SVG offers great support, resolution and scalable images that can reduce the need for multiple HTTP requests and be easily scaled to multiple viewports. Being able to work with SVG is a must, but if you're lagging behind then don't worry because we've got you covered.
In this video from Generate San Francisco in July, Sarah Drasner (opens in new tab) lays out her techniques for creating intricate SVG animations. As she points out in her talk, animation is a powerful way to convey meaning; you can use it to guide your users and to cut down on perceived wait time, and if built correctly it can be both useful and performant.
Basically if you're not using animation in your designs then you're not using the web to its full potential, and here she'll walk you through some creative techniques for manipulating vectors, from practical stuff such as data visualisation, through to stunning effects using morphing data paths, filters and the possibilities of combining techniques to create otherworldly effects.
If you have 45 minutes to spare then this is the perfect opportunity to pick up a grounding in SVG, and if you want to take things further then get yourself to an upcoming Generate conference to learn from some of the best in the business.
At Generate Sydney (opens in new tab) on 5 September, Val Head (opens in new tab) will be discussing the art of interface animations in her talk, Motion in design systems (opens in new tab). She'll be covering the importance of designing and choreographing your web animation efforts from the top down so as to create more effective animations that integrate into your design system, as well as the need for defining a motion language for your brand, in order to help your team develop a shared vision from which to work.
And that's not all; in short Val's talk will take you through all the things you need to make web animation work for you and your team. There's not long until Generate Sydney but there's still time to grab a ticket; book now (opens in new tab)!(opens in new tab)
Later in the month at Generate London (opens in new tab), Nadieh Bremer (opens in new tab)'s talk – SVG beyond mere shapes (opens in new tab) – will look at how you can take SVG to the next level in creating data visualisations, using gradients and filters to make data visualisations even more fun and engaging.
Generate London takes place 21-23 September, with a day of in-depth workshops preceding the two-day conference; book your tickets now (opens in new tab).