Add SVGO to the pipeline

.gitignore

@@ -0,0 +1,14 @@
+# Installed npm modules
+node_modules
+
+# Folder view configuration files
+.DS_Store
+Desktop.ini
+
+# Thumbnail cache files
+._*
+Thumbs.db
+
+# Files that might appear on external disks
+.Spotlight-V100
+.Trashes

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="shadow"> <feOffset dx="0" dy="1" in="SourceAlpha"/> <feColorMatrix type="matrix" 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(#shadow)">build</text> <text x="55" y="12" filter="url(#shadow)">passed</text> </g></svg>
+<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>

make.js

@@ -1,5 +1,6 @@
 var fs = require('fs');
 var dot = require('dot');
+var SVGO = require('svgo');
 var badges = require('./badges.json');
 var template = fs.readFileSync('./template.svg');
 var imageTemplate = dot.template(''+template);
@@ -9,12 +10,21 @@ var imageTemplate = dot.template(''+template);
 var imageSheet = './sheet.html';
 var resultSheet = '';
 
+function optimize(string, callback) {
+  var svgo = new SVGO();
+  svgo.optimize(string, callback);
+}
+
 function makeImage(name, data) {
   var result = imageTemplate(data);
-  // Put this image on the sheet.
+  // Run the SVG through SVGO.
-  resultSheet += result;
+  optimize(result, function(object) {
-  // Write the image individually.
+    var result = object.data;
-  fs.writeFileSync(name + '.svg', result);
+    // Put this image on the sheet.
+    resultSheet += result;
+    // Write the image individually.
+    fs.writeFileSync(name + '.svg', result);
+  });
 }
 
 function buildImages() {

package.json

@@ -9,6 +9,7 @@
   },
   "license": "CC0",
   "dependencies": {
-    "dot": ">=1.0.2"
+    "dot": ">=1.0.2",
+    "svgo": "~0.4.2"
   }
 }

sheet.html

@@ -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="shadow"> <feOffset dx="0" dy="1" in="SourceAlpha"/> <feColorMatrix type="matrix" 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(#shadow)">build</text> <text x="55" y="12" filter="url(#shadow)">passed</text> </g></svg>
+<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>