Which of these SVG groupings would be best to use?

Each of these are set up differently,

Which would be the best one to use and why?

1) Uses <g> element
https://jsfiddle.net/9qwh7pf2/

<ul class="nav">
          <li>
            <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <g id="play">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </g>
            </svg>
            <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playinga" data-id="ZPz3wzPlruA"></div>
            </div>
          </li>
          <li>
            <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingb" data-id="VFMtNOxpV3o"></div>
            </div>
          </li>
          <li>
            <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
            </div>
          </li>
          <li>
            <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingd" data-id="-Xgi_way56U"></div>
            </div>
          </li>
          <li>
            <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playinge" data-id="EK3h0IADYrQ"></div>
            </div>
          </li>
          <li>
            <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingf" data-id="YOw9J4K02H4"></div>
            </div>
          </li>
          <li>
            <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingg" data-id="ID856YDIb6A"></div>
            </div>
          </li>
          <li>
            <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
            </div>
          </li>
          <li>
            <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingi" data-id="qYEooPeyz5M"></div>
            </div>
          </li>
        </ul>

2) Uses <symbol>
Added CSS code
https://jsfiddle.net/un96dxL8/

.container-left .wraph .nav li svg {
  width: 198px;
  height: 198px;
}
<ul class="nav">
               <li>
                  <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                  </svg>
                  <svg class="alpha" >
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>
               <li>
                  <svg class="gamma">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                  </div>
               </li>
               <li>
                  <svg class="delta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingd" data-id="-Xgi_way56U"></div>
                  </div>
               </li>
               <li>
                  <svg class="epsilon">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                  </div>
               </li>
               <li>
                  <svg class="zeta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingf" data-id="YOw9J4K02H4"></div>
                  </div>
               </li>
               <li>
                  <svg class="eta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingg" data-id="ID856YDIb6A"></div>
                  </div>
               </li>
               <li>
                  <svg class="theta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
                  </div>
               </li>
               <li>
                  <svg class="iota">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingi" data-id="qYEooPeyz5M"></div>
                  </div>
               </li>
            </ul>

3) Uses <symbol> No extra CSS code.
https://jsfiddle.net/uLv3cj60/

 <ul class="nav">
          <li>
            <svg >
              <symbol id="play">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </symbol>
            </svg>
            <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playinga" data-id="ZPz3wzPlruA"></div>
            </div>
          </li>
          <li>
            <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingb" data-id="VFMtNOxpV3o"></div>
            </div>
          </li>
          <li>
            <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
            </div>
          </li>
          <li>
            <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingd" data-id="-Xgi_way56U"></div>
            </div>
          </li>
          <li>
            <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playinge" data-id="EK3h0IADYrQ"></div>
            </div>
          </li>
          <li>
            <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingf" data-id="YOw9J4K02H4"></div>
            </div>
          </li>
          <li>
            <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingg" data-id="ID856YDIb6A"></div>
            </div>
          </li>
          <li>
            <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
            </div>
          </li>
          <li>
            <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play"  width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
            </svg>
            <div class="hide">
              <div class="video playingi" data-id="qYEooPeyz5M"></div>
            </div>
          </li>
        </ul>

4) Uses <symbol> One less <svg>
Added CSS
https://jsfiddle.net/def42tbx/

.container-left .wraph .nav li svg {
  width: 198px;
  height: 198px;
}
<ul class="nav">
               <li>
                  <svg class="alpha">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg  class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>
               <li>
                  <svg  class="gamma">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                  </div>
               </li>
               <li>
                  <svg  class="delta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingd" data-id="-Xgi_way56U"></div>
                  </div>
               </li>
               <li>
                  <svg class="epsilon">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                  </div>
               </li>
               <li>
                  <svg class="zeta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingf" data-id="YOw9J4K02H4"></div>
                  </div>
               </li>
               <li>
                  <svg class="eta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingg" data-id="ID856YDIb6A"></div>
                  </div>
               </li>
               <li>
                  <svg class="theta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
                  </div>
               </li>
               <li>
                  <svg class="iota">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingi" data-id="qYEooPeyz5M"></div>
                  </div>
               </li>
            </ul>

It’s exactly the same graphic, so use symbol.

Use CSS because it’s easier to modify and more performant. Give each thing you want to style a common class name (never do this: container-left .wraph .nav li svg {, do this .play-icon {).

There’s no point using g in this case: the reason to use it is to group common elements that you want to apply common styling to, or to apply a transform to a number of elements at once, or to place a set of elements on a specific layer (elements stack based on literal position in the SVG code, so if you have say a rect then a circle, the circle will be above the rect).

Note also that if the SVG is square anyway (rather than just applying a height/width), you can get rid of the height/width and just leave the viewBox attribute, then lay the elements out using CSS grid and they’ll be responsive. Currently that’s not the case, and the viewBox attribute has slightly weird coordinates

Would you say code 2) that uses one less <svg> would be the one to go with here, between these two?

1) Uses <symbol>
Added CSS code
https://jsfiddle.net/cxfa85jk/

.nav svg {
  width: 198px;
  height: 198px;
}
<ul class="nav">
               <li>
                  <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                  </svg>
                  <svg class="alpha" >
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>

2) Uses <symbol>
One less <svg>
Added CSS
https://jsfiddle.net/kd06jvmf/

.nav svg {
  width: 198px;
  height: 198px;
}

<ul class="nav">
               <li>
                  <svg class="alpha">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg  class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>

Always the first one, means it’s reusable. Second one isn’t really how it’s supposed to be used if you’re defining a symbol that will be used throughout the overall document