SVG in HTML

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>

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