JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;width:100%;background:blue;">
  <canvas width="25" height="25"></canvas>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.51 25.51">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
  </svg>
</div>

CSS

svg rect {
  fill: red;
  stroke: #000;
  stroke-width: 2px;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}