Wie verwende ich externe SVG in HTML?

Question

ich versuche, ein HTML, die Verweise auf eine SVG-Datei zu machen, dass SVG-Datei interractive (CSS Hover) ist:

1. Wenn ich <img src="algerie.svg"> verwenden verliere ich die Interaktivität.

   

2. Wenn ich dieses Bild in einem neuen Tab mit dev Werkzeug öffnen, wird es interaktiv.

   

3. Wenn ich benutze:

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

   Dann wird nichts gezeigt, und schlimmer noch, Chrome oder Firefox nicht erkennen die Datei im Netzwerk dev Werkzeug.

Answer 1

Sie sollten das Bild einbetten, indem Sie <object> tag:

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

für die Details auf diese Frage finden: Do I use <img>, <object>, or <embed> for SVG files?