shield.svg

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="83px"
     height="18px">
  <defs>
    <linearGradient id="gray" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#AAAAAA" />
      <stop offset="0.1"  style="stop-color:#5A5A5A" />
      <stop offset="0.96" style="stop-color:#3F3F3F" />
      <stop offset="1"    style="stop-color:#2E2E2E" />
    </linearGradient>
    <linearGradient id="lightgray" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#D6D6D6" />
      <stop offset="0.1"  style="stop-color:#9F9F9F" />
      <stop offset="0.96" style="stop-color:#707070" />
      <stop offset="1"    style="stop-color:#515151" />
    </linearGradient>
    <linearGradient id="darkgray" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0.0"  style="stop-color:#909090" />
      <stop offset="0.1"  style="stop-color:#313131" />
      <stop offset="0.96" style="stop-color:#232323" />
      <stop offset="1"    style="stop-color:#191919" />
    </linearGradient>
    <linearGradient id="green" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#9DED7D"/>
      <stop offset="0.1"  style="stop-color:#4AD115"/>
      <stop offset="0.96" style="stop-color:#31B70E"/>
      <stop offset="1"    style="stop-color:#23630A"/>
    </linearGradient>
    <linearGradient id="yellowgreen" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#D1F171"/>
      <stop offset="0.1"  style="stop-color:#97CA00"/>
      <stop offset="0.96" style="stop-color:#6B8F00"/>
      <stop offset="1"    style="stop-color:#4D6700"/>
    </linearGradient>
    <linearGradient id="yellow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#FFE37F"/>
      <stop offset="0.1"  style="stop-color:#E0B417"/>
      <stop offset="0.96" style="stop-color:#9E7F10"/>
      <stop offset="1"    style="stop-color:#725C0C"/>
    </linearGradient>
    <linearGradient id="red" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="18">
      <stop offset="0"    style="stop-color:#FFAC9C"/>
      <stop offset="0.1"  style="stop-color:#E05D44"/>
      <stop offset="0.96" style="stop-color:#9E4230"/>
      <stop offset="1"    style="stop-color:#722F22"/>
    </linearGradient>
    <filter id="dropshadow" height="100%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="0"/>
      <feOffset dx="0" dy="1" result="offsetblur"/>
      <feComponentTransfer xmlns="http://www.w3.org/2000/svg">
        <feFuncA type="linear" slope="0.3"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <g id="vendor">
    <path d="M0,9 v-6 q0,-3,3,-3 v18 q-3,0,-3,-3 Z" fill="url(#gray)" />
    <rect x="3" y="0" width="40" height="18" fill="url(#gray)" />
    <text x="6" y="12" font-family="Open Sans" font-size="10" fill="#FFFFFF" style="filter:url(#dropshadow)">
          vendor
    </text>
  </g>

  <g id="status">
    <rect x="43" y="0" width="37" height="18" fill="url(#lightgray)" />
    <path fill="url(#lightgray)" d="M83,9 v-6 q0,-3,-3,-3 v18 q3,0,3,-3 Z" />
    <text x="47" y="12" font-family="Open Sans" font-size="10" fill="#FFFFFF" style="filter:url(#dropshadow)">
          status
    </text>
  </g>
</svg>