SVG vs. CSP
I recently ran into an issue while updating a site. Certain SVG images were filled in black in Firefox, instead of using the correct colors. They looked fine in Safari, Chrome, and Edge. While I was trying to make sense of this, I noticed if I opened the SVG files directly in Safari—rather than embedded in a web page—they were filled in black there too.
A quick look at the console gave the answer: my site’s Content Security Policy was blocking the inline styles in the SVG files. The files were App Store badges from Apple, and each path had attributes like
style="fill: #fff" to set the color.
Naturally my next questions were: why do they look fine in some cases, and how can I fix this? Some searching led me to this four-year-old bug report for Firefox. Not very encouraging, but it did suggest a workaround: use a separate Content Security Policy that only applies to SVG files.
While I experimented with that, it dawned on me: I had other SVG files that were showing up fine. I opened one up in BBEdit and saw that it was using
fill="#fff" to set fill colors. Simpler, more compatible, and it saved a few bytes. I did a quick find and replace across the files and everything works perfectly now.
Link to this entry: https://mikepiontek.com/go/8979