Should I be using <symbol> here instead of <g>?

HTML-CSS
1

Does anyone have an answer to this?

Should I be using <symbol> here instead of <g> ?

Also, I couldn’t get the code to work using symbol, maybe I’m doing something wrong.

My attempt:

All the SVG’s are cut off for some reason.

           <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <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>

The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics.

Code:

<div class="outer">
  <div class="tcell">
    <div class="container-left">
      <div class=" wraph">
        <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>
        <div class="linesa"></div>
        <div class="linesb"></div>
      </div>
    </div>
  </div>
</div>

Grouping elements with the <symbol> element

https://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

The <symbol> element is similar to the group element <g> —it provides a way to group elements together. However, it differs from the group element in two main things:

  • The <symbol> element is not rendered. It is actually similar to <defs> in this manner. It is only displayed when it is use d.
  • A <symbol> element can have its own viewBox and preserveAspectRatio attributes. This allows it to fit into the viewport it is rendered into any way you want it to, instead of fitting in the default way.

<symbol> is then mostly suitable for defining reusable elements (or symbols ). It also serves as a template that is instantiated using the <use> element. And having viewBox and preserveAspectRatio attributes, it can scale-to-fit within a rectangular viewport defined by the referencing <use> element. Note that symbol elements define new viewports whenever they are instanced by a use element.

2

Not unless ure goal is to resuse elements
which in that case u need to use the element in combination with the viewbox and preserAspectRatio i can’t seem to find that one any where in ure code?