Preview SVGs

template.svg

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 198 264"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <style>
    @media screen and (prefers-color-scheme: dark) { svg { color-scheme: dark }}
  </style>

  <defs>
    <g id="grid" stroke-opacity="25%" stroke-width="0.1" stroke-linecap="butt">
      <rect width="23.9" height="23.9" x="0.05" y="0.05" rx="0.9"/>
      <path d="M.1 1h23.8M1 .1v23.8M.1 2h23.8M2 .1v23.8M.1 3h23.8M3 .1v23.8M.1 4h23.8M4 .1v23.8M.1 5h23.8M5 .1v23.8M.1 6h23.8M6 .1v23.8M.1 7h23.8M7 .1v23.8M.1 8h23.8M8 .1v23.8M.1 9h23.8M9 .1v23.8M.1 10h23.8M10 .1v23.8M.1 11h23.8M11 .1v23.8M.1 12h23.8M12 .1v23.8M.1 13h23.8M13 .1v23.8M.1 14h23.8M14 .1v23.8M.1 15h23.8M15 .1v23.8M.1 16h23.8M16 .1v23.8M.1 17h23.8M17 .1v23.8M.1 18h23.8M18 .1v23.8M.1 19h23.8M19 .1v23.8M.1 20h23.8M20 .1v23.8M.1 21h23.8M21 .1v23.8M.1 22h23.8M22 .1v23.8M.1 23h23.8M23 .1v23.8"/>
    </g>

    <g id="1">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="2">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="3">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="4">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="5">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="6">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="7">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="8">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="9">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="10">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="11">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="12">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="13">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="14">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="15">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="16">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="17">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="18">
      <circle cx="12" cy="12" r="10"/>
    </g>
    <g id="19">
      <rect width="18" height="18" x="3" y="3" rx="2"/>
    </g>
    <g id="20">
      <circle cx="12" cy="12" r="10"/>
    </g>

  </defs>

  <g id="row" transform="scale(0.25)">
    <use href="#1"/>
    <use href="#2"  transform="translate(25)"/>
    <use href="#3"  transform="translate(50)"/>
    <use href="#4"  transform="translate(75)"/>
    <use href="#5"  transform="translate(100)"/>
    <use href="#6"  transform="translate(125)"/>
    <use href="#7"  transform="translate(150)"/>
    <use href="#8"  transform="translate(175)"/>
    <use href="#9"  transform="translate(200)"/>
    <use href="#10" transform="translate(225)"/>
    <use href="#11" transform="translate(250)"/>
    <use href="#12" transform="translate(275)"/>
    <use href="#13" transform="translate(300)"/>
    <use href="#14" transform="translate(325)"/>
    <use href="#15" transform="translate(350)"/>
    <use href="#16" transform="translate(375)"/>
    <use href="#17" transform="translate(400)"/>
    <use href="#18" transform="translate(425)"/>
    <use href="#19" transform="translate(450)"/>
    <use href="#20" transform="translate(475)"/>
  </g>

  <g transform="translate(0,7)" stroke-width="1">
    <use href="#row"/>
  </g>

  <g transform="scale(2) translate(0,8)">
    <g>
      <use href="#grid"/>
      <use href="#1"/>
    </g>
    <g transform="translate(25)">
      <use href="#grid"/>
      <use href="#2"/>
    </g>
    <g transform="translate(50)">
      <use href="#grid"/>
      <use href="#3"/>
    </g>
    <g transform="translate(75)">
      <use href="#grid"/>
      <use href="#4"/>
    </g>
    <g transform="translate(0,25)">
      <use href="#grid"/>
      <use href="#5"/>
    </g>
    <g transform="translate(25,25)">
      <use href="#grid"/>
      <use href="#6"/>
    </g>
    <g transform="translate(50,25)">
      <use href="#grid"/>
      <use href="#7"/>
    </g>
    <g transform="translate(75,25)">
      <use href="#grid"/>
      <use href="#8"/>
    </g>
    <g transform="translate(0,50)">
      <use href="#grid"/>
      <use href="#9"/>
    </g>
    <g transform="translate(25,50)">
      <use href="#grid"/>
      <use href="#10"/>
    </g>
    <g transform="translate(50,50)">
      <use href="#grid"/>
      <use href="#11"/>
    </g>
    <g transform="translate(75,50)">
      <use href="#grid"/>
      <use href="#12"/>
    </g>
    <g transform="translate(0,75)">
      <use href="#grid"/>
      <use href="#13"/>
    </g>
    <g transform="translate(25,75)">
      <use href="#grid"/>
      <use href="#14"/>
    </g>
    <g transform="translate(50,75)">
      <use href="#grid"/>
      <use href="#15"/>
    </g>
    <g transform="translate(75,75)">
      <use href="#grid"/>
      <use href="#16"/>
    </g>
    <g transform="translate(0,100)">
      <use href="#grid"/>
      <use href="#17"/>
    </g>
    <g transform="translate(25,100)">
      <use href="#grid"/>
      <use href="#18"/>
    </g>
    <g transform="translate(50,100)">
      <use href="#grid"/>
      <use href="#19"/>
    </g>
    <g transform="translate(75,100)">
      <use href="#grid"/>
      <use href="#20"/>
    </g>
  </g>

</svg>