Put all images in a folder.

Also, cheez whiz.

badges.json

@@ -2,8 +2,23 @@
   "badges": {
     "build-passed": {
       "text": [ "build", "passed" ],
-      "widths": [ 33, 44 ],
+      "widths": [ 35, 48 ],
       "colorscheme": "green"
+    },
+    "build-passing": {
+      "text": [ "build", "passing" ],
+      "widths": [ 35, 52 ],
+      "colorscheme": "green"
+    },
+    "dependencies-none": {
+      "text": [ "dependencies", "none" ],
+      "widths": [ 85, 37 ],
+      "colorscheme": "green"
+    },
+    "cheez-whiz": {
+      "text": [ "cheez", "whiz" ],
+      "widths": [ 41, 33 ],
+      "colorB": [ "#e0b519", "#dbb016", "#a08010", "#725c0c" ]
     }
   },
   "colorschemes": {

build-passed.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="77" height="18" fill="url(#a)"/><rect rx="4" x="33" width="44" height="18" fill="url(#b)"/><rect x="33" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"><text x="16.5" y="12" filter="url(#c)">build</text><text x="55" y="12" filter="url(#c)">passed</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="83" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="83" height="18" fill="url(#a)"/><rect rx="4" x="35" width="48" height="18" fill="url(#b)"/><rect x="35" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10"><text x="17.5" y="12" filter="url(#c)">build</text><text x="59" y="12" filter="url(#c)">passed</text></g></svg>

img/build-passed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="83" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="83" height="18" fill="url(#a)"/><rect rx="4" x="35" width="48" height="18" fill="url(#b)"/><rect x="35" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10"><text x="17.5" y="12" filter="url(#c)">build</text><text x="59" y="12" filter="url(#c)">passed</text></g></svg>

img/build-passing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="87" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="87" height="18" fill="url(#a)"/><rect rx="4" x="35" width="52" height="18" fill="url(#b)"/><rect x="35" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10"><text x="17.5" y="12" filter="url(#c)">build</text><text x="61" y="12" filter="url(#c)">passing</text></g></svg>

img/cheez-whiz.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#e0b519"/><stop offset=".1" stop-color="#dbb016"/><stop offset=".9" stop-color="#a08010"/><stop offset="1" stop-color="#725c0c"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="74" height="18" fill="url(#a)"/><rect rx="4" x="41" width="33" height="18" fill="url(#b)"/><rect x="41" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10"><text x="20.5" y="12" filter="url(#c)">cheez</text><text x="57.5" y="12" filter="url(#c)">whiz</text></g></svg>

img/dependencies-none.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="122" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="122" height="18" fill="url(#a)"/><rect rx="4" x="85" width="37" height="18" fill="url(#b)"/><rect x="85" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10"><text x="42.5" y="12" filter="url(#c)">dependencies</text><text x="103.5" y="12" filter="url(#c)">none</text></g></svg>

make.js

@@ -1,4 +1,5 @@
 var fs = require('fs');
+var path = require('path');
 var Promise = require('es6-promise').Promise;
 var dot = require('dot');
 var SVGO = require('svgo');
@@ -9,9 +10,12 @@ var template = fs.readFileSync('./template.svg');
 var imageTemplate = dot.template(''+template);
 
 // Construct the image sheet.
-var imageSheet = './sheet.html';
+var imageSheet = 'sheet.html';
 var resultSheet = '';
 
+// Where the images will be put.
+var targetImgDir = 'img';
+
 function optimize(string, callback) {
   var svgo = new SVGO();
   svgo.optimize(string, callback);
@@ -26,10 +30,11 @@ function makeImage(name, data, cb) {
   // Run the SVG through SVGO.
   optimize(result, function(object) {
     var result = object.data;
+    var filename = path.join(targetImgDir, name + '.svg');
     // Put this image on the sheet.
-    resultSheet +=  '<p>' + result;
+    resultSheet +=  '<p><img src="' + filename + '">';
     // Write the image individually.
-    fs.writeFileSync(name + '.svg', result);
+    fs.writeFileSync(filename, result);
     cb();
   });
 }
@@ -37,7 +42,7 @@ function makeImage(name, data, cb) {
 // Return a promise to have all images written out individually.
 function buildImages() {
   return Promise.all(Object.keys(badges).map(function(name) {
-    console.log('badge', name);
+    //console.log('badge', name);
     return new Promise(function(resolve) {
       makeImage(name, badges[name], resolve);
     });
@@ -49,7 +54,7 @@ function main() {
   buildImages()
   .then(function() {
     // Write the sheet.
-    console.log('sheet');
+    //console.log('sheet');
     fs.writeFileSync(imageSheet, resultSheet);
   })
   .catch(function(e) { console.error(e.stack); });

sheet.html

@@ -1 +1 @@
-<p><svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"><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><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#8f6"/><stop offset=".1" stop-color="#4c1"/><stop offset=".9" stop-color="#3b0"/><stop offset="1" stop-color="#370"/></linearGradient><filter id="c"><feOffset dy="1" in="SourceAlpha"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect rx="4" width="77" height="18" fill="url(#a)"/><rect rx="4" x="33" width="44" height="18" fill="url(#b)"/><rect x="33" width="4" height="18" fill="url(#b)"/><g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"><text x="16.5" y="12" filter="url(#c)">build</text><text x="55" y="12" filter="url(#c)">passed</text></g></svg>
+<p><img src="img/build-passed.svg"><p><img src="img/build-passing.svg"><p><img src="img/dependencies-none.svg"><p><img src="img/cheez-whiz.svg">

template.svg

@@ -22,7 +22,7 @@
   <rect rx="4" width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#a)"/>
   <rect rx="4" x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="url(#b)"/>
   <rect x="{{=it.widths[0]}}" width="4" height="18" fill="url(#b)"/>
-  <g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10">
+  <g fill="#fff" text-anchor="middle" font-family="Verdana, sans-serif" font-size="10">
     <text x="{{=it.widths[0]/2}}" y="12" filter="url(#shadow)">{{=it.text[0]}}</text>
     <text x="{{=it.widths[0]+it.widths[1]/2}}" y="12" filter="url(#shadow)">{{=it.text[1]}}</text>
   </g>