How to Embed SVG in HTML



SVG stands for Scalar vector Graphics and it is used to display vector based graphical objects in webpages. The quality of SVGs can be determined by zooming them. If there is no reduction of the image quality in zooming in or out, the svg is said to be in best quality.
In this tutorial we will learn to embed svg in html.
Step # 1 – Open IDE
Coming towards embedding svg in html, first let us open an IDE, let’s say Dreamweaver. Now, from its menu, choose HTML from Create New.
Create New “HTML” option

Step # 2 – Embed Element
The code shown in the image can be used to understand how we can embed svg in html.
Embed svg Element

Step # 3 – Object Element
The <object> tag can also be used to embed svg in html5.
Object Tag

Step # 4 – iframe Tag
<iframe> tag can as well be used to embed svg in html5.
iframe Tag

Step # 5 – Direct Embed
Moreover, if we plan to directly embed svg in html5, then the code shown in the image below can be used, where in the example, a black circle is created to embed our svg image.
Direct Embedding using circle