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.