I am currently running workshops focusing on SVG and how to use it in a Responsive Web Design workflow. SVG is a fantastic asset in our workflows. It can and should be used more, and the aim of my workshops is to encourage and teach how to do just that.

[Sara’s Workshops] are concise, heavily practical, hands-on and very, very useful. The feedback from attendees has been tremendous — due to Sara’s engagement and knowledge but also the level of depth covered in the SVG workshop she’s been running with us at SmashingConf LA. Highly recommended — exclamation mark!

Vitaly Friedman, Editor in Chief, Smashing Magazine
(Workshop Client)
Workshop at Smashing Conf Oxford.
Running an SVG workshop at Smashing Conference in Oxford, UK. Photos by Marc Thiele.
Upcoming Workshops:
Event Location Date
Smashing Conf New York New York City, USA June 12th, 2017

About the SVG Workshop

Workshop Title

“Using SVG in a Responsive Web Design Workflow”

Workshop Description:

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:

  • How to embed SVG using one of the seven embedding techniques available. Learn the advantages and disadvantages of each technique, and make informed decision about which one to use based on your project’s requirements.
  • Learn how to provide fallback for non-supporting browsers. Not only can you fall back to raster images, but you can also provide accessible text fallbacks as well. Learn when and how each format is appropriate.
  • Get a clear overview of SVG syntax, and learn to differentiate between the important bits and the junk that can be cast away. We dive deep into the SVG viewBox attribute and its companion attributes and learn how it can help you troubleshoot and control SVG images, thus saving you a lot of time, and giving you finer control over how the image is scaled and displayed. You'll also learn how to animate the viewBox to create interactive images and impressive effects.
  • Using CSS, you can make SVGs respond to various viewport sizes. You will learn how to make SVG images and documents fluid across all browsers, and how you can use CSS Media Queries to make the contents of an SVG image adapt to different contexts and sizes.
  • SVGs are a great candidate for icon systems. For best performance, an SVG image sprite should be created to serve these icons. There is more than one way to create and use an SVG image sprite. We will go over the different spriting techniques and how to use them, learning the pros and cons of each one.
  • Though a one-day workshop does not suffice to cover everything about SVG animation with all of the above content, we will get an overview of everything you need to know before attempting to animate SVG: browser support, gotchas, tips, performance, tools, and some specific techniques including creating responsive animations.

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 is an encyclopedia. Be ready to take notes and do exercises like crazy. Don't be afraid to ask, you'll get the right answers from her.

—Workshop Attendee, Smashing Conf LA 2015

Invite Me To Run A Workshop At Your Event