coverage.svg

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="600"
    height="270"
    viewBox="0 0 600 270"
    fill="none"
  >
    
  <style>
    .header {
      font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
      fill: #000;
    }
    .group-name {
      font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif;
      fill: #333
    }
  </style>

    <rect x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="599" fill="#fffefe" stroke-opacity="1" />
    <g transform="translate(300, 25)">
      <text x="0" y="0" class="header" alignment-baseline="middle" text-anchor="middle">Test Coverage</text>
    </g>
    <g transform="translate(0, 55)">
      <svg x="25">
    <g transform="translate(0, 0)">
      <text x="2" y="15" class="group-name">Services   |   99%   |   11866/12023</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="98.69%"
        />
      </svg>
    </g>
  

    <g transform="translate(345, 0)">
      <text x="2" y="15" class="group-name">Controllers   |   92%   |   410/444</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="92.34%"
        />
      </svg>
    </g>
  

    <g transform="translate(0, 40)">
      <text x="2" y="15" class="group-name">Models   |   97%   |   5149/5327</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="96.66%"
        />
      </svg>
    </g>
  

    <g transform="translate(345, 40)">
      <text x="2" y="15" class="group-name">Jobs   |   97%   |   1614/1659</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="97.29%"
        />
      </svg>
    </g>
  

    <g transform="translate(0, 80)">
      <text x="2" y="15" class="group-name">Libraries   |   88%   |   1270/1450</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="87.59%"
        />
      </svg>
    </g>
  

    <g transform="translate(345, 80)">
      <text x="2" y="15" class="group-name">Ungrouped   |   96%   |   12217/12753</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="95.8%"
        />
      </svg>
    </g>
  </svg>
    </g>
    <g transform="translate(25, 200)">
      <rect rx="2" ry="2" width="550" height="2" fill="#000"/>
    </g>
    <g transform="translate(0, 220)">
      <svg x="25">
        
    <g transform="translate(0, 0)">
      <text x="2" y="15" class="group-name">Total   |   97%   |   32526/33656</text>
      <svg width="205" x="0" y="25">
        <rect rx="5" ry="5" x="0" y="0" width="205" height="8" fill="#ddd"/>
        <rect
          height="8"
          fill="#50C878"
          rx="5"
          ry="5"
          x="0"
          y="0"
          width="96.64%"
        />
      </svg>
    </g>
  
      </svg>
    </g>
  </svg>