Introduction to Web Chart (1) Web-side graphics Rendering SVG,VML, HTML5 canvas technology comparison

Let me introduce the concept of vector graph:

Vector graphs use lines and curves to describe graphics, elements of which are points, lines, rectangles, polygons, circles, and arcs, all of which are computed by mathematical formulas. For example, a flower vector graphic is actually formed by the outline of the line lines, the color of the outer frame and the color of the outer frame to determine the color of the flower display.

SVG,VML, HTML5 Canvas These three techniques are plotted in vector graphs. It was developed by a variety of vendors. The effect to be achieved is basically the same.

1. VML

Full vector Markup Language (Vector Markup Language). It was released by Microsoft in September 1999 with IE5.0.

Browser support:

Internet Explorer 5++--Internet Explorer 8

IE9 later supported SVG.

IE10 has seen VML as outdated technology.

http://msdn.microsoft.com/zh-cn/library/ie/hh801223 (v=vs.85). aspx

2. SVG

The full name Scalable vector Graphics (Scalable Vector graphics) is an xml-based, graphical format for describing two-dimensional vector graphics.

In January 2003, SVG 1.1 was established as the standard for the consortium. The organizations involved in defining SVG are: Solar micro systems, Adobe, Apple, IBM, and Kodak.

Browser support:

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG.

3. HTML5 Canvas

The HTML5 canvas element uses JavaScript to draw an image on a Web page.

The canvas is a rectangular area in which you can control each pixel.

Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Browser support

The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features.

Summarize

So when you want to display graphics in browser, the techniques used for different browsers are different.

Using VML to draw graphics is a slow speed. Basically 50 nodes plus some associated pages will be blunt.

VML will gradually exit. However, currently IE8 and the following version of the use of IE browser is still very high. So it has to be balanced.

The HTML5 standard has not yet been fully formulated and the future is unknown. There are also some problems with browser support.

For now, SVG seems to be the mainstream.

However, for graphic rendering, there are many JS library can be used, these library has been dealing with the compatibility of various browsers. The solution is to use different techniques for different browsers and versions. It's just that for us to use these library, there's no need to focus on browser compatibility.