Make passing Travis badge bright green

[sferik]

This is the other half of #20. I don't have Adobe Illustrator, so I just edited the SVG file manually and genereated the PNG using this website: http://www.fileformat.info/convert/image/svg2png.htm

When I tried using the svg2png command-line utility, it produced this:

And when I tried using:

convert -size 77x18 travis/travis_passing.svg travis/travis_passing.png 

it produced the error:

convert: non-conforming drawing primitive definition `OpenSans''' @ error/draw.c/DrawImage/3158.

/cc @laserlemon

[olivierlacan]

I think the closer we can match the official GitHub Green™ the better.

(nevermind, Skitch hates colors...)

I have an aesthetic dislike for harsh fluo green like the one currently used on the Code Climate 4.0 badge:

That said, the green you ended up with seems like a good compromise between my original sunny green and the Code Climate one.

[olivierlacan]

I wanted to compare the output of your version:

and the previous one:

This is straight out of Chrome. Aside from the font issue @ackerdev was dealing with, the text is clearly one "pixel" too high, no?

[olivierlacan]

Color accuracy in browsers is making me 😡.

[sferik]

the text is clearly one "pixel" too high, no?

I see what you’re saying but nudging it down a pixel would put the “g”’s descender pretty close to the bottom. You’re probably right but I’d need to see the variations next to each other before I know for sure.

[sferik]

For what it’s worth, I got convert working and the output looks like this:

That seems too light to me, even without seeing any text on it. I think there’s an issue with the way Adobe Illustrator embeds fonts in SVGs. I suspect it’s a proprietary extension to the format. 😠

[sferik]

Okay, I figured out how to make the text appear using covert:

As I suspected, the background color is way too light. I still haven’t figured out how to get the text to appear when I use svg2png, which produces a nice color.

So, our options are:

1. nice looking colors without any text,
2. illegible text because the background color is so light, or
3. a baseline that’s one pixel too high and the color is not quite right.

😞

[ackerdev]

Might want to take a look at #15, @afeld seems to have found a solution for rendering out PNGs that doesn't look to suck so bad. I haven't gotten the time to try it out myself but I do know that outside of text that everything else was rendering properly when I originally tried to convert with imagemagick. His solution should hopefully fix text rendering.

Hopefully I can find some time coming up here to recreate the SVGs as a base set of colors and make it easier to hack on, with a guide to convert the svg to png.

[sferik]

This change has already been merged into the travis-api repo: travis-ci/travis-api@5372e34

Are you waiting on anything else to merge it in here?

[ackerdev]

@sferik The text rendering on that is pretty horrible though, it's affixing itself to solid pixels and causing wonky spacing between letters. Shouldn't have implemented that, imo.

[olivierlacan]

Yep, that text rendering is all wrong, @ackerdev beat me to it. 😄

[sferik]

Wow, you guys are fast. I'll take a look at #15 and see if I can get the kerning fixed.

[olivierlacan]

Says the guy with his own Doppler effect. 😆

[olivierlacan]

Apologies for not noticing the text rendering issue here by the way @sferik, I was flying in to SF yesterday. Tired eyes.

[olivierlacan]

Alright, fixed the import render, merging this.

[ackerdev]

Nice. Guessing by a112caa that this was done via @afeld's method? Turned out nice.

[afeld]

😊