HTML5 is the biggest advancement so far in the HTML standard. The adoption of the standard is growing fast (also fuelled by Apple mobile devices, which stopped supporting Adobe Flash). HTML5 comes with many new features. Again, it is beyond the scope of this book to cover them. However, the most relevant part to web charting is Scalable Vector Graphics (SVG). SVG is an XML format for describing vector-based graphics, which is composed of components such as paths, text, shapes, color, and so on. The technology is similar to PostScript except that PostScript is a stack-based language. As implied by its name, one of the major advantages of SVG is that it is a lossless technology (same as PostScript); it doesn't suffer from any pixelation effect by enlarging the image. A reduced image size will not suffer from loss of original content.

Furthermore, the SVG can be scripted with timing animation Synchronized Multimedia Integration Language (SMIL) and event handling. SVG technology is supported by all the major browsers.

The following is a simple example of SVG code—a single curved line between two points:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="curveAB" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="400" y="350" dx="30">B</text>
  </g>
</svg>

The preceding SVG code is executed in the following steps:

The following is the final graph from the SVG script:

Canvas is another new HTML5 standard, which is used by some JavaScript chart software. The purpose of canvas is as its name implies; you declare a drawing area in the canvas tag, then use the new JavaScript APIs to draw lines and shapes in pixels. Canvas has no built-in animation routine, so the API calls in timing sequences are used to simulate an animation. Also, there is no event handling support; developers need to manually attach event handlers to certain regions in the canvas. Hence, fancy chart animation may prove more complicated to implement.

The following is an example of canvas code, which achieves the same effect as the preceding SVG curve:

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">Canvas tag not supported</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Draw the quadratic curve from Point A to B
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.quadraticCurveTo(250, 0, 400, 250);
ctx.strokeStyle="blue";
ctx.lineWidth=5;
ctx.stroke();
// Draw a black circle attached to the start of the curve
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(100,250,3, 0, 2* Math.PI);
ctx.stroke();
ctx.fill();
// Draw a black circle attached to the end of the curve
ctx.beginPath();
ctx.arc(400,250,3, 0, 2* Math.PI);
ctx.stroke();
ctx.fill();
// Display 'A' and 'B' text next to the points
ctx.font="30px 'sans-serif'";
ctx.textAlign="center";
ctx.fillText("A", 70, 250);
ctx.fillText("B", 430, 250);
</script> 

As you can see, both canvas and SVG can do the same task whereas canvas takes more instructions:

Instead of a continuous path description in SVG, a sequence of JavaScript drawing methods are called. Instead of a single tag with multiple attributes, multiple attribute setting routines are called. SVG is mostly declarative, while canvas enforces an imperative programming approach.