How to Build an Image in Your HTML5 Page with the <svg> Tag

By Andy Harris from HTML5 For Dummies Quick Reference

The <svg> element allows you to build a vector-based image directly in the page using the SVG markup language. It's often used to create charts or other visualizations dynamically. Sample coding looks like this:

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 200 100"
width="200px" height="100px">
<circle cx="50" cy="50" r="30"
        style="stroke:#0000ff; stroke-width: 5px; fill:#ff0000;"/>
<rect x = "100"
      y = "0"
      height = "50"
      width = "50"
      stroke-width = "2px"
      stroke = "#ffff00"
      fill = "#00ff00" />
</svg>

The output of this sample code looks like:

SVG uses an XML system very similar to XHTML. Each element is described by a tag, which has various attributes defining its size, position, and color. You can modify SVG elements with a form of CSS; You can create and modify SVG code in real time with JavaScript code; or export an SVG image from a tool like Dia or Inkscape, and embed the resulting drawing directly in the page.

The main advantage of a vector-based image format like SVG is the ability to scale the image without losing image quality.

All major browsers, except IE versions before IE9, support some level of SVG.

For more information on the SVG standard, check out the W3C SVG page.