CLOSE ✕
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

SVG Summit 2017

SVG Summit is a virtual conference on designing for the web

February 15, 2017
Starts at 10 ET / 9 C, New session top of every hour
On your desktop or mobile device

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Participants receive live online training + video

Registration grants you access to the live event

Interaction with the instructor and fellow attendees

Deep dive sessions save time leveling up skills

Online conference means no travel hassle

Real time Q&A with responsive web design experts

Post-event video to watch whenever you want

SPEAKERS

Chris Coyier
Sarah Drasner
Amelia Bellamy-Royds
Dudley Storey
Clark Wimberly
Kevin Ball

Schedule
February 15, 2017

Creating Dynamic SVG with CSS Variables

by Dudley Storey

10 AM ET / 9 AM CT

Sass variables have been used for the last decade to create healthy centralized controls in stylesheets. Whereas CSS variables are the W3C standard of the same, natively understood in all modern browsers: overlapping in some areas with preprocessor variables, and exceeding them in others.

These new custom properties expose exciting ways to control, transform and animate all aspects of web page development, including SVG elements.

This presentation will include an introduction to CSS variables, showing how they can be used to empower your SVG drawings, scripting, and animation.

SVG & Text: Tips, Tricks & Gotchas

by Amelia Bellamy-Royds

11AM ET / 10 AM CT

You may know that SVG has a text element, but do you know what to do with it? Why would you use text in SVG instead of HTML? Why would you use SVG text instead of converting text to paths in Illustrator? And if you do use SVG text, how do you make it behave?

Text is one of the more complex parts of the SVG specification—even without the new layout options that are proposed in SVG2. Unfortunately, text is also one of the most buggy parts of SVG implementations in web browsers.

In this session, we'll do a lot of live coding and dev tools deep-diving to explore what can (and can't) be done with text inside SVG. We'll build up a couple of simple examples from scratch, then deconstruct some more complicated demos. Expect lots of warnings about all the quirky details—and bugs—you might stumble over.

In this session, you will learn:

  • How SVG text is different from CSS-styled HTML text and also how it's similar
  • Why real text is preferable to text-shaped paths and why converting to paths is nonetheless sometimes still necessary
  • When to use each of the three text-containing elements in SVG and when to just use HTML
  • Where your text will end up on screen with different attribute combinations—and how to get it where you want it!
  • What the worst bugs are and how to work around them
  • Who to pester to improve SVG text implementations in web browsers

SVG & Animation

by Brad Larson

12 PM ET / 11 AM CT

In this session, Brad Larson discusses the challenges of animating SVGs and how using Greensock Animation Platform (GSAP) solves many of those issues. Brad will also cover information regarding SVG in display ads.

In this session, you’ll learn:

  • Why use Greensock for SVG animation
  • Reviewing features of SVG plugins offered by Greensock
  • Overcoming challenges with Animating SVG Masks
  • The power of SVG Animation through deconstructing SVG demos

SVG Workflows

by Kevin Ball

1 PM ET / 12 pm CT

SVGs are incredibly powerful, with the potential to completely revolutionize the way that we handle images on the web. Why haven’t they already done so? Because of a lack of the necessary tooling.

Luckily, that blocker has started to go away, and in this talk, we will go into some development tools you can use today to start getting the most out of SVGs.

You will learn about tools that let you:

In this session, you will learn:

  • Optimize your SVGs to reduce file size as much as 80% from what programs like Sketch generate using SVGO.
  • Automatically generate SVG spritesheets that let you combine any number of SVGs into a single file load using the svg-sprite npm package
  • Automatically inline SVGs into your HTML to enable fine-grained access to the via CSS and JavaScript. We’ll cover build time inlining with the ‘inline-svg’ npm package, and load time inlining using the SVGInjector SVG Dom Injection library.

Baremetal: SVG and ES6

by Sarah Drasner

3 PM ET / 2 PM CT

Pairing SVG with CSS and JavaScript libraries can yield incredible, fun and delightful results. Using Gulp tools to incorporate SVG icons into our systems is useful, but what are all these tools doing? What’s under those layers of abstraction and what strange things can we accomplish when we get close to the metal?

In this session, we’ll cover:

  • ‍Setting up an SVG as a sprite and icon and styling it like it’s text
  • ‍Creating a chart from scratch, without d3 or a charting library
  • Applying movement with physics to SVG paths with only native JavaScript
  • Other strange and beautiful techniques that will help you understand SVG, paths, and ES6 a bit better.

    

Building an SVG & Sketch Workflow

by Clark Wimberly

4 PM ET / 3 PM CT

The new screen design app-of-choice, Sketch is a great tool for creating clean, organized SVG. Using SVG efficiently in your projects starts with planning and exporting your assets jusssst right, so that's where we'll begin.

Starting with sample files, we'll learn:

  • ‍Exporting SVG with guts
  • ‍Explore the generated SVG markup
  • ‍Including the assets into a production build
  • ‍Updating the assets in a production build
  • ‍Establishing an SVG-first workflow

We'll also do a bit of Q&A, so bring your best Sketch questions, and we'll run through them together.

Building with SVG Q+A Round Table

by Chris Coyier

5 PM ET / 4 PM CT

Bring your questions about SVG workflows as Chris Coyier (CSS-Tricks, Practical SVG) hosts a round table Q&A session. If there's time, he will show off CodePens that demonstrate cool SVG features, too!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

How Does Attending
a Virtual Conference Work?

1.

Once you are registered, you will receive a follow-up email to confirm your reservation. If you don't receive your confirmation email right away, check your JUNK/SPAM filter and then, if it's not there, contact support. 

2.

As the event draws near, you will receive a more detailed message about two days before the event with the full schedule and other helpful information to help you take full advantage of your conference-going experience and plan your day.

3.

On the day of the conference, you will receive an email invitation about 45 minutes before everything starts. 

Click on the enclosed link to sign in and enjoy the conference!

You'll be able to see and hear the presentations as they happen, ask questions as needed and chat with the other attendees, if you like!

Technical Requirements

To attend The Summit, you will need a modern web browser and a recent version of the Adobe Flash Player. 

Follow this link to run the Adobe Connect's diagnostic (opens in a new window). It will let you know right away which plug-ins, if any, you will need to update before the event.

For smart phone or tablets, use Adobe Connect App on iOS or Android.

Still have questions? 

Drop us a line if there's anything else you'd like to know.

Join our E4H newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Sign up and join others just like you to be kept-up-date on E4H events, podcasts on UX design, web design and dev links and tips, UX design conversations from the brightest minds in the industry.