my.home-assistant.io icon indicating copy to clipboard operation
my.home-assistant.io copied to clipboard

Scaling options for the svg badges

Open DigiLive opened this issue 1 year ago • 2 comments

Given badges are IMO huge in dimensions. It would be great if there would be badges available with smaller dimensions (e.g. to be used in a document) or the possibility to scale them dynamically.

I know I can scale a badge if I use it as a source for the image tag, but I mainly use markdown files with references. E.g.,

[![Open your Home Assistant instance and show your dashboard resources.][ref1]][ref2]

[ref1]: https://my.home-assistant.io/badges/lovelace_resources.svg
[ref2]: https://my.home-assistant.io/redirect/lovelace_resources/

vs

[<img src="https://my.home-assistant.io/badges/lovelace_resources.svg" alt="Open your Home Assistant instance and show your dashboard resources." width="200">](https://my.home-assistant.io/redirect/lovelace_resources/)

Previews: Default scale: Open your Home Assistant instance and show your dashboard resources.

vs

Smaller scale: Open your Home Assistant instance and show your dashboard resources.

DigiLive avatar Nov 13 '23 21:11 DigiLive

We made the default for the badges smaller: https://github.com/home-assistant/my.home-assistant.io/pull/408

If you want an even smaller size, you can use the method you described above. Personally I think your example is not readable and way too small.

bramkragten avatar Nov 29 '23 14:11 bramkragten

Yeah, it depends on preference. That's why I suggested a dynamic size (based on query parameters or so). Or having multiple sizes available. Then, a user can make the choice of his preference.

If you take https://github.com/AalianKhan/mushroom-strategy/wiki as an example, it seems large to me and the smaller version I asked for fits better into context while still being perfectly readable.

It's all up to you. It made things a lot easier anyway. 👍🏻

DigiLive avatar Nov 29 '23 19:11 DigiLive