SVG in HTML pages

SVG files can be embedded in HTML documents using the following tags: <embed>, <object>, or <iframe>.

SVG in HTML pages

Next, you will see three different methods to embed SVG files into HTML pages.

Use the <embed> tag

The <embed> tag is supported by all mainstream browsers and allows the use of scripts.

Note:Using the <embed> tag to embed SVG in an HTML page is the recommended method by Adobe SVG Viewer! However, if you need to create valid XHTML, you cannot use <embed>. The <embed> tag is not defined 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 the URL for downloading the plugin.

Use the <object> tag

The <object> tag is a standard tag in HTML 4, supported by all newer browsers. Its drawback is that it does not allow the use of scripts.

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

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 the URL for downloading the plugin.

Using the <iframe> tag

The <iframe> tag works in most browsers.

Syntax:

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

I expect...

It would be great if you could simply add SVG elements to HTML code by referencing 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>