<svg xmlns="http://www.w3.org/2000/svg" width="{{=it.widths[0]+it.widths[1]}}" height="20">
  <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
  <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
  <rect x="{{=it.widths[0]}}" width="4" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
  <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill-opacity=".1"/>
  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
    <text x="{{=it.widths[0]/2+1}}" y="14">{{=it.escapeXml(it.text[0])}}</text>
    <text x="{{=it.widths[0]+it.widths[1]/2-1}}" y="14">{{=it.escapeXml(it.text[1])}}</text>
  </g>
</svg>

Update flat-square template for better color matching
Update flat-square template for better color matching
