Badge

I thought it would be fun to make badges that were like github badges, but said whatever I wanted :) So I grabbed the SVG version from ... gemnasium, I think, then went to work.

You can try it on github pages!

The interesting parts are:

• you can go from SVG to PNG in browser:
  • Make a data URI from the SVG (src)
  • Make an image tag with that data URI for a src (src)
  • After the image loads, write it to a canvas (src)
  • Then get a new data URI (for a PNG) from the canvas (src)
• you have to escape SVG before making into a data URI (src)
• some parts of SVG weren't supported by React, so I had to sub them in manually (src)
• the SVG is actually hidden -- it's just used as a reference to generate the PNG (src)