Toolroom Tech Blog

Devlopers Digest

Charts in the Web: SVG or HTML5 Canvas?

When to use what? Short differentiation between SVG and HTML5 Canvas.

Currently I am working on a dashboard, where I need to show various graphs rendered by the Browser. I didn't want to encapsule everything into a almost inaccessible blackbox, so I banned Flash & Silverlight and decided to rely on SVG or HTML5 Canvas. But what's the difference? 

The following samples will produce two identical graphics:

Scalable Vector Graphics (SVG)

Primarily, SVG is a XML based language to describe 2-dimensional vector graphics. Because of its XML based definition, each object within the SVG DOM is accessible by Java Script. It means you can attach to events and customize the layout by css.

All modern Browsers, even Internet Explorer (>=9) and mobile Browsers, can directly interpret it.

The following example produces this browser output:

<html>
	<head>
		<title>SVG Demo</title>
	</head>
	<body>
		<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<style type="text/css" >
			  <![CDATA[
				rect.outer{
					fill:   #DD9900;
					stroke-width:0;
				}
				
				circle.outer {
				   stroke: #FFFFFF;
				   fill:   #FFCC00;
				   stroke-width:15;
				}
			   circle.inner {
				   stroke: #FFFFFF;
				   fill:   #cc0000;
				   stroke-width:15;
				}
			  ]]>
			</style>

			<rect class="outer" x="0" y="0" width="100" height="200" rx="5" ry="5" />
			<circle class="outer" cx="50" cy="50"  r="100"/>
			<circle class="inner" cx="50" cy="100" r="24"/>
		</svg>
	</body>
</html>

HTML5 Canvas

The HTML5 Canvas provides JavaScript with an area to create 2-dimensional pixel-graphics. In difference to SVG, the canvas' objects and paths are not accessible by the DOM. In order to change parts of the graphic, the whole canvas needs to be redrawn.

The following lines will draw our graphic from above with Canvas:

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<title>Sample HTML5 Structure</title>
		<script>
			function drawCanvas(){
				var canvas = document.getElementsByTagName('canvas')[0];
				if(canvas.getContext){
					var context = canvas.getContext('2d');
					context.fillStyle = "#DD9900";
					context.fillRect(0, 0, canvas.width, canvas.height);
					
					var centerX = canvas.width / 2;
					var centerY = canvas.height / 2;
					
					context.beginPath();
					context.arc(centerX, 50, 100, 0, 2 * Math.PI, false);
					context.fillStyle = "#FFCC00";
					context.fill();
					context.lineWidth = 15;
					context.strokeStyle = "#FFFFFF";
					context.stroke();
					
					context.beginPath();
					context.arc(centerX, centerY, 24, 0, 2 * Math.PI, false);
					context.fillStyle = "#CC0000";
					context.fill();
					context.lineWidth = 15;
					context.strokeStyle = "#FFFFFF";
					context.stroke();
				}
			}
			
		</script>
	</head>
	<body onload="drawCanvas()">	
		<canvas id="canvasOne" name="canvasOne" width="100" height="200">
			HTML5 Canvas not supported by your Browser.
		</canvas>
	</body>
</html>

Pixels vs. Vector

Let's (browser-) zoom into both graphics. As you can see, SVG on the right remains clear and sharp, while Canvas gets blurred.

Comparison

Finally, here's what you should think of when decide between Canvas and SVG. 

Canvas

SVG

  • Pixel-based graphics, therefore resolution dependent
  • No DOM integration, therefore no event handler support
  • Animations are frame based, the whole canvas needs to be recalculated.
  • Allows to save graphics in various formats (Right Click > Save as ...)
  • Very fast, can be used for graphic intensive applications, i.e. games
  • Vector graphics, therefore NOT resolution dependent
  • SVG DOM supports event handler support
  • Objects are directly accessible by script and can be animated by object.
  • Great for large rendering areas like Google maps
  • Due to DOM integration resource intensive, not suitable for games

 

Download Sample

svg-vs-canvas.html (2,24 kb)

Loading