GitHub badges in SVG format

[mathiasbynens]

A lot of GitHub repositories have badges like these in their README:

There are several services that can be used to serve these badge images based on some URL parameters, e.g. shields.io (repo).

Currently these badges are all bitmaps (usually in JPG or PNG format). It would be nice to have them in SVG format, for the following reasons:

• vector images still look nice on high-resolution displays
• hackability; creating a badge with different colors or text is just a matter of editing the SVG file in a text editor
• likely, bandwidth savings (for the services that serve these badge images and for end users)

TODO

• Remake these images as a static example SVG file
• Convince an existing badge service to serve SVG responses instead of the bitmaps they’re sending out now (optionally based on a new URL parameter)

Any SVG gurus/ninjas/unicorns out there that want to give the first task a try?

[bordoni]

WoW! Loved the idea. 👍

[kulturbande]

a big 👍

[stefanjudis]

👍

[fhemberger]

@mathiasbynens Have you seen this repo?
https://github.com/hughsk/stability-badges

[mathiasbynens]

@fhemberger Awesome! It looks like the generated code in that repo could be improved/cleaned up a little bit, but other than that it looks like the first task on the TODO list is as good as finished :)

[espadrine]

Tried something quick here: https://thefiletree.com/gh-badges/build-passed.svg

However, in stable Firefox, letter-spacing doesn't seem to work.

[sindresorhus]

👍

Relevant: badges/shields#80

[espadrine]

I think I have something competitive here: [gist] https://gist.github.com/espadrine/8218740
(Not just my work, not sure who helped, hope everyone is ok with making this CC0.)

Fork this gist to add images!

[espadrine]

Quick size comparison:

File	Size (bytes)
build-passed.png	1842
build-passed.svg	1018
build-passed.svgz	381

[mathiasbynens]

@espadrine Nice! (I was the one who helped a little bit, but really you really did all the hard work :))

How about setting up a repository for this instead of a gist? Would make it a better place to point to, as we could add documentation for badge services (i.e. how to change width attributes based on the length of the input string on the back-end), etc.

[s10wen]

Any reason these couldn't simply be HTML / CSS?

[mathiasbynens]

@simonowendesign Because <img src=badge.html> doesn’t work (assuming badge.html really is an HTML document).

[mathiasbynens]

@espadrine created a repo for the SVG badge boilerplate/template: https://github.com/espadrine/gh-badges

Feedback and improvements on the code are welcome there!