Scalable Vector Graphics (SVGs) are the new big thing in web design today, and for a good reason. SVG is going to be one of the fundamentals of web design, and getting a grip of it and how to use it is becoming more important as its usefulness becomes more obvious every day.

With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances. In this workshop, Sara is going to give you a hands-on practical jump-start — she is going to go through an entire SVG workflow from creating, exporting and optimizing SVGs, to styling and animating them, making them responsive, tips for delivering performance-optimized SVGs, automating workflow, tools for making your SVG workflows better, and much, much more.

You'll learn:

• How SVGs can be styled, adjusted and manipulated with CSS,
• How they can be animated using CSS animations and transitions,
• How to responsify SVGs using CSS media queries
• Dive into coding and walk through it all the way from styling and animating to responsifying SVGs.
• You'll work with practical, everyday examples of SVGs
• See your SVGs working across a range of devices from mobile phones to desktops and everything in between.

You'll walk away with a full set of resources and example files too.

Required equipment and knowledge:

This workshop is for professional Web designers and developers and assumes that you’re already familiar with HTML5 and a little CSS. It‘s a good idea to bring your laptop to the workshop. Pencils, markers and paper will be supplied.