Amazon S3 CORS issue with SVG on All major browser

Question

I have correctly setup S3 ( I believe so !! ) because other images, and webfonts are correctly loading from S3. However, in my HTML design, I have this -

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

Somehow, it is not loading on all browsers ( I have tested on Chrome and Firefox ). On chrome it gives a error atleast, firefox dismisses it silently.

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

How to get past this issue.

Answer 1

After a number of days looking into this, there is NO SOLUTION to this in the way we imagine that SVG <use> tag should work with CORS.

It is a feature that browser developers are waiting for from the SVG Working Group .

Answer 2

Generally speaking this is normally because Cross-Origin Resource Sharing (CORS) has not been enabled on your S3 bucket.

You can find a walk-through to enable it here . Check the part headed with "How Do I Enable CORS on My Bucket?".

Answer 3

the following code fixes the problem

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- optional line -->
<MaxAgeSeconds>3000</MaxAgeSeconds> <!-- optional line -->
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

the easiest way could be https://s3browser.com/ , Buckets > CORS configuration ..paste the XML code, that's it