HTML5 Canvas or SVG: Choose Wisely
var canvas = document.getElementById("canvas"); var drawing = canvas.getContext("2d"); drawing.moveTo(0, 0); drawing.lineTo(200, 200); drawing.lineWidth = 2; drawing.strokeStyle = "red"; drawing.stroke();
In the example, a red line is drawn from the position “0, 0” to “200, 200”.
Via SVG, the same line would be drawn using an according SVG element.
<line x1="0" y1="0" x2="200" y2="200" stroke-width="2" stroke="red" />
Although the result is identical in both cases, you can tell that the SVG variant is significantly shorter, and, due to the XML syntax, the markup should be a lot more intuitive for most people.
Another advantage of the SVG format is that the design can also be done via CSS. Here, individual shapes can be designed uniformly via ID or category.
Pixel vs. Vectors
Another significant difference is the way the formats display content. While HTML5 Canvas is a pixel based format (a PNG image is created within the browser), the SVG format is vector based.
Of course, HTML5 Canvas also allows you to create graphics for high-resolution displays. But, at the latest, after zooming in, the Canvas drawings become pixelated, while SVG drawings keep their acuity.
Once again, the SVG format stays in the lead – especially since you can even integrate bitmaps within an SVG document.
Interactions and Effects
As the SVG format also supports CSS, all stylesheets options are available to you. Aside from simple designs, it is also possible to implement interactive effects.
This way, you get to apply hover effects to individual SVG shapes, highlighting them, changing their color, or enhancing them when hovering over them with the mouse. This allows for animations as well, thanks to the “transition” feature.
Since the SVG format supports links, you can add references to shapes, creating links from individual shapes.
A final big difference between HTML5 Canvas and SVG is the speed, regarding the rendering, and display of drawings in the browser. In general, no format is ahead of the other here.
You could definitely neglect the speed difference when it comes to less intricate drawings. For complex or large designs, however, the differences become evident.
With an increasing number of objects – both simple shapes and complex paths – the SVG format slows down. It takes longer to render and display the drawing. The Canvas format does a lot better here. The more objects are placed in the drawing; the more performant HTML5 Canvas becomes in comparison to SVG.
Things look different when considering the size of the area. The SVG format does a much better job at handling large areas, and on there, it renders elements much faster than the Canvas format.
Thus, the SVG format should be your format of choice when you want to use large format drawings, maybe even page-filling ones. Those that need to render exceptionally complex elements, however, are better off using the Canvas format.
Since only HTML5 Canvas is a pixel-based format, pixel manipulation is mostly out of the picture when it comes to SVG as it is. However, even the SVG format gives you the option to use different filters to manipulate the color of an implemented bitmap, for example.
Overall, HTML5 Canvas is a better choice for pixel manipulation. The pixel-based format makes it rather easy to alter every single pixel of an image using the according function.
This allows for the realization of both static manipulations, and animated effects. With HTML5 Canvas, even real-time manipulation of videos is possible.
The listed examples prove that both HTML5 Canvas and the SVG formats have their advantages and disadvantages. When it comes to the combination of different possibilities that we presented here, you may need to ponder which format is the better choice.
In general, the following can be said, though: when it comes to static drawings, with the primary focus being scalability and the display on large surfaces, the SVG format is the right choice.
For intricate depictions that need to be recalculated permanently – real time data of a weather map or a video, for instance -, HTML5 Canvas is more performant, making it the superior choice.