Skip to main content

Whirlwind Tour of Scalable Vector Graphics

Marc Grabanski (Frontend Masters)
Average rating: ****.
(4.93, 15 ratings)

In this session, we’ll walk through the essential building blocks of SVG (Scalable Vector Graphics). Then we’ll dive into transforms and matrices and how to manage the transform stack. We’ll also learn how to script against SVG with JavaScript libraries like Raphaël and D3 to make interactive web applications.

  • Introduction to SVG elements
  • Benefits of using SVG
  • The different ways to embed SVG
  • Scripting SVG
  • Using SVG links
  • SVG filters
  • Using CSS Animation with SVG
  • CSS Transforms and Transform Matrices
  • RaphaelJS – Primitives, Attributes, Events, Animation and Easing, Sets and Transforms
  • Other Cool SVG Stuff (Links and Demos)

This talk is adapted from my previous talk on SVG and RaphaelJS, though I intend to dive more into SVG transforms and less into RaphaelJS. I also did a quick blog post detailing many of the links and some of the demos from the talk.

Photo of Marc Grabanski

Marc Grabanski

Frontend Masters

Marc’s background is in open source. He was the original creator of the jQuery UI Datepicker and is constantly teaching about front-end web development through events, articles and conferences. Marc is the creator of Frontend Masters expert web development training and is currently building large SVG-based web applications.

Comments on this page are now closed.


Mario Ruiz
02/09/2014 2:21pm PST

Dear Marc,

The first time I saw your name in the js world was as a reviewer in a jQuery UI 1.7 book and I see that you are not so different since. Even maybe I can't be at the conference I'm sure that you will be great because you know to share yourself with a lot of people.

Regards in this amazing adventure