How to use external SVG in HTML?

Question

I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):

1. If I use <img src="algerie.svg"> I loose the interactivity.

2. If I open this image in a new tab using dev tool, it becomes interactive.

3. If I use:

   <svg viewBox="0 0 512 512">
     <use xlink:href="algerie.svg"></use>
   </svg>
   

Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.

Answer 1

You should embed the image by using <object> tag:

<object data="algerie.svg" type="image/svg+xml"></object>

Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?