SVG sprite file loads fine from Nginx but won't for Tomcat, served from another port (emulating CDN)

Question

I changed my HTML-embedded svgs to a a file location, served by Webpack.

<svg class="rsvg largeTileBlock__itemDataIconSvg inlineBlock relative">
   <use xlink:href="http://localhost:9001/dist/img/app/icons.svg#rsvg__arrows--trendDown"
        href="http://localhost:9001/dist/img/app/icons.svg#rsvg__arrows--trendDown"
   />
</svg>

This works in the Nginx page. But this doesn't work in my Tomcat page, I'm working on.

What could be wrong? (Arrow Up should be loading in the circle in second image)

Answer 1

Ok it worked because it had a local href that I didn't notice.

But upon changing the SVG url, it stopped working.

Basically you can't use SVG sprite files located in another server, at the moment.

Relevant reports:

https://bugs.chromium.org/p/chromium/issues/detail?id=470601 https://github.com/w3c/svgwg/issues/707

As of September 2019:

RESOLVED: defer cross origin use element references to post-SVG 2