Styling and Animating Scalable Vector Graphics with CSS

Scalable Vector Graphics, or SVGs, are the new big thing in web design today, and for a good reason. 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. Since SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web. In her talk Sara will demonstrate how SVGs can be styled with CSS, and how they can be animated using CSS animations and transitions. She will share her knowledge about the gotchas, bugs, and tips to help you get started with CSS and SVGs and to save you moments of frustration as you deal with SVGs using CSS. Sara will cover responsifying SVGs and using CSS media queries with them. Last but not least she will dive into code and walk through it all the way from styling and animating to responsifying SVGs. SARA SOUEIDAN Sara Soueidan is a freelance web developer from Lebanon. She is known in the CSS scene for her great demos and in-depth writing for A List Apart, Dev.Opera and Codrops. https://twitter.com/sarasoueidan http://sarasoueidan.com/
Length: 29:17
Views 20421 Likes: 346
Recorded on 2014-09-12 at CSS Conf EU
Look for other videos at CSS Conf EU.
Tweet this video