GitHub badges in SVG format #150

Closed
mathiasbynens opened this Issue Jan 2, 2014 · 30 comments

Comments

Projects
None yet
@mathiasbynens
Member

mathiasbynens commented Jan 2, 2014

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

Coveralls
Gittip
Travis CI
Generic

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

This comment has been minimized.

Show comment
Hide comment
@bordoni

bordoni Jan 2, 2014

WoW! Loved the idea. 👍

bordoni commented Jan 2, 2014

WoW! Loved the idea. 👍

@kulturbande

This comment has been minimized.

Show comment
Hide comment

a big 👍

@stefanjudis

This comment has been minimized.

Show comment
Hide comment

👍

@fhemberger

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

@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 :)

Member

mathiasbynens commented Jan 2, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jan 2, 2014

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

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

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

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

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
Member

sindresorhus commented Jan 2, 2014

👍

Relevant: badges/shields#80

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jan 2, 2014

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!

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

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jan 2, 2014

Quick size comparison:

FileSize (bytes)
build-passed.png1842
build-passed.svg1018
build-passed.svgz381

Quick size comparison:

FileSize (bytes)
build-passed.png1842
build-passed.svg1018
build-passed.svgz381

@espadrine espadrine referenced this issue in travis-ci/travis-ci Jan 2, 2014

Closed

make build results pngs less blurry #630

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

@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.

Member

mathiasbynens commented Jan 2, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@s10wen

s10wen Jan 2, 2014

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

s10wen commented Jan 2, 2014

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

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

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

Member

mathiasbynens commented Jan 2, 2014

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

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

@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!

Member

mathiasbynens commented Jan 2, 2014

@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!

@s10wen

This comment has been minimized.

Show comment
Hide comment
@s10wen

s10wen Jan 2, 2014

I get that if an image tag has been previously used SVG would be the right way to go, but wondering if an imageless alternative would be beneficial as well going forward?

s10wen commented Jan 2, 2014

I get that if an image tag has been previously used SVG would be the right way to go, but wondering if an imageless alternative would be beneficial as well going forward?

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

@simonowendesign <iframe>s are not supported by GitHub Markdown.

Member

mathiasbynens commented Jan 2, 2014

@simonowendesign <iframe>s are not supported by GitHub Markdown.

@philippbosch

This comment has been minimized.

Show comment
Hide comment
@philippbosch

philippbosch Jan 2, 2014

