Pytest: [appearance][Dark Mode] Logo in README should have a transparent background

[webknjaz]

STR:

1. Enable Dark Mode on GitHub (https://github.com/settings/appearance)
2. Go to https://github.com/pytest-dev/pytest
3. See the pytest logo stand out with its white background while all the surroundings are dark:
   

The root cause is that the image file does not have a transparent background: https://github.com/pytest-dev/pytest/blob/master/doc/en/img/pytest1.png. And I don't think anybody has its original source. So to fix this, somebody would need to do image editing or maybe image tracing — these days it sounds like a good idea to have an SVG instead.

[nicoddemus]

Thanks @webknjaz for the report!

Actually we have the logos and other images in https://github.com/pytest-dev/pytest-design.

cc @The-Compiler

Btw perhaps we can rename that repo to design or something like that, so it stands out and doesn't look like a plugin?

[The-Compiler]

+1 on using an SVG (make sure to use the _curves version though) and on renaming that repo. I'd be glad if someone else could take care of it, though. :)

[nicoddemus]

I've renamed it: https://github.com/pytest-dev/design

I don't have anything installed to handle SVGs, so it would be great if someone could tackle this. 😁

[nicoddemus]

Ahh wait, found svgtopng.com, let me try that. 😁

[webknjaz]

@nicoddemus you shouldn't have to convert it to png. I'd say just use SVG, browsers released less than a decade ago support it.

[nicoddemus]

Good point. However it appears a bit big:

https://github.com/nicoddemus/pytest/tree/transparent-logo-8158

Let me play around with some settings.

[webknjaz]

Yeah, SVG has a concept of a canvas of something like that and that limits what's shown + there's a default size embedded in its XML somewhere that may need to be tweaked.

[webknjaz]

@nicoddemus I've just tested that changing height= and width= to something like 200 on this line https://github.com/nicoddemus/pytest/commit/e34609b9beb7da15e44d2792dda2441ea8c3abef#diff-36bd39773b7065a5fa5a55a7ce642a40bc9d0b40b41c516709ca44c1a87a93eaR3 helps.

Also, you may want to only change the height and then the image will be centered.

[webknjaz]

Ahh wait, found svgtopng.com, let me try that.

I usually use https://vectr.com/ for simple in-browser vector graphics.

[nicoddemus]

Thanks, will change height to 200 and let's see.

[nicoddemus]

Shame, still not centered, but looks good:

https://github.com/nicoddemus/pytest/tree/transparent-logo-8158

[webknjaz]

Shame, still not centered, but looks good:

But you didn't edit the SVG itself. My point was to open it (with a text editor — it's a regular XML document) and edit attrs in the <svg> tag.

[webknjaz]

(it worked for me when I opened an SVG URL in my browser and just edited the height attr with DevTools — that's how I tested it)

[nicoddemus]

OK but to be clear, using the height: 200 directive in the README as we discussed in the PR is enough, correct?

[webknjaz]

It's enough as long as you want to keep it in the corner as before, yes.

[nicoddemus]

Looking good. 😁