Amazon S3 CORS issue with SVG on All major browser

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.

9 thoughts on “Amazon S3 CORS issue with SVG on All major browser”

  1. 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>
    </CORSRule>
    </CORSConfiguration>
    

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

    Reply
  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?”.

    Reply

Leave a Comment