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

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.

https://jsfiddle.net/dfLb8vzo/1/

           <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>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

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:

https://jsfiddle.net/fmntda2s/

<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.

1 Like

I know nothing about svg at all but from just reading the link you provided it looks like the viewbox and size should be on the symbol element and not the following svgs.

i.e.

<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">
              <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>
        <div class="linesa"></div>
        <div class="linesb"></div>
      </div>
    </div>
  </div>
</div>

That works for me and would seem better than using the g element as mentioned in the link you provided.

3 Likes

It’s not even, look.

https://jsfiddle.net/fzLcpjrb/

How is that fixed?

There’s clickable whitespace underneath every SVG

Meaning, when that area is clicked, nothing happens, no video opens.

The whole area inside the box should be clickable.

Also, how come there are 2 different mouse cursors when you hover over that area?

What’s not written properly in the html if that’s where the issue is?

<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>

I think you just need to add the width and height to the svg.

.container-left .wraph .nav li svg{width:198px;height:198px;}

1 Like

 
 
 
   https://jsfiddle.net/r803nqzu/

1 Like

Who’s way is better?

or should I go back to using the <g> element?

@PaulOB
https://jsfiddle.net/kL961jty/

.container-left .wraph .nav li svg {
  width: 198px;
  height: 198px;
}

@coothead
https://jsfiddle.net/r803nqzu/

 <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>

3rd Option.

Going back to using the the <g> element.
https://jsfiddle.net/fmntda2s/

 <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>

The symbol element means you don’t have to repeat the viewbox or size on every use element. That makes it neater in my mind but then I only read about this a few minutes ago. :slight_smile:
It looks like you could lose the extra svg in the first box also.

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

However @coothead is more proficient with svg than me so I may be wide of the mark or missed a nuance somewhere.

1 Like

Hi there asasass,

you must bear in mind that we have worked
with the code that you provided, which
means that others might have a different way
of doing it. Personally, I would not want to
use a multitude of svg elements to create
a 3x3 box.

The simple answer to your question is to code
in the way that best suits your temperament. :winky:

coothead

1 Like

The way you would do it would be using a picture/image, right?

Wrong, I would use one svg element instead of ten. :biggrin:

1 Like

How, would you please show me?

I didn’t know that could be done.

Is that even possible, using only one <svg/> element instead of ten.

Hi there asasass,

Basic Example:-

https://codepen.io/coothead/full/qBZWEeM

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>One SVG element</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
svg{
    display: block;
    max-width: 44em;
    margin: 1em auto;
}
</style>

</head>
<body>

 <svg  
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 620 620">

  <!-- Frame -->
  <rect x="5" y="5" width="600" height="600"  stroke-width="5" rx="25" stroke="#0059dd" fill="#2a277a"/>

  <!-- Vertical lines -->
  <line x1="205" y1="5" x2="205" y2="605" stroke-width="5" stroke="#0059dd"/>
  <line x1="405" y1="5" x2="405" y2="605" stroke-width="5" stroke="#0059dd"/>

  <!-- Horizontal lines -->
  <line x1="5" y1="205" x2="605" y2="205" stroke-width="5" stroke="#0059dd"/>
  <line x1="5" y1="405" x2="605" y2="405" stroke-width="5" stroke="#0059dd"/>

  <!-- Pattern -->
  <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" fill="#00f"/>
    <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" fill="#00f"/>
  </symbol> 

  <!-- Top row-->
  <use href="#play" x="5" y="5"/>
  <use href="#play" x="205" y="5"/>
  <use href="#play" x="405" y="5"/>

  <!-- middle row-->
  <use href="#play" x="5" y="205"/>
  <use href="#play" x="205" y="205"/>
  <use href="#play" x="405" y="205"/>

  <!-- Bottom row-->
  <use href="#play" x="5" y="405"/>
  <use href="#play" x="205" y="405"/>
  <use href="#play" x="405" y="405"/>
 </svg>

</body>
</html>   

coothead

1 Like

Where would these go then?


<class="alpha" 
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>

<class="beta"
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>

<class="beta"
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>

<class="gamma" 
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>

<class="delta">
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>

<class="epsilon">
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>

<class="zeta>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>

<class="eta">
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>

<class="theta">
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>

<class="iota">
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>

That is not my problem. :unhappy:

You have it working here…
https://jsfiddle.net/fmntda2s/
So why not stop worrying, use it and move on. :winky:

coothead

3 Likes

It’s working all these places too.

Which of those would be best to use?

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>

Hi there asasass,

personally, I would not use any of them. :rofl:

If I was going to make a gallery of videos then…

  1. I would not use SVG at all.
  2. The videos would have to be available and
    working without JavaScript.
  3. The page would have to be responsive.
  4. Only then would I consider using JavaScript
    enhancements.

coothead

2 Likes