Embedding external SVG files in HTML

You can use the <img> or <object> elements to embed external SVG elements. Setting the height and width is optional but is highly recommended.

Using the image element

<img src="attention.svg" width="50" height="50">

Using <img> does not allow you to style the SVG using CSS or manipulate it using JavaScript.

Using the object element

<object type="image/svg+xml" data="attention.svg" width="50" height="50">

Unlike <img>, <object> directly imports the SVG into the document and therefore it can be manipulated using Javascript and CSS.