SVG in HTML Page

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

SVG code can be directly embedded into an HTML page, or you can link directly to an SVG file.

Using the <embed> Tag

<embed>:

• Advantages: Supported by all major browsers and allows scripting.

• Disadvantages: Not recommended for HTML4 and XHTML (but allowed in HTML5).

Syntax:

Result:

Using the <object> Tag

<object>:

• Advantages: Supported by all major browsers and supports HTML4, XHTML, and HTML5 standards.

• Disadvantages: Does not allow scripting.

Syntax:

Result:

Using the <iframe> Tag

<iframe>:

• Advantages: Supported by all major browsers and allows scripting.

• Disadvantages: Not recommended for HTML4 and XHTML (but allowed in HTML5).

Syntax:

Result:

Directly Embedding SVG Code in HTML

In Firefox, Internet Explorer 9, Google Chrome, and Safari, you can directly embed SVG code in HTML.

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Linking to an SVG File

You can also link to an SVG file using the <a> tag:

Result: View SVG File