@simonowendesign Everything but an image makes embedding in Markdown or reStructuredText (that's what most READMEs on Github are written in) unnecessarily complicated. Images can be embedded like this in Markdown:

![Travis CI](http://img.shields.io/travis-ci/rails/rails.png)

Travis CI

"imageless" would mean adding HTML and CSS to a Markdown document which is ugly. Or using <iframe>s – even uglier.

@simonowendesign Everything but an image makes embedding in Markdown or reStructuredText (that's what most READMEs on Github are written in) unnecessarily complicated. Images can be embedded like this in Markdown:

![Travis CI](http://img.shields.io/travis-ci/rails/rails.png)

Travis CI

"imageless" would mean adding HTML and CSS to a Markdown document which is ugly. Or using <iframe>s – even uglier.

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

"imageless" would mean adding HTML and CSS to a Markdown document which is ugly.

Not just ugly, but (more importantly) it would also mean that the content wouldn’t be dynamic anymore.

Member

mathiasbynens commented Jan 2, 2014

"imageless" would mean adding HTML and CSS to a Markdown document which is ugly.

Not just ugly, but (more importantly) it would also mean that the content wouldn’t be dynamic anymore.

@s10wen

This comment has been minimized.

Show comment
Hide comment
@s10wen

s10wen Jan 2, 2014

Gotcha, and guess something like a button styling for Markdown would be overkill?

s10wen commented Jan 2, 2014

Gotcha, and guess something like a button styling for Markdown would be overkill?

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 2, 2014

Member

Definitely :) Also it would have the same issue: in this case, the content must come from a third party server (not from the README source itself).

Member

mathiasbynens commented Jan 2, 2014

Definitely :) Also it would have the same issue: in this case, the content must come from a third party server (not from the README source itself).

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jan 5, 2014

Member

Good news! This is now pretty much solved by http://gh-badges.herokuapp.com/ (repo: https://github.com/espadrine/gh-badges).

There are just a few annoying browser bugs in the way of using these beautiful SVG badges: badges/gh-badges#5

Member

mathiasbynens commented Jan 5, 2014

Good news! This is now pretty much solved by http://gh-badges.herokuapp.com/ (repo: https://github.com/espadrine/gh-badges).

There are just a few annoying browser bugs in the way of using these beautiful SVG badges: badges/gh-badges#5

@espadrine espadrine referenced this issue in badges/shields Jan 6, 2014

Closed

Inline SVG for Retina #80

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jan 6, 2014

Cross-post from badges/shields#80 (comment) :

Okay, so we have http://shields.io/, http://badgr.co/, and now http://b.adge.me/ all doing basically the same thing. We've already got http://badgr.co/ well on it's way to being folded into http://shields.io/. I think it's in the best interest of the open source community as a whole to do the same with http://b.adge.me/. In other words, we should add SVG support to http://shields.io/.

Cross-post from badges/shields#80 (comment) :

Okay, so we have http://shields.io/, http://badgr.co/, and now http://b.adge.me/ all doing basically the same thing. We've already got http://badgr.co/ well on it's way to being folded into http://shields.io/. I think it's in the best interest of the open source community as a whole to do the same with http://b.adge.me/. In other words, we should add SVG support to http://shields.io/.

@hhfrancois

This comment has been minimized.

Show comment
Hide comment
@hhfrancois

hhfrancois Jul 21, 2015

Hi, thank for the service.
your service Have it a max delivery ?
Cause with 7 badges in my site, I have an error.

Hi, thank for the service.
your service Have it a max delivery ?
Cause with 7 badges in my site, I have an error.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jul 21, 2015

@hhfrancois Thanks for telling us! We hope we fixed it. Tell us if it works better.

As a side-node, it may be unstable this week, but will be better next week.

@hhfrancois Thanks for telling us! We hope we fixed it. Tell us if it works better.

As a side-node, it may be unstable this week, but will be better next week.

@hhfrancois

This comment has been minimized.

Show comment
Hide comment
@hhfrancois

hhfrancois Jul 21, 2015

@espadrine Thank for the response.

@espadrine Thank for the response.

@svoop

This comment has been minimized.

Show comment
Hide comment
@svoop

svoop Jan 12, 2016

@espadrine I don't find a better place to ask this: How about adding beerpay.io as well?

svoop commented Jan 12, 2016

@espadrine I don't find a better place to ask this: How about adding beerpay.io as well?

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jan 12, 2016

@svoop Don't hesitate to create an issue on the project!

@svoop Don't hesitate to create an issue on the project!

@calidion

This comment has been minimized.

Show comment
Hide comment
@calidion

calidion Jan 21, 2016

hi, all
the service is very unstable.

i can easily get unresponsive state.
can this be improved?

hi, all
the service is very unstable.

i can easily get unresponsive state.
can this be improved?

@niksmac

This comment has been minimized.

Show comment
Hide comment

niksmac commented Jun 15, 2016

here from here

@cbanowsky

This comment has been minimized.

Show comment
Hide comment
@cbanowsky

cbanowsky Dec 8, 2016

the custom badges are fun if nothing else:
like this one

cbanowsky commented Dec 8, 2016

the custom badges are fun if nothing else:
like this one

@Llewellynvdm

This comment has been minimized.

Show comment
Hide comment
@Llewellynvdm

Llewellynvdm Oct 29, 2017

The downloads badges:

  • Github All Releases
  • Github Releases
  • Github Pre-Releases
  • Github Releases (by Release)

Not working for the last few weeks.

Llewellynvdm commented Oct 29, 2017

The downloads badges:

  • Github All Releases
  • Github Releases
  • Github Pre-Releases
  • Github Releases (by Release)

Not working for the last few weeks.

Llewellynvdm added a commit to vdm-io/Joomla-Component-Builder that referenced this issue Oct 29, 2017

@h5bp h5bp locked and limited conversation to collaborators Oct 29, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.