What is the difference between canvas and SVG

What is the difference between SVG and HTML5 canvas?


See Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG is an earlier standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level in that every shape drawn is saved as an object in a scene diagram or DOM, which is then rendered into a bitmap. This means that the browser can automatically re-render the scene when attributes of an SVG object are changed.

In the example above, the fact that the rectangle has been drawn is forgotten by the system once it has been drawn. If the position is to be changed, the entire scene must be redrawn, including any objects that may have been covered by the rectangle. In the corresponding SVG case, however, one could simply change the position attributes of the rectangle and the browser would determine how it should be redrawn. It is also possible to paint a canvas in layers and then recreate certain layers.

SVG images are represented in XML, and complex scenes can be created and managed using XML editing tools.

The SVG scene diagram allows event handlers to be associated with objects so that a rectangle may respond to an onClick event. To get the same functionality with Canvas, the coordinates of the mouse click must be manually matched with the coordinates of the drawn rectangle to see if it was clicked.

Conceptually, Canvas is a lower level protocol that SVG could be built on. [Citation required] However, this is (usually) not the case - these are independent standards. The situation is complicated because there are scene diagram libraries for canvas and SVG has some bitmap manipulation capabilities.

UPDATE: I use SVG because of its markup language capabilities - it can be handled by XSLT and have other markup in its nodes. Likewise, I can keep SVG in my markup (chemistry). This allows me to edit SVG attributes (e.g. rendering) using markup combinations. This may be possible in Canvas, but I suspect it is a lot more difficult.

SVG is like a "draw" program. The drawing is given as a drawing instruction for each shape, and any part of any shape can be changed. Drawings are shape-oriented.

Canvas is like a "painting" program. Once the pixels appear on the screen, this is your drawing. You can only change shapes by overwriting them with different pixels. Paintings are pixel-oriented.

For some programs it is very important to be able to change drawings. eg drawing apps, diagram tools etc. SVG has an advantage here.

For some artistic programs it is important to be able to control individual pixels.

It is easier with Canvas than SVG to get great animation performance for user manipulation over mouse hoists.

A single pixel on the computer screen often consumes 4 bytes of information, and a computer screen today takes up several megabytes. As a result, Canvas may be inconvenient if you want the user to edit an image and then upload it again.

In contrast, drawing a handful of shapes that cover the entire screen with SVG takes a few bytes, downloads quickly, and is easy to upload again, with the same benefits going one way as going the other Direction is going. So SVG can be faster than canvas.

Google implemented Google Maps with SVG. This gives the web app its brisk performance and smooth scrolling.

High level summary of Canvas vs. SVG


  1. Pixel based (Dynamic .png)
  2. Single HTML element. (Check item in developer tool. You can only see canvas tags.)
  3. Changed just through the script
  4. The interaction between the event model and the user is detailed (x, y).
  5. The performance is better with a smaller surface area, a larger number of objects (> 10,000) or both


  1. Shape based
  2. Several graphical elements that become part of the DOM
  3. Changed by script and CSS
  4. Event model / user interaction is abstracted (rect, path)
  5. Performance is better with a smaller number of objects (<10 KB), a larger surface area, or both

You can find detailed information on the differences at http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

There is a difference in what they are and what they do for you.

  • SVG is a document format for scalable vector graphics.
  • Canvas is a Javascript API for drawing vector graphics on a bitmap of a certain size.

To go into more detail about the format and API:

Svg allows you to view, save, and edit the file in many different tools. With canvas, you just draw and nothing remains of what you've just done other than the resulting image left on the screen. You can animate both of them. SVG does the redrawing for you by just looking at the specified elements and attributes. With Canvas, you have to redraw each frame yourself using the API. You can scale both of them, but SVG will do it for you. If you use the artboard again, you must reissue the drawing commands for the specified size.

Two things that struck me the most about SVG and Canvas were:

Ability to use Canvas without a DOM, with SVG being heavily dependent on the DOM and slowing down performance as complexity increases. Like in game design.

