Problem making SVG shapes responsive on mobile and tablet

Question

I have a bunch of SVG shapes(Hexagones) that render perfectly on desktop screen. However when the screen is reduced to tablet and mobile some of the hexagones do not render properly. I have tried with media query but still not responsive.

BTW this snippet html is made manually so it has a bunch of duplicate code with different x,y positions for hexagone, so do not be scared a lot of html codes.

I would appreciate any help.

body {
    background-color: #333;
    font-family: 'Luckiest Guy', cursive;
  }
  
  #hexGrid {
    width: 80vw;
    height: 80vh;
}

@media (max-width : 600px) {
   #hexGrid {
     width:84vw;
     height: 100vh;
   }
}

<svg id="hexGrid">
        <svg  viewBox="0 0 200 200">
            <defs>
                <g id="pod">
                    <polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
                </g>
            </defs>
        </svg>
        <!--ODD COLUMNS-->
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
                <text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A1</text>
            </g>
        </svg>
        
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
                <text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
                <text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
                <text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
                <text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
                <text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
                <text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
                <text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
                <text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
                <text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
                <text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
                <text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
                <text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
                <text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
                <text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I3</text>
            </g>
        </svg>

        <!--EVEN COLUMNS-->
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
                <text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
                <text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
                <text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
                <text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
                <text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
                <text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
                <text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
                <text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
                <text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
                <text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
                <text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
                <text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
                <text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
                <text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
                <text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
                <text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H4</text>
            </g>
        </svg>
    </svg>

Answer 1

First, i'm not sure it's a good practice to use nested SVG... (Edit: After some research it's seems not a bad practice...)

And your issue is related to viewbox of SVG. You can try with following viewbox: <svg viewBox="0 0 290 200">

And you can safely remove nested SVG

#hexGrid {
    width: 80vw;
    height: 80vh;
}
body {
    background-color: #666;
    font-family: 'Luckiest Guy', cursive;
  }
  

<svg id="hexGrid" viewBox="0 0 290 200">
        
            <defs>
                <g id="pod">
                    <polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
                </g>
            </defs>

        <!--ODD COLUMNS-->
        
            <g >
                <use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
                <text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A1</text>
            </g>

        
        
            <g >
                <use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
                <text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A2</text>
            </g>

        
            <g >
                <use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
                <text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A3</text>
            </g>

        
            <g >
                <use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
                <text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C1</text>
            </g>

        
            <g >
                <use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
                <text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
                <text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
                <text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E1</text>
            </g>

        
            <g >
                <use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
                <text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E2</text>
            </g>

        
            <g >
                <use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
                <text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
                <text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
                <text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
                <text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
                <text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
                <text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
                <text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I3</text>
            </g>


        <!--EVEN COLUMNS-->
        
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
                <text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
                <text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
                <text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
                <text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B4</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
                <text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
                <text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
                <text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
                <text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D4</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
                <text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
                <text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
                <text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
                <text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F4</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
                <text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H1</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
                <text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H2</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
                <text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H3</text>
            </g>

        
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
                <text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H4</text>
            </g>

    </svg>

Answer 2

I think the issue is to maintain the correct aspect ratio of the view box of the outer, parent SVG regardless of the window aspect ratio.

body {
    background-color: #333;
    font-family: 'Luckiest Guy', cursive;
  }
  
  #hexGrid {
    width: 100%;
    height: 100%;
}

@media (max-width : 600px) {
   #hexGrid {
     width: 100%;
     height: 100%;
   }
}

<svg id="hexGrid" viewBox="0 0 2000 1000">
        <svg  viewBox="0 0 200 200">
            <defs>
                <g id="pod">
                    <polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
                </g>
            </defs>
        </svg>
        <!--ODD COLUMNS-->
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
                <text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A1</text>
            </g>
        </svg>
        
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
                <text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
                <text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">A3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
                <text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
                <text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
                <text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">C3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
                <text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
                <text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g >
                <use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
                <text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">E3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
                <text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
                <text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
                <text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">G3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
                <text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
                <text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
                <text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">I3</text>
            </g>
        </svg>

        <!--EVEN COLUMNS-->
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
                <text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
                <text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
                <text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
                <text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">B4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
                <text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
                <text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
                <text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
                <text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">D4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
                <text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
                <text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
                <text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
                <text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">F4</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
                <text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H1</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
                <text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H2</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
                <text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H3</text>
            </g>
        </svg>
        <svg  viewBox="0 0 200 200">
            <g>
                <use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
                <text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle" 
                font-weight="bold" font-size="8" fill="white">H4</text>
            </g>
        </svg>
    </svg>