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
“Using SVG in a Responsive Web Design Workflow”
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:
viewBoxattribute 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
viewBoxto create interactive images and impressive effects.
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.
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