The three simple ways to use SVG from a browser are:

  • Open an SVG file directly
  • Access an SVG file from within an HTML5 page using the object element
  • Embed the SVG file directly in the HTML5 page

You define the SVG document and store it in a file with .svg as the file extension. To add it to the HTML page requires, for example:

<p>This can be shown in the following diagram:</p>
<p><object width="620" height="420" data="mysvg.svg"  type="image/svg+xml"/></p>

The SVG Primer on the W3C site gives a lot more examples of how to access an SVG document but the three above will suffice for now.

Embedding the SVG file requires something like:

<!DOCTYPE html>
<html xml:lang="en" lang="en">
  <head>...</head>
  <body>
    ...
    <svg xmlns="http://www.w3.org/2000/svg" id="anim" width="1024" height="768">
      .....
    </svg>
    ....
  </body>
</html>

A major advantage is that changes can be made to the SVG document using scripting in the HTML5 document. This is how we achieve synchronisation between a soundtrack, which is an HTML5 audio element, and starting the SVG animation.

There are hazards too. Embedding several SVGs in a single HTML5 page could result in an overall stylesheet with conflicts. If you do this, make sure that the individual stylesheets associated with each SVG are compatible. One way of doing this is to have an id attribute on the svg element and making all CSS stylesheet rules relative to the relevant id attribute. Alternatively don't use CSS ;-)