SVG Tutoriallogin
SVG Tutorial
author:php.cn  update time:2022-04-18 17:51:50

SVG in HTML



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

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


Use the <embed> tag

<embed>:

  • ##Advantages: All major browsers support and allow use Script

  • Disadvantages: Deprecated in HTML4 and XHTML (but allowed in HTML5)

Syntax:

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

Use the <object> tag

<object>:

    Advantages: Supported by all major browsers and supports HTML4, XHTML and HTML5 Standard
  • Disadvantages: Scripts are not allowed.
Syntax:

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

Use <iframe> tag

<iframe>:

    Advantages: Supported by all major browsers and allows scripting
  • Disadvantages: Not recommended Used in HTML4 and XHTML (but allowed in HTML5)
Syntax:

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

Embed SVG code directly in HTML

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

Note:

SVG cannot be directly embedded into Opera.

Instance

<!DOCTYPE html>
<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>

Run Instance»
Click the "Run Instance" button to view the online instance

Link to SVG file

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

You can also use the <a> tag Link to an SVG file:

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

View SVG file