Scalable Vector Graphics (SVG) In-Depth
Join us for an Awesome Workshop on:

Scalable Vector Graphics (SVG) In-Depth

January 30, 2015 - 9:30am to 5:30pm Central Standard Time

This workshop has already been published as a course!

Watch the Full Course

Scalable Vector Graphics (SVG) In-Depth

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • Learn the basic features and capabilities of SVG, and the tricky parts of working with it
  • Discover how to use SVG with and in HTML and CSS
  • Get hands-on experience on hand-authoring (or adapting) an SVG
  • Generate and manipulate SVG with script, including interactivity and animation
  • Compare and contrast SVG with the Canvas API, and when to use each
  • Understand how to make accessible data visualizations with SVG
  • Get an overview of popular JavaScript libraries like D3.js, Snap.svg, and Raphäel
  • Build a simple drawing tool with SVG and JavaScript

Spend a Full Day Immersed With a Leading SVG Master

Workshop Details

SVG is now supported on every modern browser and mobile device, and usage is on the upswing, but most people only use it for icons or data visualizations. Most developers and designers don't realize how much more powerful and useful SVG is. From scalable images to full-bore web applications, SVG fits many needs. Come join Doug Schepers to learn SVG in-depth, and add a valuable tool to your web toolkit.

Daily Schedule

We'll begin by understanding the basics of SVG, and how it's most commonly used (and misused). We'll cover some of the trickier parts of SVG, and learn how to work around them. You'll learn how to use SVG as an icon. Throughout the day, we'll be building the skills toward creating a simple online drawing tool and a data visualizer in SVG, inline in HTML, styled with CSS, and powered by basic JavaScript. Toward the end of the day, we'll lighten the load and enjoy a refreshing dip into the pool of SVG resources and eyecandy, such as D3.js, Snap.svg, and Raphäel, and compare SVG and the Canvas API. We'll also explore how to use SVG with other parts of the web stack, like the Web Audio API, Web Speech API, and other fun tools. Finally, we'll explore the future of SVG, what's coming up in SVG 2 and SVG+CSS, and answer burning questions.

  • 8:30AM
    Tech Check and Welcome
  • 9:00AM
    Intro to Why SVG Is Awesome
  • 9:30AM
    Hands-on SVG Basics
  • 10:30AM
    SVG practice
  • 11:00AM
    SVG Scripting, Interactivity, and Animation
  • 11:30AM
    SVG Hacking
  • 12:00PM
    Lunch and Hacking
  • 1:00PM
    Making an online drawing tool with SVG
  • 1:30PM
    Hacking
  • 2:30PM
    SVG tools, script libraries, and Canvas comparison
  • 3:00PM
    SVG smorgasbord
  • 4:00PM
    Future of SVG, Further Reading, and Wrap-up
Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

This workshop is for you if you've never used SVG before, only used SVG in simple cases or through script libraries, or if you started learning it but want to avoid the pitfalls in taking your knowledge to the next level. Web developers and code-savvy designers will take away valuable, pragmatic skills in working with SVG. You'll get the most out of it if you know how to do simple scripting.

Any Prerequisites?

  • For some parts of the workshop, some JavaScript experience is necessary. However, most of the class will deal with basic concepts, and existing script functions will be available for anyone who wants to follow along without writing code themselves. Some designers may feel challenged, but if you can understand HTML and CSS, you can understand

Event Details

What

One Full Day Workshop Session

Replay Videos (available immediately)

When

January 30, 2015 - 9:30am to 5:30pm Central Standard Time

Where

Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN