We will also be looking at all and any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises (it’s called a workshop for a reason) and practical examples that can be taken and directly applied in real life projects.

You’ll learn how to:

• Creating and implementing SVG icon systems and styling them with CSS Variables.
• Cropping and scaling images using CSS, as well as using SVG. (Special focus on the SVG viewBox and preserveAspectRatio attributes and understanding how they work is included.)
• Styling and manipulating images and applying creative effects to images using CSS and SVG filters and blend modes.
• Creating non-rectangular layouts and components using clipping and masking in CSS and SVG.
• Taking user interactions to the next level by leveraging the flexibility and possibilities of SVG shapes in conjunction with CSS animations.

Attendees will be challenged with a series of creative exercises, implying all the above techniques to solve real-world design challenges — satisfaction guaranteed!

Whom is it for

Designers and front-end developers with at least basic knowledge of CSS and SVG. Please bring your laptop to the workshop.

---

Time & Location

This full-day workshop will be hosted at the Ivey Tangerine Leadership Centre and will take place before the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Monday, June 25th.

Schedule for Monday, June 25th

9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End, Networking

Save $100 when signing up for the conference and a workshop!