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
- How to style SVG icons like text and make them accessible
- How to make SVGs respond to geometry and physics
- How to make SVGs interactive with Vue and React
- How to manipulate SVGs for responsive uses
- How to use SVGs to make your site performant and engaging
