black SVG on the internet

New Here ,
Apr 19, 2022 Apr 19, 2022

Copy link to clipboard

Copied

Hi, 

On our website, we use SVGs that are exported from Illustrator. When we use them on some pages, it works. 

ex: https://bib.umontreal.ca/communications/nouvelles/nouvelle/studio-enregistrement-lsh

But if we want to see only the image from the repertory, it is all turning black : https://bib.umontreal.ca/public/bib/images-dg/promotions/studio-enregistrement.svg 

 

Is there a problem with the way we export our SVGs?

 

Thanks, 

L-A

TOPICS
Bug

Views

76

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Apr 25, 2022 Apr 25, 2022
Hello @lagignacUdeM, Sorry to hear about this experience. I agree with @thatsmauri. It seems to be an issue with "Content Security Policy" settings of the server where the SVG file is hosted. You need to contact your hosting provider. This is not an issue with the SVG file itself. A workaround would be to generate the SVG file as follows: File > Save As (SVG)In the SVG Options dialog that opens up press the button "More Options"Change the dop-down menu "CSS Properties" to "Presentation Attri...

Likes

Translate

Translate
Adobe Community Professional ,
Apr 24, 2022 Apr 24, 2022

Copy link to clipboard

Copied

There seems to be some sort of security violation going on.

 

I've downloaded your SVG, opened it up in my browser and it rendered correctly. When I open your .svg link and check the browser's console, it shows me these two errors:

  • Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'none'". Either the 'unsafe-inline' keyword, a hash ('<redacted because I don't know if it's safe to post here>'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript&colon; navigations unless the 'unsafe-hashes' keyword is present. | studio-enregistrement.svg:4 
  • Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'none'". Either the 'unsafe-inline' keyword, a hash ('<redacted because I don't know if it's safe to post here>'), or a nonce ('nonce-...') is required to enable inline execution. | studio-enregistrement.svg:5

 

To learn more about Content Security Policy, visit the site below:

 

Below is an example .htaccess file - please do not just use it "as-is" if you're not sure about this:

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Apr 25, 2022 Apr 25, 2022

Copy link to clipboard

Copied

Hello @lagignacUdeM,

 

Sorry to hear about this experience. I agree with @thatsmauri. It seems to be an issue with "Content Security Policy" settings of the server where the SVG file is hosted. You need to contact your hosting provider.

 

This is not an issue with the SVG file itself. A workaround would be to generate the SVG file as follows:

  1. File > Save As (SVG)
  2. In the SVG Options dialog that opens up press the button "More Options"
  3. Change the dop-down menu "CSS Properties" to "Presentation Attributes"
 

Screenshot 2022-04-24 at 09.00.04.png

 

I hope it helps.

 

Thanks,

Anubhav

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 27, 2022 Apr 27, 2022

Copy link to clipboard

Copied

LATEST

Hi, 

Yes, it works! 

Thanks!

Laurie-Anne

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines