About Robyn
Former nuclear engineer now blurring the lines between work and play as a front end web developer, mentor and entrepreneur. Over the past few years she has snowboarded some of the world's most majestic mountains, travelled to over 23 countries, cultivated movements and mentored students. Her tools of choice are HTML5, CSS3, Sass, Rails, JavaScript and responsive design. She lives by challenging assumptions, improving process, and never settles. Now you can now find her working at Normative, Toronto based design firm that specializes in designing for the networked world.
Presentation
Next-level Animations and Effects with SVG
It can be a struggle to translate the details of a design vision into the browser. Creating bitmap images, icons, and graphics can be time consuming and result in inconsistency and difficulty with managing updates. Scalable vector graphics (SVGs) might be just what you're looking for. SVGs are now supported on every modern browser and mobile device, and usage is on the upswing, but most people only use them for icons. Most developers and designers don't realize how powerful and useful SVGs are. From scalable images to full-blown web applications, SVGs fit many needs. In this session: I will discuss the importance of understanding the capabilities of SVGs and how developers and designers can improve the quality of designs created in the browser. Through an understanding of SVG capabilities you will know how each layer of Illustrator is rendered through SVGs in the browser. You won't learn about SVG font icons; you WILL learn about how to efficiently export SVGs so your team won't curse your name. With SVGs you can render each design layer directly in the browser. Apply filters, lighting effects, gaussian blur, and animations, all directly through the use of this file format. Get exactly what you want in the browser. Plus a few of my favorite tips/tricks about SVG elements and attributes.