The advantage of using SVG is that the resolution remains the same on all platforms that lack Canvas.

You will find a lot more details on this page. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

It absolutely depends on your need.

  • If you only want to display an image / diagram on one screen, it is recommended as a canvas. (Example is PNG, GIF, BMP, etc.)

  • If you want to expand the functionality of your graphics, e.g. For example, if you move the mouse over the diagram and want to zoom in on a certain area without affecting the display quality, select SVG. (Good examples are AutoCAD, Visio, and GIS files).

If you want to create a dynamic flowchart creation tool with shape connector, it is better to choose SVG instead of CANVAS.

  • As the screen gets bigger, the canvas starts to deteriorate as more pixels need to be drawn.

  • As the number of objects on the screen increases, SVG begins to grow
    deteriorate as we continuously add them to the DOM.

See also: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

is a specification of a drawing such as a file format. An SVG is a document. You can exchange SVG files like HTML files. Also, because SVG elements and HTML elements share the same DOM API, it is possible to use JavaScript to generate an SVG DOM in the same way as an HTML DOM. However, you don't need JavaScript to generate an SVG file. A simple text editor is sufficient to write an SVG. However, you will need at least a calculator to calculate the coordinates of the shapes in the drawing.

is just a drawing area. It is necessary to use JavaScript to generate the contents of an artboard. You cannot swap a canvas. It's not a document. And the elements of the artboard are not part of the DOM tree. You cannot use the DOM API to manipulate the contents of an artboard. Instead, you need to use a dedicated canvas API to draw shapes on the canvas.

The advantage of a is that you can exchange the drawing as a document. The advantage of is that there is a less verbose JavaScript API to generate the content.

Here's an example that shows you can get similar results, but the way you do it in JavaScript is very different.

As you can see, the result is almost the same, but the JavaScript code is completely different.

SVG is created using the DOM API, and. All graphics are in the attribute strings. SVG has stronger primitives. For example, the CANVAS has nothing that corresponds to the SVG arch path. The CANVAS example tries to emulate the SVG arc with a Bezier curve. In SVG, you can reuse elements to transform them. You cannot reuse elements in CANVAS. Instead, you need to write a JavaScript function to call it twice. SVG has one that allows normalized coordinates to be used, which makes rotations easier. In the CANVAS you have to calculate the coordinates yourself using the and. And you can format all SVG elements with CSS. In CANVAS you cannot style anything with CSS. Because SVG is a DOM, you can assign event handlers to all SVG elements. The elements in CANVAS have no DOM and no DOM event handlers.

On the other hand, the CANVAS code is much easier to read. You don't have to worry about XML namespaces. And you can call the graphics functions directly because you don't have to create a DOM.

The lesson is clear: if you want to quickly draw some graphics, use the CANVAS. If you want to share the graphics, format them with CSS, or use DOM event handlers in your graphics, create an SVG.

Adding to the above:

SVG is easy to transmit over the web when compared to JPEG, GIF, etc., and also scales extremely when resized without losing quality.

It is based on an object model.
Is suitable for the use of large rendering areas.
SVG has all support for event handlers.
Changes are permitted via script and CSS.
SVG has better scalability
SVG is vector based (made up of shapes).
SVG is not suitable for game graphics. SVG does not depend on the resolution.
SVG is suitable for API animation.
SVG is good for printing with high quality and any resolution.

Canvas elements

It's pixel-based.

Is suitable for small renderings

Canvas does not provide any recourse for event handlers.

Changes are only allowed through the script.

Canvas has poor scalability.

Canvas is based on a grid (consists of one pixel).

Canvas is suitable for game graphics.

Canvas is completely dependent on the resolution.

Canvas doesn't have an API for animation.

Canvas is not suitable for high quality, high resolution printing.

We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.

By continuing, you consent to our use of cookies and other tracking technologies and affirm you're at least 16 years old or have consent from a parent or guardian.

You can read details in our Cookie policy and Privacy policy.