Embed SVG into HTML
Method 1: <img> tags
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87"
width="100"
/>
Embed the SVG directly into an image tag.
Cannot restyle the image with CSS pseudoclasses or JS with this method.
Method 2: In-line SVG
<svg width="300" height="200">
<rect width="100%" height="100%" fill="green" />
</svg>
Embed the SVG in-line with the HTML.
suitable if SVG is only being used in one place (resource-intensive)
Method 3: <iframe>
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>