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:

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:

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

Using the <iframe> Tag

The <iframe> tag works in most browsers.

Syntax:

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:

729,913 sites built with Wix. Make your own

Click here to design a Stunning Flash Website for Free

Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.

With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.