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
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
- SEO friendly and Accessible
- Printer friendly
- Good browser support
The Different Ways to Embed SVG
- Object Tag
- 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.
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.
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.
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.
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.
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.
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.
You can also play with matrix3d.
My matrix3d Slides
Other Cool SVG Stuff
- The responsive images clown car technique.
- A nice set of icons for RaphaelJS.
- Fabric.js – use SVG inside of the HTML5 <canvas> element.
- Vectron – fetch an SVG with Ajax and then parse it with rappar.js into RaphaelJS objects.
- d3.js interactive demo from the workshop.
- Creative demos: digital fireworks display and projection mapping on moving surfaces.
- Deep dive into the animation math.
- Finally, if you haven’t seen Bret Victor’s inventing on principle, you should.