The best SVG in HTML Tutorial In 2024, In this tutorial you can learn
Using the <embed> tag,Using the <object> tag,Use <iframe> tag,SVG embedded directly into HTML code,Examples,Link to SVG files,
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>
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