title: How to use external SVG in HTML?
body: <p>I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):</p>
  <ol>
  <li>If I use <code>&lt;img src=&quot;algerie.svg&quot;&gt;</code> I loose the interactivity.</li>
  </ol>
  <p><img src="https://i.stack.imgur.com/xyAHtm.jpg" alt="SVG displayed as image embedded in an HTML page" /></p>
  <ol start="2">
  <li>If I open this image in a new tab using dev tool, it becomes interactive.</li>
  </ol>
  <p><img src="https://i.stack.imgur.com/olCa7m.jpg" alt="SVG opened in the browser, showing interactive highlights" /></p>
  <ol start="3">
  <li><p>If I use:</p>
  <pre><code>&lt;svg viewBox=&quot;0 0 512 512&quot;&gt;
    &lt;use xlink:href=&quot;algerie.svg&quot;&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  </li>
  </ol>
  <p>Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.</p>