0

I have the following allIcons.svg file hosted on external-domain and the definition of symbol id#icon-svg-cta looks something like this: 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" style="position:absolute" width="0">

 <symbol id="my-svg-cta" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg">
  <g>
   <fill-code>
 </g>
 </symbol>

</svg>

and below is how my HTML looks like:

<svg class="my-svg-cta">    
 <use xlink:href="https://<external-domain>/allIcons.svg#my-svg-cta"></use>
</svg>

If I use the file internally it works fine but when hosted externally Icon doesnt render on any of the browsers (Chrome/FF).

stdio.h
  • 126
  • 3
  • 15
  • There's maybe already an answer here: https://stackoverflow.com/questions/32850536/cross-domain-svg-sprite My best guess is that this is a CORS issue. – Skoua May 30 '21 at 23:25
  • 1
    Are you seeing any errors in your browser's dev tools console? – A Haworth May 31 '21 at 03:55

0 Answers0