diff --git a/tap-snapshots/test-calc-text-width.spec.js-TAP.test.js b/tap-snapshots/test-calc-text-width.spec.js-TAP.test.js
index c8eb915..1ba28f5 100644
--- a/tap-snapshots/test-calc-text-width.spec.js-TAP.test.js
+++ b/tap-snapshots/test-calc-text-width.spec.js-TAP.test.js
@@ -6,13 +6,13 @@
  */
 'use strict'
 exports[`test/calc-text-width.spec.js TAP calc width for "npm" > result is correct 1`] = `
-24.9
+249
 `
 
 exports[`test/calc-text-width.spec.js TAP calc width for unicode > result is correct 1`] = `
-58
+580
 `
 
 exports[`test/calc-text-width.spec.js TAP calc width for emojis > result is correct 1`] = `
-34.8
+348
 `
diff --git a/tap-snapshots/test-index.spec.js-TAP.test.js b/tap-snapshots/test-index.spec.js-TAP.test.js
index 6d75b04..df301e5 100644
--- a/tap-snapshots/test-index.spec.js-TAP.test.js
+++ b/tap-snapshots/test-index.spec.js-TAP.test.js
@@ -7,22 +7,22 @@
 'use strict'
 exports[`test/index.spec.js TAP generate badge with { subject, status } > snapshot 1`] = `
 
-    <svg width="80.6" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg">
       <linearGradient id="a" x2="0" y2="100%">
-        <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
+        <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-      <mask id="m"><rect width="80.6" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="804" height="200" rx="30" fill="#FFF"/></mask>
       <g mask="url(#m)">
-        <rect width="35.099999999999994" height="20" fill="#555"/>
-        <rect x="35.099999999999994" width="45.5" height="20" fill="#08C"/>
-        <rect width="80.6" height="20" fill="url(#a)"/>
+        <rect width="349" height="200" fill="#555"/>
+        <rect width="455" height="200" fill="#08C" x="349"/>
+        <rect width="804" height="200" fill="url(#a)"/>
       </g>
-      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="6.5" y="14.8" textLength="24.9" fill="#000" opacity="0.25">npm</text>
-        <text x="5.5" y="13.8" textLength="24.9">npm</text>
-        <text x="40.599999999999994" y="14.8" fill="#000" opacity="0.25" textLength="35.5">v1.0.0</text>
-        <text x="39.599999999999994" y="13.8" textLength="35.5">v1.0.0</text>
+      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+        <text x="65" y="148" textLength="249" fill="#000" opacity="0.25">npm</text>
+        <text x="55" y="138" textLength="249">npm</text>
+        <text x="404" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+        <text x="394" y="138" textLength="355">v1.0.0</text>
       </g>
       
     </svg>
@@ -31,22 +31,22 @@ exports[`test/index.spec.js TAP generate badge with { subject, status } > snapsh
 
 exports[`test/index.spec.js TAP generate badge with { subject, status, color } > snapshot 1`] = `
 
-    <svg width="80.6" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg">
       <linearGradient id="a" x2="0" y2="100%">
-        <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
+        <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-      <mask id="m"><rect width="80.6" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="804" height="200" rx="30" fill="#FFF"/></mask>
       <g mask="url(#m)">
-        <rect width="35.099999999999994" height="20" fill="#555"/>
-        <rect x="35.099999999999994" width="45.5" height="20" fill="#ADF"/>
-        <rect width="80.6" height="20" fill="url(#a)"/>
+        <rect width="349" height="200" fill="#555"/>
+        <rect width="455" height="200" fill="#ADF" x="349"/>
+        <rect width="804" height="200" fill="url(#a)"/>
       </g>
-      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="6.5" y="14.8" textLength="24.9" fill="#000" opacity="0.25">npm</text>
-        <text x="5.5" y="13.8" textLength="24.9">npm</text>
-        <text x="40.599999999999994" y="14.8" fill="#000" opacity="0.25" textLength="35.5">v1.0.0</text>
-        <text x="39.599999999999994" y="13.8" textLength="35.5">v1.0.0</text>
+      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+        <text x="65" y="148" textLength="249" fill="#000" opacity="0.25">npm</text>
+        <text x="55" y="138" textLength="249">npm</text>
+        <text x="404" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+        <text x="394" y="138" textLength="355">v1.0.0</text>
       </g>
       
     </svg>
@@ -55,16 +55,16 @@ exports[`test/index.spec.js TAP generate badge with { subject, status, color } >
 
 exports[`test/index.spec.js TAP generate badge with { subject, status, style } > snapshot 1`] = `
 
-      <svg width="80.6" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg">
         <g>
-          <rect width="35.099999999999994" height="20" fill="#555"/>
-          <rect x="35.099999999999994" width="45.5" height="20" fill="#08C"/>
+          <rect fill="#555" width="349" height="200"/>
+          <rect fill="#08C" x="349" width="455" height="200"/>
         </g>
-        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-          <text x="6.3" y="14.8" textLength="24.9" fill="#000" opacity="0.1">npm</text>
-          <text x="5.3" y="13.8" textLength="24.9">npm</text>
-          <text x="40.599999999999994" y="14.8" fill="#000" opacity="0.1" textLength="35.5">v1.0.0</text>
-          <text x="39.599999999999994" y="13.8" textLength="35.5">v1.0.0</text>
+        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+          <text x="65" y="148" textLength="249" fill="#000" opacity="0.1">npm</text>
+          <text x="55" y="138" textLength="249">npm</text>
+          <text x="404" y="148" textLength="355" fill="#000" opacity="0.1">v1.0.0</text>
+          <text x="394" y="138" textLength="355">v1.0.0</text>
         </g>
         
       </svg>
@@ -73,16 +73,16 @@ exports[`test/index.spec.js TAP generate badge with { subject, status, style } >
 
 exports[`test/index.spec.js TAP generate badge with { subject, status, color, style } > snapshot 1`] = `
 
-      <svg width="80.6" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg">
         <g>
-          <rect width="35.099999999999994" height="20" fill="#555"/>
-          <rect x="35.099999999999994" width="45.5" height="20" fill="#ADF"/>
+          <rect fill="#555" width="349" height="200"/>
+          <rect fill="#ADF" x="349" width="455" height="200"/>
         </g>
-        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-          <text x="6.3" y="14.8" textLength="24.9" fill="#000" opacity="0.1">npm</text>
-          <text x="5.3" y="13.8" textLength="24.9">npm</text>
-          <text x="40.599999999999994" y="14.8" fill="#000" opacity="0.1" textLength="35.5">v1.0.0</text>
-          <text x="39.599999999999994" y="13.8" textLength="35.5">v1.0.0</text>
+        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+          <text x="65" y="148" textLength="249" fill="#000" opacity="0.1">npm</text>
+          <text x="55" y="138" textLength="249">npm</text>
+          <text x="404" y="148" textLength="355" fill="#000" opacity="0.1">v1.0.0</text>
+          <text x="394" y="138" textLength="355">v1.0.0</text>
         </g>
         
       </svg>
@@ -91,66 +91,66 @@ exports[`test/index.spec.js TAP generate badge with { subject, status, color, st
 
 exports[`test/index.spec.js TAP generate badge with { subject, status, icon } > snapshot 1`] = `
 
-    <svg width="96.69999999999999" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="96.5" height="20" viewBox="0 0 965 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <linearGradient id="a" x2="0" y2="100%">
-        <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
+        <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-      <mask id="m"><rect width="96.69999999999999" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="965" height="200" rx="30" fill="#FFF"/></mask>
       <g mask="url(#m)">
-        <rect width="64.3" height="20" fill="#555"/>
-        <rect x="64.3" width="32.4" height="20" fill="#08C"/>
-        <rect width="96.69999999999999" height="20" fill="url(#a)"/>
+        <rect width="641" height="200" fill="#555"/>
+        <rect width="324" height="200" fill="#08C" x="641"/>
+        <rect width="965" height="200" fill="url(#a)"/>
       </g>
-      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="22.5" y="14.8" textLength="37.1" fill="#000" opacity="0.25">docker</text>
-        <text x="21.5" y="13.8" textLength="37.1">docker</text>
-        <text x="69.8" y="14.8" fill="#000" opacity="0.25" textLength="22.4">icon</text>
-        <text x="68.8" y="13.8" textLength="22.4">icon</text>
+      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+        <text x="225" y="148" textLength="371" fill="#000" opacity="0.25">docker</text>
+        <text x="215" y="138" textLength="371">docker</text>
+        <text x="696" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
+        <text x="686" y="138" textLength="224">icon</text>
       </g>
-      <image x="3.9" y="3.5" width="13" height="13" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
+      <image x="39" y="35" width="130" height="130" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
     </svg>
   
 `
 
 exports[`test/index.spec.js TAP generate badge with { status, icon } > snapshot 1`] = `
 
-    <svg width="53.599999999999994" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="53.4" height="20" viewBox="0 0 534 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <linearGradient id="a" x2="0" y2="100%">
-        <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
+        <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-      <mask id="m"><rect width="53.599999999999994" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="534" height="200" rx="30" fill="#FFF"/></mask>
       <g mask="url(#m)">
-        <rect width="21.2" height="20" fill="#555"/>
-        <rect x="21.2" width="32.4" height="20" fill="#08C"/>
-        <rect width="53.599999999999994" height="20" fill="url(#a)"/>
+        <rect width="210" height="200" fill="#555"/>
+        <rect width="324" height="200" fill="#08C" x="210"/>
+        <rect width="534" height="200" fill="url(#a)"/>
       </g>
-      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="22.5" y="14.8" textLength="0" fill="#000" opacity="0.25"></text>
-        <text x="21.5" y="13.8" textLength="0"></text>
-        <text x="26.7" y="14.8" fill="#000" opacity="0.25" textLength="22.4">icon</text>
-        <text x="25.7" y="13.8" textLength="22.4">icon</text>
+      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+        <text x="225" y="148" textLength="0" fill="#000" opacity="0.25"></text>
+        <text x="215" y="138" textLength="0"></text>
+        <text x="265" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
+        <text x="255" y="138" textLength="224">icon</text>
       </g>
-      <image x="3.9" y="3.5" width="13" height="13" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
+      <image x="39" y="35" width="130" height="130" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
     </svg>
   
 `
 
 exports[`test/index.spec.js TAP generate badge with { subject, status, icon, style } > snapshot 1`] = `
 
-      <svg width="96.69999999999999" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg width="96.5" height="20" viewBox="0 0 965 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <g>
-          <rect width="64.3" height="20" fill="#555"/>
-          <rect x="64.3" width="32.4" height="20" fill="#08C"/>
+          <rect fill="#555" width="641" height="200"/>
+          <rect fill="#08C" x="641" width="324" height="200"/>
         </g>
-        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-          <text x="22.5" y="14.8" textLength="37.1" fill="#000" opacity="0.1">docker</text>
-          <text x="21.5" y="13.8" textLength="37.1">docker</text>
-          <text x="69.8" y="14.8" fill="#000" opacity="0.1" textLength="22.4">icon</text>
-          <text x="68.8" y="13.8" textLength="22.4">icon</text>
+        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+          <text x="225" y="148" textLength="371" fill="#000" opacity="0.1">docker</text>
+          <text x="215" y="138" textLength="371">docker</text>
+          <text x="696" y="148" textLength="224" fill="#000" opacity="0.1">icon</text>
+          <text x="686" y="138" textLength="224">icon</text>
         </g>
-        <image x="3.8" y="3.4" width="13" height="13.2" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
+        <image x="38" y="34" width="130" height="132" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
       </svg>
     
 `