Marc Grabanski

Interactive Vector Graphic Essentials

September 26, 2013

Making interactive web applications work across all browsers is a challenge. Luckily, with SVG you can scale your graphics to the device and it works across all major browsers. In this article I give you a few slide decks from my presentations on intro to SVG and RaphaelJS and also I explain transforms which is a way to rotate, scale and manipulate graphics.

With these tools we can build interactive vector-based web applications that work on any device!

My SVG and RaphaelJS Slides

Slide Deck

CodePen SVG Collection

I created a collection of demos on CodePen to show how you can do things with SVG and CSS transforms.

Introduction to SVG Elements

Learn these elements: <text><ellipse><rect><circle><line><polygon>, <path>, <g>

Check out Ian Johnson’s interactive SVG introduction from his workshop on D3.js.

Benefits of Using SVG

  • One size fits all
  • HTML-like tags for graphics
  • DOM Structure
  • CSS3
  • JavaScript Events
  • SEO friendly and Accessible
  • Printer friendly
  • Good browser support

The Different Ways to Embed SVG

  • Object Tag
  • Inline
  • As Image
  • CSS Background

Using SVG Links

You can wrap <a xlink:href="#"></a> around ANY SVG element to make it linkable. In this demo we make the paths of both Minnesota and Wisconsin clickable links.

Try it on CodePen

SVG Filters

SVG filters are coming! Check out this filter plugin demo for svg.js which shows of many of the filters.

Using CSS Animations with SVG

Here’s I Twitty the Fool… a demo of animating SVG shapes with CSS.

Using CSS Transforms and Transform Matrices with SVG

Here’s an introduction article to understanding CSS matrices.

  • Stacking Transforms with SVG
  • In the first demo, I show you how you can add many transforms to SVG. This is a basic demo of how transforms “stack” on top of each other and modify the original origin of the transform. For instance, if you add a rotation transform and then try to add a translate transform on top of that, “x” may not take you left and right anymore, but in a different direction based on the axis of the rotation origin.

Try it on CodePen

  • Stacking Transforms with RaphaelJS
  • With RaphaelJS, you can do the same transforms as before, but you can make “absolute” or “relative” transforms. So using absolute transforms makes it explicit what you are doing to modify your object instead of it stacking on top of the prior transform. Also, not shown in the demo, RaphaelJS  has convenience methods like “element.matrix.split()” to get the current resulting transform stack and “getBBox()” to know where your object is now.

Try it on CodePen

  • Animating the HTML5 Logo with RaphaelJS Transforms
  • You can use the .animate() method built into RaphaelJS to tween between transforms. We’re also using the built in “elastic” easing method when we clear the transform.

Try it on CodePen

  • Animating SVG with CSS Matrix Transforms
  • Once you have a matrix transform, you can use the transition property to animate the transform matrix with CSS.

Try it on CodePen

  • SVG Path Interpolation with RaphaelJS
  • You can animate between two path elements using RaphaelJS to do the interpolation between them. One of the more interesting things done with path transitions is animating the progression of the batman logo.

Try it on CodePen

  • Using the XCSSMatrix Library to Modify a Matrix Transform
  • John Schulz has made the XCSSMatrix library which lets you take an existing matrix and modify it with various transform methods (sort of like RaphaelJS does). You can then use the native CSS transition property to animate the matrix like we did in a previous demo.

Try it on CodePen

You can also play with matrix3d.

My matrix3d Slides

Slide Deck

Other Cool SVG Stuff

Edit Post on Github

Marc Grabanski

The personal blog of Marc Grabanski – Founder, CEO & UI Developer of Frontend Masters

<< Setting Up a New Mac on OSX for Web DevelopmentSimulating Mouse Events in JavaScript >>