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.

[vnphanquang]

Hello there. I stumbled upon this thread while trying to get an SVG version of the greencheck badge for a community website I'm building. Below is my finding.

Alternative Solution - Cloudflare Worker

I built a Cloudflare worker that basically does what https://app.greenweb.org/api/v3/greencheckimage do but return SVG instead, powered by the V3 Greencheck API:

• The public URL is https://green-web-badge.vnphanquang.workers.dev. For example, https://green-web-badge.vnphanquang.workers.dev/thegreenwebfoundation.org will return an SVG green badge for thegreenwebfoundation.org.
• The code is open sourced at https://github.com/vnphanquang/green-web-badge/blob/main/src/index.js.

I see that thegreenwebfoundation seems to be hosted at Cloudflare (although the greencheckimage endpoint is deployed to Hetzner?), which is perfect because you can utilize the platform to deploy a similar worker to one I did above.

I explained more in the next section why I ended up with this solution instead of one in Python. For now, some caveats:

1. I did not have access to the original design of the images so I created some cloned version in Figma, to be able to use for templating during the svg rendering process. They are pretty close, but I'm happy to update if someone can provide me with the originals.

2. Having this deployed as a worker living separately from the app is not ideal but I believe it is not difficult to set up redirect / routing either from Cloudflare or in the Python application.

3. Currently the worker only outputs SVG. It is possible to convert to optionally png depending on the user request, but that requires loading a module (resvg) that is relatively large, bumping the worker size to just above 1MB, which is the limit for Cloudflare worker free plan. Please see source code for more information. Options:

   • we can return svg only (which I think is absolutely fine),
   • fallback to the current png method, or
   • paid $5/month for Cloudflare - if you are not already doing that.

Possibility with Python

I spent some time researching if it's possible to do this in Python as that would be best given the current setup. I'm sure it is possible for someone having deep enough experience with Python. For me, unfortunately, the current constraints make it virtually impossible to do so, namely: the image uses a custom font "TWK Everett", which requires installing into the deployed environment or loading dynamically at runtime, which is not supported by most popular tools for handling svg. Once we can figure that out, the remaining work is to find a tool that can take the loaded font, generate a path from an SVG text element and inject that into a prebuilt template.

[!IMPORTANT] If business can allow the dynamic text (user-input url and hosting provider) to be in a universally-available font, however, I think using Python is more practical.

Will find some more time to spend on this but not sure if it leads anywhere.

Web component

@hanopcan mentioned web component, but i am not sure what she has in mind exactly. Perhaps that means building an HTML custom element such as the following?

<script src="https://unpkg.com/...path-to-custom-element-script"></script>
<green-check-image url="thegreenwebfoundation.org"></green-check-image>

I'm not totally against this idea, but not sure if it's really necessary either. Web component requires Javascript on the browser and cannot be server-side-rendered. Taking into account everything, i believe it uses more resources than an image would - not the greenest it can be, to put simply.

That being said, I can help with creating a web component if that ends up being the chosen solution.

[fershad]

@vnphanquang thanks for your very detailed input for this issue. It's really cool to see how you've used edge workers to make this possible. What you've outlined there should be feasible to implement (i.e. creating a worker at a given path & then routing all greencheck badge requests through that path). However, it would create an extra bit of complexity around how the greencheck badges are delivered, and would be something extra we'd need to keep track of and manage. Doable for sure, but let me explain some of the thinking behind a web component, which we think would be a good way forwards.

Web component

Yes, the idea would be a custom HTML element. We'd look to keep the script for this as small as possible & would make it available to self-host as well. The element itself could be progressively enhanced.

• When there's no JS present (or the script fails to load), the default is a generic Green Web Foundation badge which links out to the Green Web Check page on our website.
• When the script loads, a Green Web Check is performed against the API. Depending on the result, the appropriate badge & content is loaded.

An upside to using a web component would be that we can open up parts of the badge to be styled by those who are using it. That's a very common request we get from our users & one we'd really like to make possible. It would also give us the potential to create a "dark mode" version of the badge which would be a nice little addition to the default.

[vnphanquang]

@fershad thanks for the input. I understand. If you've worked with web component before, I think you'll agree that progressive enhancement and customization are generally difficult when it comes to web component. That being said, this is a "simple enough" use case and I think it's worth a try.

I've put together a web component library at https://github.com/vnphanquang/green-check. Please take a look and feel free to give feedback / open issue. I'm happy to transfer the repo over to thegreenwebfoundation org if necessary.

You can give it a try by parsing below example into codepen or any applicable playground:

<script type="importmap">
  {
    "imports": {
      "@vnphanquang/green-check": "https://cdn.jsdelivr.net/npm/@vnphanquang/green-check/dist/index.js"
    }
  }
</script>

<script type="module">
  import { GreenCheck } from '@vnphanquang/green-check';

// later where applicable
customElements.define('green-check', GreenCheck);
</script>

<green-check hostname="github.com"></green-check>

<green-check hostname="google.com"></green-check>

<green-check></green-check>

More info can be seen in the repo README. A couple quick things:

• Customization capability is very limited right now (only colors, see repo README). I don't think you want people to go too overboard with customizing the badge, otherwise you might as well just give them an SVG, similar to how Not by AI does it.
• This badge is still loading the "TWK Everett" font for the texts, as I was trying to keep as close to the original design as possible. I am not a fan of this, however, because this is another 30kB or so that user has to load for a very small section. If business allows it, I would advocate for using one of the safe font, for example Arial, that is readily available in almost all system.
• A reminder that the markup is based on my best attempt to copy your PNG asset. If you have any design spec to comply with, feel free to give notes.

Thanks a lot team.

[fershad]

Oh wow @vnphanquang, that's brilliant!! Thanks so much for putting the repo together. There's a few team members following this thread, so we'll have a play with it & think about where to take it next.

[hanopcan]

Echoing @fershad here @vnphanquang - we are so incredibly grateful for the time and effort you've put in here, thank you! 💚

I'm just returning from a week of leave so let me give this some proper thought next week and have a discussion with Fershad about what we do next.

[fershad]

@vnphanquang thanks for creating that web component. I had a play with it in Codepen and it was really easy to use and customise. Very cool.

We've flagged this internally as something we'd like to pick up again in October once a few of us a back from holidays.