The SVG Coffee Cup

Like a cup of coffee on a busy morning, this workshop will kickstart & rocket up your SVG skillset and get you up and running using this powerful image (and document) format in your responsive Web design workflow. Using SVG, you can create accessible, semantic images, icons, and animated documents. In this workshop, we’ll go over everything you need to know to start using SVG today: design, export and optimization, implementation (icon systems, images, and interactive documents) and must-knows for when you start diving into animation.

Scalable Vector Graphics (SVG) are one of the most powerful tools in our front-end development arsenal. Using SVG, you can create accessible, semantic images, icons, and animated documents. But because of the nature of SVG as both an image format and a document format, it can sometimes be overwhelming because there are so many ways to do things that it can be hard to decide which to use when.

Though not new—SVG is more than 15 years old—browser support is still not optimal, and so SVG might—at first glance—seem not worth the trouble. But truth is, SVG is at its prime time, and it’s only getting better and better by the day. You can integrate and use SVG in your responsive web design and development workflows today, taking advantage of its many powerful features.

Need to support IE8 and older browsers? No problem! Did you know that for every way to use SVG (which are many!) you get at least two ways to provide fallback for non-supporting browsers? So you don’t need to worry about those older browsers at all. You can use SVg today, and gracefully fall back to non-SVG (images and even text) for browsers that fall behind.

In this workshop, we will cover:

For every topic covered, you will have at least one exercise to do, to ensure a strong grasp of the concepts. You will learn by doing.

By the end of the workshop, you can expect to walk away with a clear, solid understanding of how SVG works, how you can use it in your RWD workflows today, how you can cater for non-supporting browsers, how to animate SVG images, and a whole bunch of tips and tricks that will take your SVG skills to the next level, along with a PDF of the Workshop slides, and working exercise files to go over back at your home or office.



Past Workshop Feedback


The workshop was very useful. It took me weeks to get a basic understanding on how to use SVG in the first place and now, in only one day, I feel like I have finally understood not only how to use it but also to make it work across browsers, how to animate them and what certain features are.

Basically, I feel I got to know SVG inside-out and that’s exactly what I was looking for in this workshop.

Sara is not only a super friendly and kind person, she also knows exactly how to get a point across. Incredibly smart and encouraging, she made me feel smarter after I left the workshop with so many ideas, concepts and tools.

—Workshop Attendee, Smashing Conf Oxford 2016

I used svg before, but did not understand it completely, especially the viewBox. And now I animate the viewBox like nobody’s business ! Sara’s enthusiasm is contagious!

—Workshop Attendee, Smashing Oxford 2016

The workshop was very useful and extremely knowledge-packed and informative. It definitely met my expectations and I learned a ton about the SVG format. Thank you to Sara Soueidan and the Smashing team for providing a really fantastic resource for learning from someone who really knew her stuff. I had a great time!

—Workshop Attendee, Smashing Conf LA 2015

Sara’s sheer enthusiasm for SVG and the things you can build with it is utterly infectious! I had a great time and learnt lots of new things I had no idea you could do with SVG.

—Workshop Attendee, Smashing Conf LA 2015

Sara’s SVG Coffee Cup Workshop was such a delightful experience. She is very knowledgeable and passionate about this subject and was able to pack and organize so much useful content in one full-day hands-on practice. Also, the fact that this workshop was tailored not only for developers but for designers as well was really useful as everyone could also study SVG from a different perspective. I learned SVG previously but with Sara’s workshop I was able to learn so much more. Thank you, Sara, it was a great day!

—Anatolii Gorovyi — Full Stack Javascript Developer, TELUS Digital

Our entire team recently did a hands-on  SVG workshop with Sara and it was amazing! She is incredibly passionate about her craft, which really comes out in her teaching. She is very patient and tries to make sure everyone fully understands the concepts. If you are looking for a fun, energetic, and very knowledgable person to work with your team, I would highly recommend Sara!

—Wasim Hossain - Senior Architect - TELUS Digital

Target audience:

Developers and designers with (at least) basic knowledge of HTML and CSS. The SVG workshops are not targeted at anyone with no technical background and/or who is not comfortable firing up and using a code editor.

Workshop duration:

Full-day.
Request this workshop