SVG and canvas in the HTML5

When I thought of the data yesterday, I found that SVG and canvas in HTML5 could represent graphs, so what are the differences between them? How do you use them correctly?

1.svg: Scalable Vector graphics, (Scalable vector graphic), SVG uses XML format to define images.

canvas:<canvas> tags define graphics,;<canvas> labels than tables and other images are just graphics containers , you must use scripts to draw graphics .

2. Another important difference between <canvas> tags and SVG is: (VML I haven't learned yet, follow-up will be understood and documented)

<canvas> has a JavaScript-based drawing API, and SVG uses an XML document to describe the drawing.

The two approaches are functionally equivalent, and any one can be modeled with another. On the surface, they are very different, but each has strengths and weaknesses.

For example, SVG drawings are easy to edit, as long as the element is removed from its description. To remove an element from a <canvas> tag in the same shape, you often need to erase the drawing and redraw it.

3, SVG drawing out each of the graphical elements are independent DOM node, can facilitate late binding event or modification, and canvas output is a whole canvas;

SVG output graphics are vector, later can be modified parameters from Zoom out, no distortion, canvas output scalar canvas, just like a picture.

4. SVG is a method of drawing vectors on a Web page, and the structure is based on XML. The biggest difference between him and canvas is that each of his graphs is independent and has an "HTML tag" that can be manipulated separately (this is a bit like flash)

Canvas drawings are attached to the canvas area, but the graphics are not operational, if you want to manipulate the graphics, is to directly manipulate the entire canvas, that is, empty canvas and redraw.

Here is the final finishing result oh;

What canvas and SVG have in common:

1, are the new label HTML5;

2, can use CSS and JS to operate;

3, the browser support for them is not very high;

The difference between canvas and SVG:

1, SVG graphics are called vectors, canvas graphics are called bitmaps;

2, SVG each graph is the independent label, may carry on the independent operation, the canvas element has only one label, inside all the graph is a whole, if wants to operate to the canvas image, can only clear out in redraw;

3, SVG session 200 circle, the page may have 200 tags, and canvas painting 200 circles, the page is still only a canvas element;

4, SVG graphics can be entrained text, SEO (search engine) can be very good search for relevant information, SEO is not the search canvas.

So the two kinds of tags can basically achieve the results we want, in this case, how can we determine which label to use?

SVG uses:

SVG because it is a vector graph, so he is very good at the point line surface such graphics, he can be used to implement a Web Excel graphics report.

SVG cross-PC and mobile

SVG is not good at making complex animations, because its animation involves too many elements-reaching, and animation n elements of the efficiency is not high

In particular, SVG cannot achieve too complex an effect, as long as his label is more, the efficiency will drop sharply

Canvas Uses:

Canvas Although every animation to redraw the canvas, but he is efficient, you can make not very complex animation effects, games, and audio tags, etc., can make a good game.

Canvas is good at animation because he will empty the canvas without causing the element to accumulate too many dead browsers

It spans PC and mobile platforms with no pressure

Note: The canvas's drawing process must be tricky, or it will probably be stuck in a browser.

After writing this, I myself have a certain understanding of these two tags, but also hope to see this blog friend can have a new understanding of the two tags oh, I am a novice, but also need to refuel ('? ') ).

SVG and canvas in the HTML5