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