2. Agenda The history of presenting a rich visual element (like a chart) in the browser. Canvas SVG How to choose them?
3. History Make a round-trip to the serverThe server creates or fetches the necessary image data and pipes the results back to the browser. Works everywhere, but the results are usually static. Any changes to the image require more trips to the server. Use a browser plug-inPlug-ins clearly work-around browser limits and can provide rich visual renderings, but they require a software install and introduce a whole new (non-standard) layer of technology that must be learned and maintained by developers. Fugly browser hacksYou've seen them. CSS and HTML that's manipulated and abused to give the appearance of something more "image-like." This method is painful, crude, and wrong. But it's been one of the only options for years…
4. HTML5 is bringing with it two technologies that give developers the ability to draw in the browser: Canvas and Scalable Vector Graphics (SVG). Both give developers a way to directly manipulate pixels in the browser, which unlocks a whole host of new possibilities for "pure" HTML and JavaScript applications. These two technologies have some key differences, though.
5. Canvas Canvas is part of the HTML5 spec. It provides developers with what amounts to a writable bitmap area on a page that can be manipulated with JavaScript. In fact, you must use JavaScript to display anything on a canvas. It is not markup based, so API calls are required to draw. The pixel-driven nature of canvas makes it ideal for scenarios where rendering speed is key, such as games. It doesn't matter if you have 1 or 10,000 "objects" being painted to your canvas, if the resolution is the same, it's all about redrawing the same pixel area. The downside of canvas' pixel-driven nature is that it's harder to interact with. If you do have "objects" that you want users to interact with, you have create and track those objects on your own in JavaScript. And a designer can't create a "canvas" in Illustrator. API calls have to be programmed to make canvas work.
6. SVG Scalable Vector Graphics have actually been around much longer than HTML5. Browsers like Firefox, Opera, and Safari have offered varying degrees of support for SVG since 2005. Why is SVG only now getting a lot of attention? You guessed it. Internet Explorer. One of the only browsers not to support SVG in the last 5 years was IE. And since IE was (and is) the dominant browser during this time, SVG usage was minimal. IE9 has finally added SVG support, though, and along with improved support across all other browsers, SVG is finally ready for primetime. Unlike canvas, SVG is vector-based (not pixel-based) and is created with markup (instead of APIs). SVG elements, when rendered, actually become part of the page DOM, which means they have properties, events, and are much easier to use for illustrations that expect user interaction. And since SVG is markup-based, designs can be easily exported to SVG format from Illustrator, loaded by the browser, and even cached like images. The downside to living in the DOM is memory. Highly complex visualizations (thousands of objects) will strain browsers since every element in the SVG image is an object (with its own memory needs). That makes SVG great for things like data visualization or logos, leaving complex visual rendering to canvas.
7. Older Browsers? Clearly, adopting canvas and SVG for rich, interactive visualizations in HTML is a no-brainer, but what happens for older browsers, especially IE (which, as we said, lacks any SVG support pre-IE9)? Fortunately, there is a very similar technology to SVG baked-in to IE5 through IE9 called Vector Markup Language (VML). Originally created for Microsoft Office, VML has a lot of overlap with SVG. When used in conjunction with SVG, VML gives us a way to reach most actively used browsers with some type of in-browser rendering.
8. Why not Canvas? SVG is interactive. This makes it easy for us to add features like the dynamic tooltips (and even more interactivity to come) SVG/VML is more broadly supported. Unlike canvas, which is an HTML5 feature, SVG/VML help us support a broad range of new and older browsers without resorting to polyfills. SVG is vector based. And charts are relatively simple data visualizations. Using SVG lets charts scale crisply to any display size (big or small), and avoids wasting memory rendering more pixels on larger screens.
