Amazon S3 CORS Launches SVG on All Major Browsers

Question

I configured S3 correctly (I think so!), Because other images and websites load correctly from S3. However, in my HTML design, I have this -

<svg><use xlink:href="assets/img/i.svg#i-facebook"></use></svg>

Be that as it may, this is not loading in all browsers (I tested Chrome and Firefox). On chrome, this gives an error, at least firefox silently ignores it.

I just found one similar resource - https://github.com/jonathantneal/svg4everybody/issues/16 .

How to get past this problem.

Answer 1

In general, this is usually because Cross-Origin Resource Sharing (CORS) was not included in your S3 bucket.

You can find the switch to enable it here . Check out the section entitled “How do I enable CORS in my bucket?”.

Answer 2

After several days considering this, there is NO SOLUTION to this, since we assume that the SVG <use> should work with CORS.

This is a feature that browser developers expect from the SVG Working Group .