HTML5 Inline SVG

HTML5 supports inline SVG.

image.png


What is SVG?

  • SVG refers to Scalable Vector Graphics (Scalable Vector Graphics)

  • SVG is used to define vector-based graphics for the web

  • SVG uses XML format to define graphics

  • SVG images will not lose their graphic quality when they are enlarged or changed in size

  • SVG is the standard of the World Wide Web Consortium

SVG advantages

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

  • SVG images can be created and modified through a text editor

  • SVG images can be searched, indexed, scripted or compressed

  • SVG is scalable

  • SVG images can be printed with high quality at any resolution

  • SVG can be enlarged without degradation of image quality

Browser support

Internet Explorer Firefox Opera Google Chrome Safari

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

Embed SVG directly into HTML page

In HTML5, you can embed SVG elements directly in HTML pages:

Example

<!DOCTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>
  </body>
</html>

 Try It! 

To learn more about the SVG tutorial, please visit the SVG tutorial . (under construction)

The difference between SVG and Canvas

SVG is a language that uses XML to describe 2D graphics.

Canvas draws 2D graphics through JavaScript.

SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn graphic is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.

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

Comparison of Canvas and SVG

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

CanvasSVG

  • Depends on resolution

  • Event handler is not supported

  • Weak text rendering capabilities

  • Ability to save the resulting image in .png or .jpg format

  • Best for image-intensive games where many objects will be redrawn frequently

  • Independent of resolution

  • Support event handler

  • Best for applications with large rendering areas (such as Google Maps)

  • High complexity will slow down rendering speed (any application that overuses DOM is not fast)

  • Not suitable for gaming applications