Support SVG badges as well as PNG

[mrchrisadams]

We have an API end point for serving images, that looks like like the link below:

https://api.thegreenwebfoundation.org/greencheckimage/thegreenwebfoundation.org

This serves a PNG file so you can add it as a src tag:

There is caching involved, but this an image generated using data from our database.

We've had someone folks request an SVG version of this as well, and this would be nice to add, as if we have a sample SVG we could render the same information into it, probably resulting in smaller file size too.

This would involve creating an SVG largely along the same lines as these blank template versions we currently use for creating bitmap images

https://github.com/thegreenwebfoundation/admin-portal/tree/master/apps/greencheck/badges

Implementing this

We don't really have the in- house experience to create an SVG file for this, but we would gladly accept pull requests that make it possible for people to request it, so for requests that look like the one below, we could serve the SVG file:

https://api.thegreenwebfoundation.org/greencheckimage/thegreenwebfoundation.org?type=svg

[mrchrisadams]

As I understand it, we can likely use django templates to create editable parts of an SVG file to drop in urls, organisation names and so on.

From there, if we want to expose the SVG directly for resolution independent icons, we can and there are a number of libraries that can convert from SVG to PNG or other formats. Some examples below for conversion from svg to png, etc.

https://stacktuts.com/how-to-convert-svg-to-png-or-jpeg-in-python

[hanopcan]

This has been the subject of much team discussion of late, mainly as we have been working on rebranding the badges. It's likely they will end up looking something like this when deployed:

The badges for now remain in .png format, as there is no straightforward way to output them as a .svg within our current Django set-up.

However, we are keen to press forward with a more modern approach that can yield sharper graphics and a smaller file size eg an .svg version as this card describes. We know the .png format is not ideal.

The current suggestion is to explore creating a web component like . More info on web components here: https://developer.mozilla.org/en-US/docs/Web/API/Web_components

This card is tagged 'help needed' and we remain open to having some open source contributions to help us speed this along. Or some donations so we can hire in some help. For now it's nearing the top of the backlog, and I'd like to think w'd get to this in Q2/Q3 of this year 🤞

[hanopcan]

Also want to add some feedback we've received from the recent deployment of our new badges that offering some different colour options might be good as our green is quite opinionted. For example a greyscale version. Think again the web component option might help with making this possible.