Latest web development tutorials

SVG in HTML

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

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

Using the <embed> tag

<Embed>:

  • Advantages: All major browsers are supported, and allows scripting
  • Cons: Not recommended for use in HTML4 and XHTML (but allowed in HTML5)

grammar:

<embed src="circle1.svg" type="image/svg+xml" />

result:

Using the <object> tag

<Object>:

  • Advantages: All major browsers are supported, and support for HTML4, XHTML and HTML5 standard
  • Disadvantages: does not allow the use of scripts.

grammar:

<object data="circle1.svg" type="image/svg+xml"></object>

result:

Use <iframe> tag

<Iframe>:

  • Advantages: All major browsers are supported, and allows scripting
  • Cons: Not recommended for use in HTML4 and XHTML (but allowed in HTML5)

grammar:

<iframe src="circle1.svg"></iframe>

result:

SVG embedded directly into HTML code

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

Note: SVG can be embedded directly into Opera.

Examples

<html>
<body>

<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>

</body>
</html>

try it"

Link to SVG files

You can also link to a label with <a> SVG files: Link to SVG files

You can also link to a label with <a> SVG files:

<a href="circle1.svg">View SVG file</a>

result:

View SVG file