HTML5 inline SVG


HTML5 supports inline SVG.

What is SVG?

  • SVG refers to 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 resized

  • SVG is a standard of the World Wide Web Consortium

SVG Advantages

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

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

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

  • SVG is scalable

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

  • SVG can be enlarged without loss of image quality

Browser support

Internet Explorer

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

Embed SVG directly into HTML pages

In HTML5, you can embed SVG elements directly into 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>

Run Instance»

Click the "Run Instance" button to view the online instance

Result:

Sorry, your browser does not support inline SVG.

To learn more about SVG tutorials, please visit SVG Tutorial.

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 every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

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

Canvas is rendered pixel by pixel. In canvas, once a graphic is drawn, it no longer gets the browser's attention. If its position changes, 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

  • No support for event handlers

  • Weak text rendering capabilities

  • Can be used as .png or .jpg Save the resulting image in the format

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

  • Resolution independent

  • Supports event handlers

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

  • High complexity will slow down rendering (any application that excessively uses the DOM is not fast)

  • Not suitable for game applications

←
→