The web has moved really fast in the last few years, which has given rise to a lot of new tools and techniques. One of my favorite tools for web design these days is the SVG element, which has many fun and relevant uses when building websites or apps. We'll go through live-coded examples of how to read SVG code, how to animate SVGs and their parts, and how to style SVGs with Sass. You'll leave this session with a passion for SVGs and the knowledge of how to use them today.

You can find the code samples I go through, here: Code Examples of Gist

Resources

If you'd like to learn even more about SVGs, there are tons of resources online. Here are a few that I used:

• https://css-tricks.com/using-svg/
• http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/
• http://www.iheni.com/just-how-accessible-is-svg/
• http://www.sitepoint.com/tips-accessible-svg/
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element
• https://developer.mozilla.org/en-US/docs/ApplyingSVGeffectstoHTML_content