Display external SVG with <use> tag and href or xlink:href attribute?

Question

The SVG is not displayed correctly when it is loaded from <use> element. I've added an <img> element after it to illustrate the expected result:

<svg>
  <use xlink:href="file.svg" href="file.svg"></use>
</svg>
<img src="file.svg" />

Current output:

Working fiddle: demo

Thanks to anyone who can point out my mistake.

Answer 1

1. You have this error: Unsafe attempt to load URL https:.....svg from frame with URL https://...... Domains, protocols and ports must match

2. You need to use the id of the svg object you want to use

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#id" fill="red"/>
  </svg>

Please take a look at this example: https://codepen.io/enxaneta/project/editor/91143c063e6b9abf1b5c43a14a9937ea