AkarinLiu
June 9, 2026, 10:53am
1
After importing an SVG image as a badge, a bug occurred where the badge could not be displayed properly:
Icon that was set:
1 Like
I recognize that SVG! I think that’s from Font Awesome (sprout) — and it’s not working because they don’t include dimensions by default with their icons.
Our CSS for badge images uses width: 100%; capped by max-width but 100% of 0 is still 0.
I’m adding a little fix to Discourse that will avoid this problem.
main ← dev-badge-images-size
opened 07:04PM - 09 Jun 26 UTC
Reported here: https://meta.discourse.org/t/svg-bug/404832
SVGs don't always … have dimensions included, and in this case when uploaded to a custom badge the image collapses to 0.
<img width="500" alt="image" src="https://github.com/user-attachments/assets/083a1776-64e7-4d10-834e-15b925c57dce" />
This flips around the styles so that instead of setting everything to 100% and capping the maximum, we set everything to our desired dimensions and scale down using object-fit.
This means that images without dimensions get them through CSS (avoids 100% of 0 being 0), and images that are too large will still shrink to fit the space.
<img width="500" alt="image" src="https://github.com/user-attachments/assets/9afe4379-cb8f-45c9-a0fd-2a5169844a39" />
If you update later today this should be fixed.
