From http://www.w3schools.com (Copyright Refsnes Data)

SVG In HTML Pages

SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.

SVG in HTML Pages

Below you should see three different methods on how to embed SVG files into HTML pages.

Using the <embed> Tag

The <embed> tag is supported in all major browsers, and allows scripting.

Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not listed in any HTML specification.

Syntax:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Note: The pluginspage attribute points to an URL for the plugin download.

Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.

Using the <object> Tag

The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is that it does not allow scripting.

Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag (at least not in Internet Explorer)!

Syntax:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Note: The codebase attribute points to an URL for the plugin download.

Using the <iframe> Tag

The <iframe> tag works in most browsers.

Syntax:

<iframe src="rect.svg" width="300" height="100">
</iframe>

I Wish....

It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:

<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>

<p>This is an HTML paragraph</p>

<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>

</body>
</html>