Comment utiliser un SVG externe en HTML?

Question

J'essaie de faire un HTML qui fait référence à un fichier SVG, ce fichier SVG est interactif (CSS en survol):

1. Si j'utilise <img src="algerie.svg"> Je perds l'interactivité.

   

2. Si j'ouvre cette image dans un nouvel onglet à l'aide de l'outil de développement, elle devient interactive.

   

3. Si j'utilise:

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

   Ensuite, rien ne s'affiche, et pire encore, Chrome ou Firefox ne détecte pas le fichier dans l'outil de développement réseau.

Answer 1

Vous devez incorporer l'image en utilisant <object> tag:

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

Référez-vous à cette question pour les détails: Dois-je utiliser <img>, <object> ou <embed> pour les fichiers SVG?