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

The SVG comes as XML so to keep interactivity you can embed the whole content, i.e. using js or just pasting the xml code into your file.

React.js example:

export const MySVGIcon = (props) => <svg {...props}>
...
</svg

and use it like:

<MySVGIcon />

this way you can keep having control over each element in the DOM: events, styles, etc.

Answer 2

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?