Exploring SVG and HTML Canvas rendering in GoJS: benefits and use cases

The choice between HTML Canvas and SVG rendering has long been a divisive question for developers of interactive visualizations. However, a remarkable player in the field breaks the norm by seamlessly supporting both approaches: GoJS. This article describes the differences and similarities between vector and raster graphics. Consequently, it equips developers with a deeper understanding of the advantages of HTML Canvas and SVG rendering, while remarking how a library developer resolves the issue. 

Understanding SVG (Scalable Vector Graphics)

Nowadays, there exists two main image rendering techniques:

1. Raster graphics
2. Vector graphics

Raster graphic formats store data about the image in a grid of colored squares, called pixels, that create a bitmap. The pixels in a bitmap combine to create a coherent picture. Image files such as .png and .jpg are raster formats, and the HTML Canvas gives developers a raster format surface to manipulate. If you zoom in enough on a raster graphic, you will eventually be able to see the pixels.

On the other hand, vector graphic formats store images as a set of points and lines placed in specific, calculated locations to maintain their spatial relationships when the image is scaled up or down. The most common vector graphics format is SVG, however, there are also .eps, .cgm, .odg, and others.

So, SVG stands for Scalable Vector Graphics. Vector graphics do not need information about every single square, instead the web browser uses information in the SVG file, like the points and colors, and the desired scale to determine how to render them into two-dimensional images. This allows them to be sharp at any zoom level.

While converting a vector graphic to a raster graphic is possible, a raster graphic cannot be converted to a vector graphic.

HTML Canvas rendering vs SVG rendering

Canvas and SVG are the most commonly used technologies for creating and displaying interactive digital graphics, for instance when creating data visualizations. Is it possible to judge which is better and why?

Benefits of using SVG rendering

SVG graphics gained their popularity with an array of benefits for users:

• Great Scalability – rendering SVG files at any scale results in always sharp visuals, while the same visuals on canvas may become blurry or grainy for some zoom levels.
• Accessibility – text in SVG files remains in the DOM and can be found by screen readers. SVG files can also be edited in various tools – not only graphic tools but also text or code editors.
• Ease of starting – SVG state is kept in the DOM, so for very simplistic applications and libraries, you do not need to program as much persistence or event code.

Benefits of using HTML Canvas rendering

Let’s focus on some benefits that HTML Canvas offers:

• Total control of bitmap images – with HTML Canvas, you can easily draw and manipulate bitmap images, allowing for creative designs and engaging visual effects. The HTML Canvas allows you to at any time export the canvas surface to an image.
• Better performance for complex drawings consisting of many objects and animations – HTML Canvas provides superior performance when dealing with complex drawings that involve numerous objects and animations. Thanks to its optimized rendering capabilities, Canvas can handle intricate graphics efficiently, ensuring smooth and responsive user experiences.
• Faster rendering of even thousands of objects – the rendering process in HTML Canvas is optimized for speed, allowing you to simultaneously display a substantial number of objects on the canvas. This is particularly advantageous when working with data visualizations, interactive graphics, or complex scenes involving many individual elements. Look at the two pictures below to compare the rendering speed of the diagram in HTML Canvas and SVG. 

Read the article to compare rendering speed capabilities of two popular diagramming libraries – GoJS and JoinJS+.

How does GoJS handle these tradeoffs?

Through many years the GoJS visual library promoted rendering to HTML Canvas. The most pivotal reason was that HTML Canvas is more performant for larger graphs. The main tradeoff with SVG, that it can scale better, is simply handled by the library: As a user scales, the diagram canvas re-renders so that the experience is SVG-like in its scaling, while keeping the performance of the Canvas.

SVG export feature for static diagrams and PDFs

Users may still want SVG output, so GoJS provides a function, diagram.makeSvg, which allows users to create Scalable Vector Graphics representations of any GoJS diagram. This function returns a new SVGElement, and users can customize its behavior by passing a JavaScript Object with various configurable properties. A similar export to PNG images is available, and having both was an early design goal that was only possible with help of the Canvas surface.

Exporting diagrams to SVG format can be particularly useful when generating content for PDF files. The vector-based nature of SVG ensures that the rendered content retains its quality and scalability, as opposed to raster images that are resolution-dependent. Many GoJS users leverage this capability by exporting their diagrams as SVG or images and incorporating that content into their PDF documents, either on the server side or through other means.

Diagram.makeSvg generates a static SVG “image” representing the diagram. It’s important to note that the exported SVG is not interactive, meaning it cannot be manipulated or modified directly.

Rendering directly to SVG in GoJS: use cases

However, there are some use cases where interactive SVG rendering might work better, despite the reduced performance. For this, GoJS offers a built-in SVG renderer also.

SVG renderer for animated gifs

The SVG renderer can display animated gifs, unlike the Canvas renderer. Due to limitations in the HTML Canvas, gif frames beyond the first cannot be displayed. That’s why animated gifs in HTML Canvas are static pictures. SVG avoids this issue and can present gif animations. To do that, the user must set the GoJS diagram renderer to use SVG (see two pictures below to compare).

Below you can see the caffeine GoJS part while it’s rendered on the screen using this SVG inside of an <SVG> element:

Accessibility in SVG renderer

The SVG renderer generates DOM nodes encompassing all the text in the diagram. This feature can be advantageous for various screen readers as it ensures accessibility. SVG dynamically updates the DOM within an <SVG> element whenever necessary. However, this approach can significantly impact page performance, so that it is generally advised to use the SVG context only when required. But it offers the advantage of neatly organizing all TextBlock text into the DOM under <text> tags.

Powerful solution that combines SVG and HTML Canvas rendering

In conclusion, GoJS visual library supports both HTML Canvas and SVG rendering, while many visual libraries typically focus on utilizing only one of these solutions.

When comparing HTML Canvas rendering to SVG rendering, both have their advantages. HTML Canvas allows for drawing bitmap images, and delivering better performance for complex drawings with multiple objects and animations. On the other hand, SVG rendering makes accessibility easier.

GoJS’s support for both HTML Canvas and SVG rendering provides users with flexibility and options to choose the most suitable approach for their specific use cases. Whether leveraging the advantages of SVG graphics, benefiting from faster rendering in HTML Canvas, or exporting static diagrams to SVG for PDF generation, GoJS offers a comprehensive set of features to transform data into compelling visualizations.