HTML5 Data Visualizations - Part 1 - SVG vs. Canvas
Sometimes I look back at theexcellentinternet archive and laugh about what bit websites looked like a few years ago. Take a look at CNN from the year 2000or Blizzard from the year 1998in comparison with these same sites today the quality of the design is dreadful. There has been a real revolution in the quality of the sites on the Internet. I’m delighted that this is the case but it does raise the bar for those of us who build websites. Everybody expects our sites to be more attractive and for data to be presented in a more useful fashion than it has been in the past.Fortunatelya number of the key improvements in HTML5 have been around presentation of data.
If you talk to anybody I’ve worked with they’ll tell you that I love graphs. I love the little guys. I love bar charts, I love pie charts, I love spark lines, I don’t love gauges, but I love line charts. I love them so much I want them on my receipts. HTML5 offers a couple of mechanisms for creating drawings(which is what graphs are): Canvas and SVG.
Each of these has their advantages which is why theargumentsI’ve seen people having about which one is better overall to be a bit silly. Sometimes a spoon is better and sometimes a fork is better. a spork is almost always the worst solution, but that might just be because I’m sporkist.
Canvas is a raster format which means that you canmanipulateimages in it very easily. If you were looking to build a graphics editor or perform analysis of an existing image then canvas would be for you. Also if you were looking to build a game this is most commonly done using canvas because of the difficult nature of building game graphics in a vector format. As a graphics professor of mine use to say “Raster is faster, but vector is better”. There is pretty good support for canvas on major browsers and even in older versions. If you’re trapped in a company where the IT department have totally failed to keep up with the times and are still running Windows XP there is some hope, you can use excanvasto add support to older versions of IE. It is a lot slower and doesn’t render things perfectly. You should probably sigh loudly and shake your head in woe that your company hasn’t grasped how important IT is.
Now for SVG. These are scalable vector graphics which means that the graphic is made up from a series of lines and curves. It is surprising how impressive the things are you can build with what amounts to a pile of shapes. Being made of a bunch of lines means that you can scale the images up and down as you see fit. So if you want to zoom into a section of the graphic it can be done without losing any of the quality as you would see in a raster image. I like to think of them as the format in which all video recorders record in most crime dramas. Browser support for SVG is about the same as canvas. As most charts and graphs are made up of lines and the such this seems like an ideal solution.
In the next part we’ll look at how to use SVG.