SVG vs Canvas
I decided to re-work the car animation on the right with something a little better suited for image animation than jQuery. Two methods came to mind: SVG (scalable vector graphics) and canvas. These two have some overlap, but knowing their differences allows you to use them effectively. Here’s the breakdown:
SVG |
Canvas |
|
|
|
|
|
a few SVG frameworks |
a few canvas frameworks |
Definitely check out these frameworks and others to see what they offer. The nice thing about most of the canvas frameworks is that they’ll handle mouse interaction and hit detection for you, which evens the playing field a bit. There are tons of great things being done with svg and canvas, from games to interactive UI, it can really add some wow factor to an idea.
I ultimately went with svg since I was familiar with RaphaëlJS and there really isn’t crazy animation going on here.