Using canvas or svg

Community Help
1

Is there something that cannot be done with svg that justify using html5 canvas ?

1 Like
2

Yes, try animating 100 000 points using svg

And then see how 262144 point is animated using canvas

1 Like
3

Ok, then Why use SVG ?

– Here’s a first auto-answer on https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div

1 Like
4

I prefer canvas because I find it easier to work with its stateless nature (context properties aside). Also, you can control the output down to a pixel and add fade/trail effects that make it easier to analyse motion and other differences. Also, blend modes.

Edit: Note that performance drops drastically if draw operations are applied to a large area or to a live canvas (that is, a canvas that is attached to the DOM).

Edit 2: canvas allows you to right-click and save as image. SVG requires extensions or additional libraries for that.

1 Like
5

@maliky To add to my previous answer: SVG vs Canvas is not an all-or-nothing decision. For each task you pick the one that fits your use case best. If you add more details to your question we can provide you with more insightful answers.

6

SVG gives some built-in mouse handling behavior (like making shapes into click targets). It allows exporting a vector diagram that can be opened in other programs. If your client supports it, SVG images can be arbitrarily resized without re-rendering (e.g. zooming in/out on a smartphone/tablet can show a sharp picture instead of pixely blobs). Individual parts of an SVG can be shown/hidden, altered, moved, etc. without re-rendering the rest of the drawing. Some animation features are natively supported.

Canvas is a bitmap that you can draw shapes or images onto, but they become indelibly part of the canvas. All you can do is draw things on top of what you already had, or completely erase sections of the canvas. For any higher-level features, you basically need to build them yourself from scratch (or use someone else’s code that did so on top of the basic canvas APIs offered by browsers).

The advantage for canvas is that the browser is just storing pixels, not a complicated DOM tree with a bunch of state saved. This can in many cases be more efficient.

1 Like