Web Unleashed 2017
UX/UIWeb DevWork Better
  • 2017-09-25 00:00:00 2017-09-26 00:00:00 America/Toronto Web Unleashed 2017 Toronto FITC
  • Toronto
  • #WEBU17

Presentation

Overview

SVGs, with their potential for high-quality and performant graphics, have myriad uses on the web. By now, a lot of developers are aware of their practical uses, such as small and accessible icons, or illustrations. In this session, though, Sarah will push the envelope. She’ll cover a few practical things like styling SVG icons like typography, and then dive into the creative wilds of this graphic format built with math.

She’ll make it respond to physics, make it bounce and snap, stack it like legos for responsive, and make it interactive with front-end frameworks like Vue.js and React. In this session Sarah will push the boundaries of what’s possible while also thinking about cross-browser stability, and you’ll come out of it with a whole new world of tools in your front-end developer toolbox.

Objective

SVG is an incredibly flexible medium and we’re just starting to play with all of it’s amazing capabilities.

Target Audience

Any front-end developer/ UX developer that would like to expand their knowledge of graphics on the web and create engaging experiences.

Assumed Audience Knowledge

Basic CSS and JavaScript

Five Things Audience Members Will Learn

  1. How to style SVG icons like text and make them accessible
  2. How to make SVGs respond to geometry and physics
  3. How to make SVGs interactive with Vue and React
  4. How to manipulate SVGs for responsive uses
  5. How to use SVGs to make your site performant and engaging