Replace PNG icons with shields.io-style SVG icons

Fixes https://issues.jenkins-ci.org/browse/JENKINS-23062 and
https://issues.jenkins-ci.org/browse/JENKINS-21112

src/main/java/org/jenkinsci/plugins/badge/ImageResolver.java

@@ -33,11 +33,11 @@
 
     public ImageResolver() throws IOException{
         images = new StatusImage[] {
-                new StatusImage("failure.png"),
-                new StatusImage("unstable.png"),
-                new StatusImage("success.png"),
-                new StatusImage("running.png"),
-                new StatusImage("unknown.png")
+                new StatusImage("build-failure-red.svg"),
+                new StatusImage("build-unstable-yellow.svg"),
+                new StatusImage("build-passing-brightgreen.svg"),
+                new StatusImage("build-running-blue.svg"),
+                new StatusImage("build-unknown-lightgrey.svg")
         };
     }
 

src/main/java/org/jenkinsci/plugins/badge/StatusImage.java

@@ -65,7 +65,7 @@ public void generateResponse(StaplerRequest req, StaplerResponse rsp, Object nod
         rsp.setHeader("ETag",etag);
         rsp.setHeader("Expires","Fri, 01 Jan 1984 00:00:00 GMT");
         rsp.setHeader("Cache-Control", "no-cache, private");
-        rsp.setHeader("Content-Type", "image/png");
+        rsp.setHeader("Content-Type", "image/svg+xml;charset=utf-8");
         rsp.setHeader("Content-Length", length);
         rsp.getOutputStream().write(payload);
     }

src/main/webapp/status/build-failing-red.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="18"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-opacity=".3"/><stop offset="1" stop-opacity=".5"/></linearGradient><rect rx="4" width="81" height="18" fill="#555"/><rect rx="4" x="37" width="44" height="18" fill="#e05d44"/><path fill="#e05d44" d="M37 0h4v18h-4z"/><rect rx="4" width="81" height="18" fill="url(#a)"/><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="19.5" y="13" fill="#010101" fill-opacity=".3">build</text><text x="19.5" y="12">build</text><text x="58" y="13" fill="#010101" fill-opacity=".3">failing</text><text x="58" y="12">failing</text></g></svg>

src/main/webapp/status/build-passing-brightgreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="18"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-opacity=".3"/><stop offset="1" stop-opacity=".5"/></linearGradient><rect rx="4" width="90" height="18" fill="#555"/><rect rx="4" x="37" width="53" height="18" fill="#4c1"/><path fill="#4c1" d="M37 0h4v18h-4z"/><rect rx="4" width="90" height="18" fill="url(#a)"/><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="19.5" y="13" fill="#010101" fill-opacity=".3">build</text><text x="19.5" y="12">build</text><text x="62.5" y="13" fill="#010101" fill-opacity=".3">passing</text><text x="62.5" y="12">passing</text></g></svg>

src/main/webapp/status/build-running-blue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="18"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-opacity=".3"/><stop offset="1" stop-opacity=".5"/></linearGradient><rect rx="4" width="90" height="18" fill="#555"/><rect rx="4" x="37" width="53" height="18" fill="#007ec6"/><path fill="#007ec6" d="M37 0h4v18h-4z"/><rect rx="4" width="90" height="18" fill="url(#a)"/><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="19.5" y="13" fill="#010101" fill-opacity=".3">build</text><text x="19.5" y="12">build</text><text x="62.5" y="13" fill="#010101" fill-opacity=".3">running</text><text x="62.5" y="12">running</text></g></svg>

src/main/webapp/status/build-unknown-lightgrey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="98" height="18"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-opacity=".3"/><stop offset="1" stop-opacity=".5"/></linearGradient><rect rx="4" width="98" height="18" fill="#555"/><rect rx="4" x="37" width="61" height="18" fill="#9f9f9f"/><path fill="#9f9f9f" d="M37 0h4v18h-4z"/><rect rx="4" width="98" height="18" fill="url(#a)"/><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="19.5" y="13" fill="#010101" fill-opacity=".3">build</text><text x="19.5" y="12">build</text><text x="66.5" y="13" fill="#010101" fill-opacity=".3">unknown</text><text x="66.5" y="12">unknown</text></g></svg>

src/main/webapp/status/build-unstable-yellow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95" height="18"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-opacity=".3"/><stop offset="1" stop-opacity=".5"/></linearGradient><rect rx="4" width="95" height="18" fill="#555"/><rect rx="4" x="37" width="58" height="18" fill="#dfb317"/><path fill="#dfb317" d="M37 0h4v18h-4z"/><rect rx="4" width="95" height="18" fill="url(#a)"/><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="19.5" y="13" fill="#010101" fill-opacity=".3">build</text><text x="19.5" y="12">build</text><text x="65" y="13" fill="#010101" fill-opacity=".3">unstable</text><text x="65" y="12">unstable</text></g></svg>