HTML5 inline SVG

HTML5 understøtter inline SVG.

Hvad er SVG?

  • SVG betyder skalable vektorgrafikker (Scalable Vector Graphics)
  • SVG bruges til at definere vektorbaserede grafikker til brug på internettet
  • SVG uses XML format to define graphics
  • The graphical quality of SVG images is not lost 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 in 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.