2D image drawing technology in HTML5

Canvas and SVG are main 2D graphic technologies in HTML5. The previous one provides the canvas label and drawing API. The post one provides one complete set of independent vector image language. There have been more than then years (from 2003.1 till now) since being W3C standard. Generally speaking, Canvas technology is much new. It develops from a small range to a wide scope of acceptance. Concern handling of grid images. SVG has long history. It has become the international standard very early, complicated, and developed slowly (Adobe SVG Viewer has no big update in recent ten years) 

Canvas vs SVG

<canvas> and <svg> are image technologies recommended by HTML5. Canvas, based on elements, provides 2D drawing function, is a kind of HTML element type, and relies on HTML. It can draw images only via scripts; SVG is a vector and provides a series of image elements (Rect, Path, Circle, Line.... There are complete animation and event mechanism. It can be used independently, or built into HTML. SVG has become an international standard earlier. The current stable version is 1.1 –http://www.w3.org/TR/SVG/. Main features of two parts are showed in the following table: 

SVG Converts to Canvas

SVG is an old technology. There are many existing SVG images and icons. These sources are also be used to Canvas, such as usage of CanvasRenderingContext2D#drawImage(), possible to draw SVG images in Canvas. In addition, there is a third-party base(canvg.js) that supports to analysis child elements of SVG, and draws via Canvas. If to convert SVG file to Canvas code. Use online tools of SVG2Canvas