<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="<%= @badge_width %>" height="20" role="img" aria-label="<%= @key[:text] %>: <%= @value[:text] %>">
  <title><%= @key[:text] %>: <%= @value[:text] %></title>
  <linearGradient id="s" x2="0" y2="100%">
    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
    <stop offset="1" stop-opacity=".1"/>
  </linearGradient>
  <clipPath id="r">
    <rect width="<%= @badge_width %>" height="20" rx="3" fill="#fff"/>
  </clipPath>
  <g clip-path="url(#r)">
    <rect width="<%= @key[:outer_width] %>" height="20" fill="<%= @key[:color] %>"/>
    <rect x="<%= @key[:outer_width] %>" width="<%= @value[:outer_width] %>" height="20" fill="<%= @value[:color] %>"/>
    <rect width="<%= @badge_width %>" height="20" fill="url(#s)"/>
  </g>
  <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
    <text aria-hidden="true" x="<%= @key[:x] %>" y="150" fill="#010101" fill-opacity=".3" transform="scale(<%= scale_down_factor %>)" textLength="<%= @key[:text_width] * scale_up_factor %>"><%= @key[:text] %></text>
    <text x="<%= @key[:x] %>" y="140" transform="scale(<%= scale_down_factor %>)" fill="#fff" textLength="<%= @key[:text_width] * scale_up_factor %>"><%= @key[:text] %></text>
    <text aria-hidden="true" x="<%= @value[:x] %>" y="150" fill="#010101" fill-opacity=".3" transform="scale(<%= scale_down_factor %>)" textLength="<%= @value[:text_width] * scale_up_factor %>"><%= @value[:text] %></text>
    <text x="<%= @value[:x] %>" y="140" transform="scale(.1)" fill="#fff" textLength="<%= @value[:text_width] * scale_up_factor %>"><%= @value[:text] %></text>
  </g>
</svg>