Firefox Focus svg doesn't display correctly in Inkscape and Firefox

[Findus23]

Hi,

I just noticed that the Firefox Focus logo looked odd in my application.

It seems like the svg you are using isn't valid as it doesn't display as it should (and as your /focus.png does) when opening in Inkscape.

Even when opening in Firefox (like in the following line), the svg isn't rendered correctly.

In case it displays correctly for you, this is how it looks like for me:

[alrra]

Even when opening in Firefox (like in the following line), the svg isn't rendered correctly.

@Findus23 What version of Firefox are you using?

Things look fine to me:

[Findus23]

I'm also using 59.0.2 (64-Bit) and the file looks like for you.

But shouldn't there be a square purple background like in the .png files?

https://github.com/alrra/browser-logos/blob/master/src/focus/focus_512x512.png

Without the background the contrast is really hard to see on white background.

[alrra]

I'm also using 59.0.2 (64-Bit) and the file looks like for you.

But shouldn't there be a square purple background like in the .png files?

OK, I thought something was wrong with the SVG.

The reason the SVG is different is because that's how it was provided by Mozilla: https://github.com/FirefoxUX/product-identity, and even thought I wanted to have a SVG version that would be the same as the actual used logo (the PNGs), I decided to include it as I thought that would be beneficial.

A pull request that makes the SVG version the same as the PNGs is very welcomed!

[scribblemaniac]

Here's a version of svg made to look like the icon: focus.svg.zip

Although it becomes clear when comparing them that the svg we have right now is not quite the same as what is used in the icon. Most notably the inside circle is too bright.

Focus Icon	SVG

[alrra]

@Findus23 @scribblemaniac I've open an issue, let's see if they provide an official one.