Skip to main content

The CSS & SVG Power Combo


Full-day workshop • June 25th
The workshop with the strongest punch of creativity. The CSS+SVG Power Combo is where you(r team) will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces, including:

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!

On the Web
On Twitter
Workshop includes
  • Snacks and drinks during the whole day
  • Tea and coffee
  • Lunch
  • Paper and pen/pencil

Sponsors & Partners