#btconf Munich, Germany 15 - 17 Jan 2018

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.

What will the workshop 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.

What hardware/software do you need?

Not much. Mainly your own laptop with preferred editor.

Who is the workshop for?

Developers and designers with (at least) basic knowledge of HTML and CSS. Not targeted at anyone with no technical background and/or who is not comfortable firing up and using a code editor. Note that some level of JavaScript knowledge is also required for workshops including an SVG animation session.

When and where is the workshop taking place?

On Monday, January 15th, from 10am (10:00) to 5pm (17:00). Our venue is the new office space of Microsoft Germany.

Event Partners