Should I use <img>, <object>, or <embed> for SVG files?

To add SVG files, you can use <img> <object>, or <embed> element in HTML. Choose any one of them according to your requirement. Here’s how you can add SVG,

<img> element

Use the <img> tag for images without interaction.

The disadvantage is you cannot manipulate images with JavaScript.

<img src = "new.svg" alt = "craft" height = "100px" width = "100px" />

<object> element

The <object> element is used to define an embedded object within an HTML document. Use it to embed multimedia like audio, video, flash, etc in the web page.

<object type = "image/svg+xml" data = "new.svg">
   Your browser does not support SVG
</object>

<embed> element

The <embed> tag wasn’t part of the HTML 4 specification and is new in HTML5. It validates in an HTML5 page.

<embed type = "image/svg+xml" src = "image.svg" />