[Bug]: SVG Files on the Shopify CDN are blocked by CORS when viewing through theme editor

[willryanuk]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Describe the bug
Using SVGs during development, they do not load in the theme editor (but they load on the share URL and on the localhost URL http://127.0.0.1:9292/)

Source

<svg>
  <use xlink:href="{{ svg_file_name_from_assets | asset_url }}#icon-id" />
</svg>

Note your asset ID. Needs to have an ID tag. Here is a sample:

<svg id="icon-id" viewBox="0 0 20 20"><path fill-rule="evenodd" d="m10 2.626-1.46 4.71c-.192.62-.743 1.041-1.365 1.041H2.453l3.82 2.91a1.55 1.55 0 0 1 .522 1.685l-1.46 4.71 3.821-2.911a1.38 1.38 0 0 1 1.688 0l3.82 2.91-1.459-4.71c-.192-.62.019-1.3.522-1.683l3.82-2.911h-4.722c-.622 0-1.173-.42-1.366-1.04zm.455-1.78a.472.472 0 0 0-.91 0L7.63 7.027a.48.48 0 0 1-.455.347H.98c-.464 0-.657.622-.282.908l5.012 3.82a.52.52 0 0 1 .174.56l-1.914 6.18c-.143.462.361.847.736.56l5.013-3.818a.46.46 0 0 1 .562 0l5.013 3.819c.375.286.88-.099.736-.561l-1.914-6.18a.52.52 0 0 1 .174-.56l5.012-3.82c.375-.286.182-.908-.282-.908h-6.195a.48.48 0 0 1-.455-.347z"/></svg>

Expected behaviour
The SVG should load in the theme editor

Actual behavior

It is blocked by CORS, and the SVG is not loaded:

Verbose output

n/a

Reproduction steps

Details of theme code are detailed above.

Operating System

Mac OS Version 15.3.1 (24D70)

Shopify CLI version (shopify --version)

3.75.3

Shell

zsh

Node version (run node -v if you're not sure)

v23.8.0

What language and version are you using in your application?

No response

[montalvomiguelo]

If you use URLs in the xlink:href attribute, they must be loaded from the same domain due to cross-origin protection for SVGs. This script can help solve the issue in your use case. https://github.com/Keyamoon/svgxuse

[willryanuk]

Thanks @montalvomiguelo that does indeed work. I guess I'll use the Polyfill when in design mode (as i don't imagine there is an easy fix for this on the theme editor side of things).