HTML5 Canvas or SVG: Choose Wisely

In 2004, the introduction of HTML5 also brought us the JavaScript based drawing method Canvas. The vector-based SVG format has been a thing since 2001. However, it only became truly successful over the past few years, in parallel to HTML5. Both formats have their advantages and disadvantages. But which of the two is the better choice for which situation? Where are their strengths and weak points?

JavaScript vs. XML-Syntax

The biggest difference between HTML5 Canvas and SVG is the markup, or rather, the coding. Ultimately, only a single element ("<canvas>") is being marked up via HTML5. The entire content of the canvas is realized via JavaScript. According methods allow you to draw and combine shapes like rectangles, circles, but also complex polygons and arcs. JavaScript is also used for the looks (fill color, as well as stroke and stroke color).

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. So, when it comes to the markup, the SVG format is ahead. It saves space and has a simpler syntax. With HTML5 Canvas, the cards are stacked against those that generally want to provide all of their content without JavaScript as it is.

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. On top of that, users get to address and manipulate SVG elements via JavaScript.

document.getElementsByTagName("rect")[0].setAttribute("width", "200");

In the example, an SVG rectangle is being manipulated using JavaScript.

Speed

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.

Pixel Manipulation

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. For instance, the color in a video (via the green screen method, for example) can be replaced by another color, or background image dynamically. Here, use JavaScript to access the frames of a video, replacing one color with a different image, for example.

Conclusion

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.