SVG Linear Gradient does not work in Firefox 104

Question

In Firefox 104 on Windows 10, the following SVG file shows as blank, empty:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2769.2 1615.4">
 <defs>
  <style>
    .fil1 {fill:url(#id0)}
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="230.8" y1="2394.2" x2="2538.5" y2="2394.2">
   <stop offset="0" style="stop-opacity:1; stop-color:#667DD1"/>
   <stop offset="1" style="stop-opacity:1; stop-color:#8C9DDC"/>
  </linearGradient>
 </defs>
 <g>
  <polygon class="fil1" points="230.8,230.8 2538.5,230.8 2538.5,1384.6 230.8,1384.6 "/>
 </g>
</svg>

Other browsers (e.g. Chrome) show the desired result: a rectangle with a gradient fill. The SVG appears to be empty in Firefox because Firefox does not show the fill.

Why does this work in other browsers, but not in Firefox?

In case it's of any interest: the example SVG presented here was exported from CorelDRAW 2021. I've removed extraneous markup from the original file.

A similar question already exists; why this new question?

This is a follow-on to the existing question "SVG Linear Gradient does not work in Firefox".

I originally—and, I acknowledge, incorrectly—posted this content as an "answer" to that existing question, because I could not post a code block as a comment to an answer for that existing question, and because I mistakenly believed that asking a new question was the wrong thing to do.

Here, in asking this question, I am following the advice of Robert Longson, the author of the answer to that original question, who offered me the following advice in a comment:

If it's not an answer to this question then you should delete it and ask a separate question. You can always include a link to this question in your new question so that it's not closed as a duplicate.

Done! Thanks for the advice, Robert!

Answer 1

Answering my own question...

In brief

User (my) error. I was inadvertently using UTF-16 character encoding instead of UTF-8.

The UTF-16 SVG file renders okay in Chrome, but not in Firefox.

In more complex SVG examples that include objects with single-color fills, everything except the gradient fills renders okay. The lack of gradient fills is a symptom of this character encoding issue.

In (embarrassing, to me) detail

Thanks to Robert Longson and ccprog for their comments on my question, which led me to this answer.

The snippet in my question works for me in situ, too, in Firefox 104 on Windows 10. I thought I'd tested it back in my now-deleted answer in the original question, but I've just opened that question in Firefox 104 on Windows 10 (where I can still see that now-deleted answer, although I understand others might not) and... it works there, too. I thought I'd tested it in that very context, but this tells me that I hadn't.

I'm very embarrassed about that, but I have to admit to it.

Mystified, I copied'n'pasted the working snippet from this question to a stand-alone .svg file. Again, that new .svg renders just fine in Firefox 104 on Windows 10.

So I compared that new .svg file with the .svg file that doesn't work. The comparison did not highlight any content differences, but did highlight that the two files had different character encodings. The comparison reported the file that does not work in Firefox (but works in Chrome) as "ISO-10646-UCS-2 BOM"; the new .svg file, which works in Firefox, as Window-1252. Meanwhile, my text editor (I'm using jEdit) reports the character encoding of the two files as x-UTF-16LE-BOM and UTF-8, respectively.

My SVG files are typically UTF-8 (which, I understand, for printable characters with byte value 127 and below, matches Windows-1252; so I can understand the comparison reporting that file as Windows-1252).

I currently have no idea how I changed the encoding of the problematic file from UTF-8 to UTF-16. I'll look into that. But, that's my problem.