Can't use uploaded svg to use it as a sprite

[ElenaValieva]

I try to use svg-sprite in the Hubspot module. I added an Image field to my module to upload a SVG file (SVG-sprite). It was uploaded fine and HTML was generated correctly, but in Google Chrome console I see an error "Unsafe attempt to load URL https://cdn2.hubspot.net/hubfs/7126904/symbol-defs.svg from frame with URL https://hubspot-developers-17z9ybg-111111XYZ.hs-sites.com/?hs_preview=111111XYZ. Domains, protocols and ports must match".

I can see next in DOM inspector:

<svg class="solution-icon">

    <use xlink:href="https://cdn2.hubspot.net/hubfs/7126904/symbol-defs.svg#">     
           #shadow-root (closed)
    </use>

</svg>

Any idea how can I fix that?

Thanks!

[Kevin-C · Accepted solution]

Hey @ElenaValieva 

I think there could be 2 possible problems:

1.  The File is not set to be publicly accesible in the file manager
2.  The "use" element is causing the SVG to be treated as a file rather than a resource. Which may be treated as a Cross Origin Request without the correct permission. Reference

Possible solution:

• Have you tried placing the SVG without using the "use" element?

[Kevin-C · Accepted solution]

Hey @ElenaValieva 

I think there could be 2 possible problems:

1.  The File is not set to be publicly accesible in the file manager
2.  The "use" element is causing the SVG to be treated as a file rather than a resource. Which may be treated as a Cross Origin Request without the correct permission. Reference

Possible solution:

• Have you tried placing the SVG without using the "use" element?

[ElenaValieva · Accepted solution]

Hi @Kevin-C ,
Thanks for your reply.

1. Yes, file is marked as publicly accesible, but it doesn't fix the issue.
2. I couldn't use the svg-sprite without "use" element, because it's the only way of using/addressing svg-symbols.

Your link to  Reference was helpful, there is I found a workaround solution in this message, thank you!

[Kevin-C]

Awesome glad you got it going!!!

This gets me thinking:

The work around, though working is not somthing I would want to inherit from another dev. I find it just a little hard to grasp at a glance.

This article shows you how to change the default file manager hosting domain. If we were to change the domain from the "HubSPot default CDN domain" to that of our site, in theory this could be avoid, as we are not referencing from another origin, correct?