HTML5 Inline SVG

HTML5 supports inline SVG

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector graphics for the web
  • SVG uses XML format to define graphics
  • SVG images maintain their graphic quality when scaled or resized
  • SVG is a standard of the World Wide Web Consortium

Advantages of SVG

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

  • SVG images can be created and modified with a text editor
  • SVG images can be searched, indexed, scripted, or compressed
  • SVG is scalable
  • SVG images can be printed at any resolution with high quality
  • SVG can be scaled without losing image quality

Browser Support

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 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>

Try It Yourself

Result:

SVG Tutorial

For more information about SVG, please visit our SVG Tutorial.