HTML5 inline SVG

HTML5 support inline SVG.

What is SVG?

• SVG Scalable vector graphics means (Scalable Vector Graphics)
• SVG for graphics used to define the vector-based network
• SVG uses XML format definition graphics
• SVG image to enlarge or change in the size of its image quality will not be lost
• SVG is a standard World Wide Web Consortium

SVG advantage

Compared with other image formats (such as JPEG and GIF), using SVG advantages:

• SVG images can be created and modified using a text editor
• SVG images can be searched, indexed, scripted or compressed
• SVG is scalable
• SVG images can be printed in any high quality resolution
• SVG may be exaggerated in the image quality does not decline

Browser Support

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

The SVG embedded directly in HTML page

In HTML5, you will be able to SVG elements directly into the HTML page:

result:

Learn more about SVG tutorial, please visit SVG tutorial .

SVG and Canvas difference between the two

SVG is a 2D graphics using XML description language.

Canvas to draw 2D graphics using JavaScript.

SVG based on XML, which means that each element in the SVG DOM is available. You can attach JavaScript event handlers for an element.

In SVG, each deemed to be drawn graphic objects. If the property SVG object changes, the browser can automatically reproduce the graphics.

Canvas is rendered pixel by pixel. In the canvas, once the graphic is drawn is complete, it will not continue to be the browser's attention. If the position is changed, then the whole scene also needs to be redrawn, including any objects that may have been covered with graphics.

Comparison of SVG and Canvas

The following table lists some of the differences between the canvas and SVG.