title: Is it possible to make the img tag display svg images that cointain addresses inside it?
body: <p>I have created the following SVG file:</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
  xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
  width=&quot;150&quot; height=&quot;150&quot;&gt;
      &lt;rect
          x=&quot;5&quot;
          y=&quot;5&quot;
          width=&quot;140&quot;
          height=&quot;140&quot;
          style=&quot;fill:white;stroke:black;stroke-width:1&quot;
          id=&quot;rect2&quot; 
      /&gt;
      &lt;image
          y=&quot;50&quot;
          x=&quot;80&quot;
          id=&quot;image76&quot;
          xlink:href='https://image.flaticon.com/icons/svg/46/46441.svg'
          preserveAspectRatio=&quot;none&quot;
          height=&quot;60&quot;
          width=&quot;60&quot; 
      /&gt;
      &lt;image
          y=&quot;50&quot;
          x=&quot;10&quot;
          id=&quot;image76&quot;
          xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png'
          preserveAspectRatio=&quot;none&quot;
          height=&quot;60&quot;
          width=&quot;60&quot;
      /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I've managed to display it using the <code>object</code> tag like the following and it works fine:</p>
  <pre><code>&lt;object type=&quot;image/svg+xml&quot; data=&quot;image.svg&quot;&gt;&lt;/object&gt;
  </code></pre>
  <p>The result is like this:</p>
  <p><a href="https://i.stack.imgur.com/U9fvs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U9fvs.png" alt="enter image description here" /></a></p>
  <hr />
  <p>However, when I try to use the <code>img</code> tag I have the following result:</p>
  <pre><code>&lt;img src=&quot;image.svg&quot;/&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ezhpt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ezhpt.png" alt="enter image description here" /></a></p>
  <p>When I try to display this svg file with the <code>img</code> tag, the images that are inside it disappear. I know it happens because I'm using addresses like <a href="https://image.flaticon.com/icons/svg/46/46441.svg" rel="nofollow noreferrer">https://image.flaticon.com/icons/svg/46/46441.svg</a> and <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png" rel="nofollow noreferrer">https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png</a> for my images instead of writing a base64 image inside this svg. But because it's possible with the <code>object</code> tag I'm curious to know if it's also possible with the <code>img</code> tag. Is it possible to make the <code>img</code> tag open svg files like this one? Or is it a limitation of the <code>img</code> tag?</p>