Learn how to unleash the full power of SVG in your web designs with this in-depth talk from Generate San Francisco.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
Thank you for reading 5 articles this month* Join now for unlimited access
Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.
