Unlock the secrets of working with SVG

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 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 on 5 September, Val Head will be discussing the art of interface animations in her talk, Motion in design systems. 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!

Later in the month at Generate London, Nadieh Bremer's talk – SVG beyond mere shapes – 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. 

She'll demonstrate how to implement the techniques using JavaScript, CSS, and D3.js, and show you how to create everything from rainbow, moving and dynamic SVG gradients based on data, to SVG filters with which to create glow, gooey, and fuzzy effects that brighten up any visual. If you haven't got beyond the basics of creating shapes with SVG then this session will really open your eyes to its possibilities.

Generate London takes place 21-23 September, with a day of in-depth workshops preceding the two-day conference; book your tickets now.