SVG logo in the docs does not render in Firefox

[webknjaz]

Issue

$sbj. It works in Chrome, but in FF (Gentoo Linux, but I don't think this is related — it's just as broken in Firefox on Android) it renders blank. Other SVGs work for me. Like I can, see https://github.com/aio-libs/aiohttp/blob/8844385/docs/aiohttp-icon.svg. But https://github.com/tox-dev/tox/blob/e3e77a6/docs/_static/img/tox.svg is just blank everywhere — on RTD, in the GH preview and when accessing by the direct raw URL (https://tox.wiki/en/latest/_static/tox.svg). The browser gets the file and DevTools show that the nodes are being parsed.

There must be something wrong with that XML in SVG that is incompatible with FF. This needs to be investigated.

[gaborbernat]

Sounds to me like a firefox bug. Same on macOs.

[webknjaz]

Any other SVG works, though.

[gaborbernat]

That doesn't mean that it's not a firefox bug for this particular SVG.

[webknjaz]

But it also doesn't mean that the SVG isn't broken either 🤷‍♂️

[webknjaz]

Per https://caniuse.com/?search=svg, FF supports more SVG features than other browsers, by the way. Could it be that some other browsers are more forgiving?

[gaborbernat]

It could be. I can't see anything wrong, but if someone finds a fix PR welcome. Works on Safari and Chromium based browsers.

[webknjaz]

I'll try to experiment later. Usually, playing with DevTools helps find what's wrong..

[gaborbernat]

FYI: I tried re-exporting in Inkspace in various formats, but none of them seems to make FF happy.

[webknjaz]

Looks like <feBlend id="feBlend2755" in2="BackgroundImage" mode="luminosity" /> is what's breaking it. Specifically, values with the word “Background” in in*= attributes break rendering: https://github.com/tox-dev/tox/blob/e3e77a6/docs/_static/img/tox.svg?short_path=462a753#L48C38-L48C48.

Removing the attribute or changing to non-background values from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/in#usage_notes makes the logo show up.

If it's not important, I suggest removing the entire filter2753 and referenced to it.

There's also a reference to an ancient BackgroundImage bug @ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/in#workaround_for_backgroundimage. Though, the referenced discussion does not directly mention this problem.

[gaborbernat]

If it's not important, I suggest removing the entire filter2753 and referenced to it.

PR welcome 👍

[webknjaz]

I've also found that the workaround posted @ svg/svgo#732 works. And it looks like they had a PR fixing this. So I assume that processing the SVG via the svgo tool should output a working SVG file.

[webknjaz]

Here's the workaround: #3466.