Canvas vs SVG: Choosing the Right Tool for the Job

HTML5 Canvas vs. SVG: Which one to choose?

HTML5 Canvas and SVG are both based on standard HTML5 technologies that can be used to create stunning graphics and visual effects. This article discusses a key question: Which technology is more suitable to choose in the project? In other words, in what cases are you more inclined to use HTML5 Canvas than SVG?

First, let's briefly introduce HTML5 Canvas and SVG.

Key Points

• HTML5 Canvas and SVG are both HTML5 technologies used to create graphical and visual experiences. Canvas relies on resolution and is used to dynamically render graphics, game graphics, artworks, or other visual images. SVG (Scalable Vector Graphics) is an XML file format that maintains its quality when scaling.
• HTML5 Canvas and SVG work completely differently. Canvas is an instant graphics system that is discarded once the pixels are drawn. SVG adopts a retention mode, where every object drawn is added to the browser's internal model, which is easier for developers but may affect performance.
• HTML5 Canvas is ideal for graphics-intensive, highly interactive games, generative art, and scenes where there are many objects that need to be drawn on small surfaces. However, when zoomed in or displayed on a Retina display, its quality may drop.
• SVG is preferable for scenarios that require scalability (such as high fidelity, complex graphics such as architectural and engineering drawings, biological drawings and organizational drawings). SVG is also better in terms of accessibility, as it can be read by humans and machines.
• HTML5 Canvas and SVG can be combined for advanced scenarios. For example, a Canvas-based game can use an SVG image as a spritz, or a drawing program can use SVG to design its user interface and embed Canvas elements for drawing.

What is HTML5 Canvas?

WHATWG specification introduces the canvas element as follows:

The

canvas element provides a resolution-dependent bitmap canvas for the script to render graphs, game graphics, artworks, or other visual images on the fly.

In other words, the <canvas></canvas> tag provides a surface where you can create and manipulate raster images pixel by pixel using a JavaScript programmable interface.

This is a basic code example:

(The CodePen example should be embedded here to show the basic Canvas shape)

Due to the resolution dependence, images created on <canvas></canvas> may degrade quality when zoomed in or displayed on a Retina display.

Drawing simple shapes is just the tip of the iceberg. HTML5 Canvas API allows you to draw arcs, paths, text, gradients, and more. You can also operate images pixel by pixel. This means you can replace colors in certain areas of the graphics, animate your drawings, and even draw the video onto the canvas and change its appearance.

What is SVG?

SVG represents scalable vector graphics. According to the specification:

SVG is a language used to describe two-dimensional graphics. It uses XML syntax when used as a standalone format or when mixed with other XML. When mixed with HTML5, it uses HTML5 syntax...

SVG drawings can be interactive and dynamic. Animation can be defined and triggered by declarative means (i.e. by embedding SVG animation elements in SVG content) or through scripts.

