Code improvements

[mathiasbynens]

Let’s move the minor tweaks and suggestions from https://gist.github.com/espadrine/8218740#comments to this issue.

The initial code was:

<svg xmlns='http://www.w3.org/2000/svg'>
  <style type='text/css'>
    text {fill:#fff; font-family:'Trebuchet MS',sans-serif; font-size:10px;}
  </style>
  <linearGradient id='ggreen' x2='0%' y2='100%'>
    <stop offset='0' stop-color='#8f6'/>
    <stop offset='0.1' stop-color='#5d2'/>
    <stop offset='0.9' stop-color='#3b0'/>
    <stop offset='1' stop-color='#370'/>
  </linearGradient>
  <linearGradient id='ggrey' x2='0%' y2='100%'>
    <stop offset='0' stop-color='#aaa'/>
    <stop offset='0.1' stop-color='#666'/>
    <stop offset='0.9' stop-color='#444'/>
    <stop offset='1' stop-color='#222'/>
  </linearGradient>
  <rect rx='4px' width='77px' height='18px' style='fill:url(#ggrey)'/>
  <rect rx='4px' x='32px' width='45px' height='18px' style='fill:url(#ggreen)'/>
  <rect x='32px' width='5px' height='18px' style='fill:url(#ggreen)'/>
  <text x='5px' y='12.5px' style='stroke:rgba(0,0,0,0.3)'>build</text>
  <text x='5px' y='12px'>build</text>
  <text x='39px' y='12.5px' style='stroke:rgba(0,0,0,0.3)'>passed</text>
  <text x='39px' y='12px'>passed</text>
</svg>

[mathiasbynens]

I made some minor changes, just removing a bit of cruft:

<svg xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    text {
      fill: #fff;
      font-family: Trebuchet MS, sans-serif;
      font-size: 10px;
    }
  </style>
  <linearGradient id="ggreen" x2="0%" y2="100%">
    <stop offset="0" stop-color="#8f6"/>
    <stop offset="0.1" stop-color="#5d2"/>
    <stop offset="0.9" stop-color="#3b0"/>
    <stop offset="1" stop-color="#370"/>
  </linearGradient>
  <linearGradient id="ggrey" x2="0%" y2="100%">
    <stop offset="0" stop-color="#aaa"/>
    <stop offset="0.1" stop-color="#666"/>
    <stop offset="0.9" stop-color="#444"/>
    <stop offset="1" stop-color="#222"/>
  </linearGradient>
  <rect rx="4" width="77" height="18" style="fill:url(#ggrey)"/>
  <rect rx="4" x="32" width="45" height="18" style="fill:url(#ggreen)"/>
  <rect x="32" width="5" height="18" style="fill:url(#ggreen)"/>
  <text x="5" y="12.5" style="stroke:rgba(0,0,0,.3)">build</text>
  <text x="5" y="12">build</text>
  <text x="39" y="12.5" style="stroke:rgba(0,0,0,.3)">passed</text>
  <text x="39" y="12">passed</text>
</svg>

[mathiasbynens]

Then, @alrra suggested even more improvements:

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="b" x2="0" y2="100%">
    <stop offset="0" stop-color="#8f6"/>
    <stop offset=".1" stop-color="#5d2"/>
    <stop offset=".9" stop-color="#3b0"/>
    <stop offset="1" stop-color="#370"/>
  </linearGradient>
  <linearGradient id="a" x2="0" y2="100%">
    <stop offset="0" stop-color="#aaa"/>
    <stop offset=".1" stop-color="#666"/>
    <stop offset=".9" stop-color="#444"/>
    <stop offset="1" stop-color="#222"/>
  </linearGradient>
  <g fill="#fff" font-family="Trebuchet MS, sans-serif" font-size="10px">
    <rect rx="4" width="77" height="18" fill="url(#a)"/>
    <rect rx="4" x="32" width="45" height="18" fill="url(#b)"/>
    <rect x="32" width="5" height="18" fill="url(#b)"/>
    <text x="5" y="12.5" stroke="rgba(0,0,0,.3)">build</text>
    <text x="5" y="12">build</text>
    <text x="39" y="12.5" stroke="rgba(0,0,0,.3)">passed</text>
    <text x="39" y="12">passed</text>
  </g>
</svg>

[mathiasbynens]

I’d leave the gradient names “unminified”, though, as we might want to create a build script that generates these badges based on a template (different colors/gradients/texts).

[espadrine]

That's really good!

Should I wait for a pull request from @alrra, or mention the name in the commit message?

[alrra]

@espadrine I'll can make a pull request if you want.

[espadrine]

@alrra I'd love you to, I'd feel better about it.

[espadrine]

Also, I believe you should keep the width and height in the <svg> element.

Not sure how to set those through a script though.

[mathiasbynens]

@espadrine See #2. I guess a config entry for each badge would be the best solution. (But for services that want to serve badges based on arbitrary strings in URL parameters, it will indeed be a bit harder to get decent results in all cases.)