Menu
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.
334
You need to set the content type for you svg image on S3 to "image/svg+xml". To change the content-type through S3 console : Select the object on the S3 console.
You have to either load your image with the crossOrigin attribute set to 'anonymous' directly in your document, or you can try useCORS h2c option. allowTaint option does just say that you don't care if it taints the canvas or not.
In the Amazon S3 console, choose the bucket you want to edit. Select the Permissions tab, and scoll down to the Cross-origin resource sharing (CORS) panel. Choose Edit, and type your CORS configuration in the CORS Configuration Editor, then choose Save.
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
83
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.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
