Environments for Humans
twitter icon facebook icon flickr icon feed icon linkedin icon email icon

SVG Summit 2016 logo

The virtual, live Scalable Vector Graphics conference

In-kind Sponsors

Environments for Humans brings together some of the Web's most notable experts in for an all-new, one-day only online conference, the SVG Summit 2016! Bring the experts to your desktop January 21st from 9AM to 5PM (CT).

Don't miss this great event and purchase your tickets now!

January 21, 2016 \\ 9AM to 5PM CT

(Schedule subject to change)

Introducing SVG 9am CT

by Ryan Irelan, Lead Educator at Mijingo

Different than bitmap images like GIF, JPEG, or PNG, the Scalable Vector Graphic (SVG) image format requires a different understanding and approach.

In this session, Ryan Irelan sets a solid foundation to discuss everything you need to know to get up and running with SVG.

You will learn:

  • Converting a bitmap image to SVG
  • Coding SVG by hand and understanding the attributes
  • The SVG viewBox attribute and the user coordinate system
  • How to create SVG rectangles, circles, ellipses, and more.
  • Additional tools and resources to continue learning and masterings SVG
  • Much, much more!

About Ryan Irelan

Information coming soon. ×

Cracking the SVG Code 10am CT

by Brenda Storer, Designer & Front End Developer at Thoughtbot

Their code looks kind of familiar, but have you ever tried to edit SVG code and end up breaking the whole darn thing?

I have been digging into the nitty gritty of SVG code, and it’s helped me optimize my own SVGs and get started more quickly with libraries that work with SVGs like d3 and snap.svg.

You will learn:

  • Understand the mystery of the “viewBox”, the SVG coordinate system and viewport, even what all those numbers and punctuation within a “path” actually mean.
  • How much of all that stuff that Sketch, Illustrator, and Inkscape exports out is actually needed, and what does it do? (“xlmns”, “enable-background”, etc.)
  • What are the CSS properties that I can use to style SVGs, and when, how, and why?
  • How can I use this information to animate SVGs?

About Brenda Storer

Brenda is a Silicon Valley native who moved to NYC to escape the tech world, only to discover that tech is actually pretty awesome. She is a designer and front end developer at thoughtbot, a teacher with Girl Develop It, and is a co-organizer for ManhattanJS.


Designing Complex SVG Animations 11am CT

by Sarah Drasner, Senior UX Engineer at Trulia (Zillow)

SVG animation, like any other web medium, must be designed. As web developers, we're all familiar with thinking about the effects of typography, layout, interaction, and shifting viewports. But now we have another parameter to consider: time.

In this session, we'll cover:

  • Storyboarding animation that informs UX concerns
  • Workflows for creating beautiful and performant SVG animations
  • Responsive animations that take advantage of SVG capabilites to adjust to the viewport
  • Timing and user engagement

About Sarah Drasner

Sarah Drasner a Senior UX Engineer at Trulia (Zillow Group). Formerly she was Senior Interaction Designer at Fauna, Inc., a company founded by former Lead Engineers from Twitter. She is also the former Lead Front-End Engineer and Designer at Basho, creators of Riak. Prior to Basho, Sarah worked for the Field Museum of Natural History as a Scientific Illustrator and Front-End Developer, worked for Stanford, UCSF, and the design and development firm Waxcreative.

Sarah loves SVG, informative animation, trying to weld together pieces of the DOM.


4 (More) Impossible Things with SVG 1pm CT

by Dudley Storey, Author of Pro CSS3 Animation

SVG has finally taken its place among equals in front-end web development, but remains largely relegated to traditional roles for vector-based technologies such as logos, graphs and diagrams.

This trend ignores SVG's depths and rich syntax: with a little imagination, we can apply SVG in far more creative and varied ways on modern websites.

This presentation will cover:

  • Making rich interactive visual navigation with SVG and a sprinkling of JavaScript.
  • Using to make better, more adaptive backgrounds
  • Leveraging the power of SVG's own blend modes for interactivity
  • Making responsive, fully flush hero text that fits perfectly on the page, every time

About Dudley Storey

Dudley Storey is a web development writer, teacher and craftsman who has been building sites almost as long as there has been a web to make them on. A contributing editor at Smashing Magazine, he is the creator of thenewcode.com and the author of two books: Pro CSS Animation and a title coming in 2016.


