
Scalable Vector Graphics (SVG) In-Depth
This workshop has already been published as a course!
Scalable Vector Graphics (SVG) In-Depth
Some Key Takeaways!
By participating along with us in the workshop, you'll learn:
- 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:30AMTech Check and Welcome
- 9:00AMIntro to Why SVG Is Awesome
- 9:30AMHands-on SVG Basics
- 10:30AMSVG practice
- 11:00AMSVG Scripting, Interactivity, and Animation
- 11:30AMSVG Hacking
- 12:00PMLunch and Hacking
- 1:00PMMaking an online drawing tool with SVG
- 1:30PMHacking
- 2:30PMSVG tools, script libraries, and Canvas comparison
- 3:00PMSVG smorgasbord
- 4:00PMFuture of SVG, Further Reading, and Wrap-up
Interact with the Instructor - Online & In-Person
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