Search code examples
htmlsvgfirefox

Firefox displays SVG as black

I have recently moved a website from one server to another. The content did not change, only the base URL.

Now firefox displays SVG images as black on the new server. This happens even when I directly open the image (no surrounding HTML, no CSS, plain SVG).

The only difference is: the old server is an apache2 with HTTP/1.1 using gzipped encoding, the new server is an nginx with HTTPS, HTTP Basic Auth and HTTP/2 with br encoding.

The resulting images received on the client however are identical. When I save the image from the new server on the local hard drive and open it in FF, it is displayed correctly.

I cannot post links to the images as they are in a private network, but here the SVG and screenshots (teal background is from website):

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 64 58" style="enable-background:new 0 0 64 58;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;stroke:#FFFFFF;stroke-width:3.042;stroke-linejoin:round;}
</style>
<path class="st0" d="M46.72,24.29h4.56c1.52,0,3.49,0.8,3.49,2.6c0,2.11-2.06,2.48-3.56,2.48h-4.49V24.29z M46.72,17.46h4.49  c1.87,0,3.14,0.63,3.14,2.46c0,1.17-1.15,2.15-3.06,2.15h-4.56V17.46z M51.22,31.61c3.16,0,6.06-0.82,6.06-4.63  c0-1.33-0.89-3.3-2.81-3.79c1.54-0.7,2.29-1.9,2.29-3.3c0-3.37-2.46-4.66-5.55-4.66h-8.84v2.22h1.92v11.89h-1.96v2.27H51.22z   M37.81,23.49c-0.02,2.99-1.73,6.15-5.85,6.15c-4.1,0-5.94-3.02-5.92-6.15c0-3.49,2.06-6.32,5.94-6.32  C36.03,17.24,37.83,20.4,37.81,23.49 M31.98,14.93c-5.01,0-8.42,3.58-8.42,8.56c0,4.3,2.69,8.47,8.38,8.47  c5.66,0,8.31-4.21,8.33-8.47C40.29,19.14,37.53,14.97,31.98,14.93 M12.86,17.48h5.08v7.39c0,2.81-1.5,4.73-4.38,4.73  c-2.83,0-4-1.68-4-4.59H7.08c0,4.31,2.48,6.9,6.48,6.9c4.28,0,6.9-2.88,6.81-7.04v-9.64h-7.51V17.48z"></path>
<path class="st1" d="M15.85,45.44h4.04h34.99c4.23,0,7.65-3.43,7.65-7.65V9.61c0-4.23-3.43-7.65-7.65-7.65H9.48  c-4.23,0-7.65,3.43-7.65,7.65v18.26v9.92v18.91L15.85,45.44z"></path>
</svg>

Correct: correct image on old server / Chrome, Edge

Wrong: wrong image on new server in FF

I'm using FF 101.0.1. It's displayed correctly on Chrome, Opera and Edge.

I have multiple SVG images that expose this problem.

My question is: can I do something in the image, HTML or other place to force FF to correctly display the image?

Update:

HTTP Response Headers for old (correct) image:

HTTP/1.1 200 OK
Date: Mon, 27 Jun 2022 12:47:45 GMT
Server: Apache/2.4.48 (Debian)
Last-Modified: Thu, 02 Jun 2022 09:58:24 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 832
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: image/svg+xml

HTTP Response Headers from new (wrong) server:

HTTP/2 200 OK
server: nginx
date: Mon, 27 Jun 2022 12:48:08 GMT
content-type: image/svg+xml
last-modified: Fri, 24 Jun 2022 13:43:36 GMT
etag: W/"62b5bf88-59b"
content-security-policy: default-src 'self'; script-src 'none'; style-src 'none'; object-src 'none';
content-encoding: br
X-Firefox-Spdy: h2
Solution 
  • content-security-policy: style-src 'none';

    is blocking all style sources, including inline sources like <style> elements. You need to set the value 'unsafe-inline'.