SVG is an XML file format used to create vector graphics. The scalable properties enable it to increase or decrease vector images while maintaining clarity and high quality. (The HTML5 Canvas generated image can't do this).

The following is the same red square drawn using SVG (created previously using HTML5 Canvas):

(The CodePen example should be embedded here to show the basic SVG shape)

You can use SVG to perform most of the operations that can be performed with Canvas, such as drawing shapes and paths, gradients, patterns, animations, and more. However, the two technologies work fundamentally differently. Unlike Canvas-based graphics, SVG has a DOM, so it can be accessed by both CSS and JavaScript. For example, you can use CSS to change the appearance of an SVG graph, animate its nodes using CSS or JavaScript, so that any part responds to mouse or keyboard events like

. As will be seen more clearly in the following sections, this difference plays a significant role when you need to choose between Canvas and SVG in your next project.

Real-time mode and retention mode

It is crucial to distinguish between real-time mode and retention mode. HTML5 Canvas is an example of the former and SVG is an example of the latter.

Real-time mode means that once your drawing is on the canvas, the canvas stops tracking it. In other words, as a developer, you need to formulate commands to draw objects, create and maintain the model or scenario of what the final output should look like, and specify what needs to be updated. The browser's graphics API simply conveys your drawing commands to the browser, and the browser executes those commands.

SVG uses retention mode, you simply issue a drawing instruction for what you want to display on the screen, and the browser's graphics API will create the final output in-memory model or scene and convert it into the browser's drawing command .

As an instant graphics system, Canvas does not have a DOM or document object model. With Canvas, you draw pixels and the system forgets all of them, reducing the extra memory required to maintain the internal model of the drawing. With SVG, each object you draw is added to the browser's internal model, which makes your life a little easier as a developer, but pays some price when it comes to performance.

Based on the difference between real-time mode and retention mode, as well as other specific features of Canvas and SVG each, some situations where using one technology rather than another might better serve the project’s goals.

HTML5 Canvas: Pros and Cons

The HTML5 Canvas specification explicitly recommends that authors should not use the

element when other more appropriate methods are available. <canvas></canvas>

For example, for graphically rich elements, the best tools are HTML and CSS, not

(By the way, SVG is not either). This view was confirmed by Dr Abstract, the creator and founder of Zim JS canvas framework, who wrote: <canvas></canvas>

DOM and DOM frameworks are good at displaying information, especially text information. In contrast, the canvas is a picture. Text can be added to the canvas and can make it responsive, but text cannot be selected or searched as easily as it is on the DOM. Long scrolling text pages or text and image pages are a great use for DOM. DOM is perfect for social media sites, forums, shopping and all the information apps we are used to using. ——"When to use JavaScript canvas library or framework"

So here is a clear example of when not to use

. But when is <canvas></canvas> a good choice? <canvas></canvas>

(Sarah Drasner's tweet screenshot should be embedded here)

What is Canvas good at?

Alvin Wan benchmarked the performance of Canvas and SVG based on the number of objects drawn and the size of the object or the canvas itself. He summarized the results as follows:

Anyway, the overhead of DOM rendering is more obvious when dealing with hundreds or even thousands of objects; in this case, Canvas is the obvious winner. However, neither the canvas nor the SVG are affected by the object size. Given the final statistics, the canvas offers a clear advantage in terms of performance.

Based on what we know about Canvas, especially its excellent performance in drawing a large number of objects, here are some scenarios that may be suitable or even better than SVG.

Game and Generative Art

Canvas is usually the best choice for graphic-intensive, highly interactive games, and generative art.

Ray Tracing Ray tracing is a technique for creating 3D graphics.

Ray tracing can be used to fill an image by tracking the ray paths of pixels in the image plane and simulating its encounter with a virtual object...The effects achieved by ray tracing... Range from...Creating realistic images from simple vector graphics Apply a photo-like filter to remove red eyes. ——SVG and Canvas: How to choose, Microsoft Docs.

If you are curious, this is the ray tracing application that Mark Webster is running.

However, while HTML5 Canvas is certainly more suitable for this task than SVG, this does not necessarily mean that ray tracing is best performed on the

element. In fact, the pressure on the CPU can be so high that the browser may stop responding.

Draw a large number of objects on small surfaces

Another example is a scene where an application needs to draw a large number of objects on a relatively small surface—such as non-interactive real-time data visualizations, such as graphical representations of weather patterns.

Pixel replacement in video

As shown in this HTML5 Doctor article, another example suitable for using Canvas is to replace the video background color with a different color, another scene, or image.

What is HTML5 Canvas not good at?

On the other hand, in many cases, Canvas may not be the best choice compared to SVG.

Scalability

Most scenarios where scalability is an advantage will better use SVG instead of Canvas. High fidelity, complex graphics, such as architectural and engineering drawings, organizational drawings, biological drawings, etc., are examples of this situation.

When drawing with SVG, enlarging the image or printing the image will retain all the details to achieve a very high level of quality. You can also generate these documents from the database, which makes the XML format of SVG perfect for this task.

In addition, these graphics are usually interactive. For example, when you book your tickets online, consider the seat map, which makes it an excellent use case for retained graphics systems like SVG.

That is, with some excellent libraries like CreateJS and Zim (Extended CreateJS), developers can integrate their mouse events, hit tests, multi-touch gestures, drag and drop functions, controls, and more relatively quickly into In creation based on Canvas.

Accessibility

While you can take some steps to improve accessibility of Canvas graphics – a good Canvas library (such as Zim) can help you speed up the process – Canvas is not great when it comes to accessibility. What you draw on the surface of the canvas is just a bunch of pixels that assistive technology or search engine robots cannot read or interpret. This is another preferable area for SVG: SVG is just XML, which allows both humans and machines to read it.

Not dependent on JavaScript

If you don't want to use JavaScript in your application, Canvas is not your best choice. In fact, the only way you use

elements is to use JavaScript. Instead, you can draw SVG graphics using standard vector editing programs like Adobe Illustrator or Inkscape, and you can use pure CSS to control its appearance and perform compelling, subtle animations and micro-interactions. <canvas></canvas>

Combining HTML5 Canvas and SVG for advanced scenarios

In some cases, your application can get the best of both worlds by combining HTML5 Canvas and SVG. For example, Canvas-based games can use SVG images generated by vector editing programs as sprites to take advantage of their scalability and a smaller download size compared to PNG images. Alternatively, a drawing program can design its user interface using SVG and embed <canvas></canvas> elements for drawing.

Finally, a powerful library like Paper.js allows you to write vector graphics scripts on top of HTML5 Canvas, giving developers a convenient way to use both technologies at the same time.

Conclusion

In this article, I explore some of the key features of HTML5 Canvas and SVG to help you determine which technology is best for a particular task.

What is the answer?

Chris Coyier agrees with Benjamin De Cock, who tweeted:

An extremely basic way to answer this question is "use canvas when you can't use svg" (where "cannot" can mean animating thousands of objects, manipulating each pixel individually, etc.). In other words, SVG should be your default choice and canvas is your backup plan.

— Benjamin De Cock (@bdc) October 2, 2019

Dr Abstract provides a list of many of the best things to build with Canvas, including interactive logos and advertising, interactive infographics, e-learning applications and more.

In my opinion, there are no hard and fast rules on when it is best to use Canvas instead of SVG. The difference between real-time mode and retention mode shows that HTML5 Canvas is the undisputed winner when it comes to building graphics-intensive games, and SVG is preferable for flat images, icons, UI elements, etc. However, in between, HTML5 Canvas also has room to expand its scope of application, especially considering what a variety of powerful Canvas libraries can provide. Not only do they make it easier to use both technologies at the same time in the same graphical work, but they also make some difficult features in Canvas native projects (such as interactive controls and events, responsiveness, accessibility features, and more) now available for This opens the door to more interesting uses of HTML5 Canvas, which is used by most developers.

FAQs for Canvas vs. SVG

(The FAQ part should be included here, rewritten according to the original content, keep it concise and clear, and use more natural language expression.)

The above is the detailed content of Canvas vs SVG: Choosing the Right Tool for the Job. For more information, please follow other related articles on the PHP Chinese website!