How to use external SVG in HTML?

Question

I am trying to make HTML that references an SVG file that the SVG file is interractive (CSS hover):

• If I use <img src="algerie.svg"> , I lose interactivity.

  

• If I open this image in a new tab using the dev tool, it will become interactive.

  

• If I use:

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

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

Answer 1

You must insert the image using the <object> :

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

See this question for details: Am I using <img>, <object>, or <embed> for SVG files?