One of the valuable things that HTML5 conveys to developers is technology for doing rich visualizations directly in the browser. For years, web developers had to do one of the below mentioned scenarios if they want to present a visually rich element (for example a chart):
a. Conduct a round-trip to the server
The server fetches the needed image data and channels 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.
b. Use a browser plug-in
Plug-ins clearly bypass browser limits and can provide rich visual renderings, but they require installation of software and introduce a whole new layer of technology that must be learned and maintained by developers.
c. Browser hacks
CSS and HTML that's manipulated to provide the appearance of something more "image-like." This is a painful and initially wrong method, still being one of the only options for years.
This was until now.
The HTML5 canvas element is used to draw graphics, on the fly, via scripting.The canvas element is only a container for graphics. You must use a script to actually draw the graphics.
The pixel-driven nature of canvas makes it applicable for scenarios where speed of rendering is important, such as games. There is no limit to the number of objects being painted to your canvas; if the resolution is the same then it's all about redrawing the same pixel area.
Scalable Vector Graphics have actually been around longer than HTML5. Browsers like Firefox, Opera, and Safari have offered varying degrees of support for SVG since 2005. However, since now SVG was not supported for Internet Explorer.
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. SVG is great for things like data visualization or logos.
What about 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 VML (Vector Markup Language)
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.
Shield UI Charts
Now that you are fully acquainted with the “drawing" technologies of HTML5, let's explore how Shield UI Charts make it easy for you to add rich data visualizations to any HTML site or app.
Shield UI charting uses the following technologies to automatically provide broad browser support: SVG and VML. You need not worry about older versions of IE. Shield UI Charts will execute the proper rendering without requiring any additional code.
Another question springs to mind after all said so far. Why not canvas?
1. SVG is fully interactive. Features like the dynamic tooltips can be added easily
2. SVG/VML is more broadly supported. SVG/VML helps us support a broad range of new and older browsers.
3. SVG is vector based. As far as charts are relatively simple data visualizations, using SVG facilitates charts scaling crisply and accurately to any display size and avoids memory waste, while at the same time rendering more pixels on larger screens.