SVG Basic

SVG Shapes

SVG Filters

SVG Gradients

SVG Examples

SVG Reference

SVG In HTML Pages

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

SVG code can also be embedded directly into HTML pages, or you can link directly to the SVG file.

Embed SVG With the <embed> Tag

<embed>:

• advantage: supported in all major browsers, and allows scripting
• disadvantage: deprecated in HTML4 and XHTML (but allowed in HTML5)

Syntax:

Result:

Embed SVG With the <object> Tag

<object>:

• advantage: supported in all major browsers and is standard in HTML4, XHTML, and HTML5
• disadvantage: does not allow scripting

Syntax:

Result:

Embed SVG With the <iframe> Tag

<iframe>:

• advantage: supported in all major browsers
• disadvantage: generates a window-like border without specific styling, and not allowed in HTML4/XHTML strict DTD

Syntax:

Result:

Embed SVG code directly into the HTML

In Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari you can also embed the SVG code directly into the HTML code:

Link to an SVG File

You could also link to an SVG file with the <a> tag:

Result: