Embedded SVG in HTML

You can also embed SVG within a HTML document by using the following structure:

Code explanation

This is a straightforward HTML document. The important tags in the above example are the <object> and <embed> elements.

The <object> tag uses the data property to specify the url of the SVG document while the <embed> tag employs the src property.

If we wanted to adhere strictly to standards based coding then we would only use the <object> tag, but using this tag causes the SVG file to not appear in Netscape version browsers. As a consequence it is best to use both the <object> and <embed> tags or just the <embed> tag.

By using this method, we can combine the advantages of HTML and XHTML with SVG. For example, the chances of your pages being picked up by search engines are considerably enhanced when employing a mixture of HTML / XHTML and SVG.

This method also makes it easier to integrate other objects (e.g. sound, music, Flash) on the same page. This method is the preferred one until SVG is supported by the major browsers.