SVG & Working with Sketch 2pm CT

by Clark Wimberly, Content Designer at Invision

Sketch is a modern design app with a razor focus on product and interface design. One of the most modern parts is the vector-based workflow, which makes cranking out an entire project's worth of SVG assets a total snap.

During this session, we'll look at a few of the most handy ways to work with SVG, both in and outside of Sketch. From slices to export settings to the command line to plugins, you're sure to find an asset workflow that fits you like a glove.

About Clark Wimberly

Clark is a developer living in Austin, Texas. He runs ClarkLab, a small web firm with his wife, Angie. He's a big fan of usability, standards, and clean design.


A More Holistic Approach to SVG 3pm CT

by Chris Gannon, Freelance Motion, Interaction Designer and Animator

Whether it's performance and rendering considerations or making sure what you've drawn looks good in the browser, SVG is not only a creative and technical challenge, but also the best fun!

From inspiration to presentation, Chris deconstructs his own excellent work and talks about where he gets his ideas from (spoiler alert: theft, mainly), the creative and technical decisions he makes when building them and how he deals with some of nasty 'presents' that SVG likes to leave for him to discover, like a naughty, digital puppy.

In this session expect lessons on achieving smooth, engaging, interactive SVG animation, while Chris deconstructs how to have a more holistic approach to SVG.

About Chris Gannon

Having spent the first half of the 1990s running my own record label and releasing music, Chris Cannon began hiscommercial career as a freelance Flash designer in 1997 creating animations and interfaces. For 7 years from 2000, he was hired as head of the video and animation department for a leading media agency where his responsibilities ranged from banner ads, video animations and interface design to full-blown cross-platform and cross-media campaigns; his most notable achievement was building iPresenter, the first version of what is now called the BBC iPlayer.

In 2007, Gannon returned to being independent and has worked with clients big and small including Google, Mercedes, Britvic, BMW, Godolphin, Bacardi, BBC, Audi, Pepsi, Sony, Universal Music and Burberry.

His tireless drive to improve himself and ultimately his offering to clients means a skillset and experience that has broadened significantly. This has led to him becoming a respected community leader in Scalable Vector Graphics with a strong and friendly following on Twitter and CodePen.


Building with SVG Q+A Round Table 4pm CT

by Chris Coyier, CSS-Tricks Web Design Community Curator

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

About Chris Coyier

Chris is a web designer and developer. He writes about all thing web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen.


About the SVG Summit 2016

Scalable, crisp, and interactive in different resolutions. Scalable Vector Graphics (SVG) have proven to be the image format of choice for the multi-device web. During this full day of SVG talks, industry experts guide you through deep dives into what is possible with SVGs. You'll see tips, tricks, and solid workflow techniques already in use by some of the best sites on the web.

Why attend the online conference?
  • Attending a conference online means no travel hassle!
  • Bring the experts live to your desktop!
  • Time spent on the road is better spent instead in the office or with family, friends!
  • Sessions are developed to dive deeper into the material!
  • Ask questions directly to the speakers!
  • Can't make it the day of the conference? Watch the recordings whenever you want!
★ Free Recordings

Can't make it the day of the conference? Recordings are part of registration, so you can watch the recordings whenever you want!

Within five business days after the event, we email you information on how to view recorded sessions.

Testimonials from
This conference was a load of fun. I loved the instant feedback from the speakers and the atmosphere.

John-David Dalton
Web Application Developer
& Web Performance Summit Attendee

I love these online conferences. It's convenient and you can still learn a lot from the comfort of your home or at work.

Candi Ligutan
5by5.tv Producer

An absolutely fantastic event. Well done—will definitely be back for more!

Russ Weakley
Chair of Web Standards Group
& CSS Summit Attendee

Satisfaction Guaranteed 100%

Buy Recordings

SVG Summit 2016 Recordings


Once you are registered, you will receive a follow-up email to confirm your reservation. Later on, as the event draws near, you will receive a more detailed message, with the full schedule and other helpful information to help you take full advantage of your conference-going experience and plan your day.

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 enter the virtual meeting space. Once you are signed in, 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 Specifications: 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 our system 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.

Still have questions? Drop us a line or contact us at e4h@heatvision.com if there's anything else you'd like to know.