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>