The SVG Coffee Cup
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
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.
- 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.
This workshop does not dive into animating SVG images. We’ll only be covering the basics of behavior and general concepts, but this workshop is not for you if you’re needing to learn how to deep dive into SVG animation.
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
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