TechQA.

How do I reuse a nested SVG multiple times, using a different viewBox for each?

142 views Asked by At

My designer has given me an SVG that looks like this:

enter image description here

I will be rendering this as a responsive button on a webpage. As the viewport widens, I want this to horizontally expand in a very particular way. This SVG is 250x44, BTW.

My thought is to slice it into pieces and glue them back together, like so:

enter image description here

Then, at least in theory, I should be able to give each piece its own preserveAspectRatio that defines how each piece should expand to fill up the room available to it. e.g., have the 3rd piece take up all the available room.

Unfortunately, I get stuck at the "slice into pieces" part. No matter what I try, I can't seem to get the viewBox of the pieces have the effect I'm looking for.

Here's my SVG file:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

    <!-- #default is in <defs>, defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-1" x="0" width="47" height="44" />
  <symbol id="bg-2" viewBox="48 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-2" x="48" width="36" height="44" />
  <symbol id="bg-3" viewBox="84 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-3" x="84" width="36" height="44" />
  <symbol id="bg-4" viewBox="120 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-4" x="120" width="29" height="44" />
  <symbol id="bg-5" viewBox="149 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-5" x="149" width="9" height="44" />
  <symbol id="bg-6" viewBox="158 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-6" x="158" width="39" height="44" />
  <symbol id="bg-7" viewBox="197 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-7" x="197" width="53" height="44" />

  <defs>
    <!-- This is the file my designer gave to me -->
    <svg id="default">
      <defs>
        <style>
          .cls-1,
          .cls-8 {
            opacity: 0.6;
          }

          .cls-2 {
            fill: #25180c;
          }

          .cls-3 {
            fill: #fcf9eb;
          }

          .cls-4 {
            opacity: 0.02;
          }

          .cls-5 {
            fill: #956131;
          }

          .cls-6 {
            fill: none;
            stroke: #724141;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1px;
            stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
            opacity: 0.3;
          }

          .cls-7 {
            opacity: 0.5;
            fill: url(#linear-gradient);
          }

          .cls-8 {
            fill: url(#linear-gradient-2);
          }
        </style>
        <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#956131" stop-opacity="0" />
          <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
        </linearGradient>
        <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
          gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#956131" stop-opacity="0" />
          <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
        </linearGradient>
      </defs>
      <g id="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
        <g id="ing2_outershadow" class="cls-1">
          <path class="cls-2"
            d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
        </g>
        <path id="ing2_background" class="cls-3"
          d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
        <g id="ing2_pattern" class="cls-4">
          <path class="cls-5"
            d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
          <path class="cls-5"
            d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
          <path class="cls-5"
            d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
          <path class="cls-5"
            d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
          <path class="cls-5" d="M237.5,37.83h0Z" />
          <path class="cls-5"
            d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
          <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
          <path class="cls-5"
            d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
          <path class="cls-5"
            d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
          <path class="cls-5"
            d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
          <path class="cls-5" d="M245.68,15h0l0,0Z" />
          <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
        </g>
        <path id="ing2_innerborder" class="cls-6"
          d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
        <path id="ing2_gradient" class="cls-7"
          d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
        <path id="ing2_innershadow" class="cls-8"
          d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
        <g id="ing2_outerborder">
          <path class="cls-5"
            d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
        </g>
      </g>
    </svg>

  </defs>
</svg>

When I open this file in Firefox, it's rendered like this:

enter image description here

When I play with this tool, I feel like I've got the right idea with the viewBox, but no matter what I try, I can't get it to render the pieces I want, where I want.

I've tried using nested svgs, uses, and symbols (the latter of which is shown in the current iteration of the file), but I never feel like I'm getting closer to the solution. At this point I'm out of ideas and I think there's just something I don't know that's preventing me from pulling this off. But when I compare my example to the looks of that tool, it seems to me that the symbol.viewBox.x value isn't being respected and I don't know why.

To summarize my question, how can I modify this SVG file so that it renders the pieces as shown in the 2nd image? It's okay if each piece has a wonky aspect ratio; I plan to fix that in the next step. For now, I just want to get this parent svg to render these pieces side by side.

css svg viewbox
Original Q&A
3

There are 3 answers

4
enxaneta On

First: instead of using the svg element with styles and gradients I prefer to use only the shape leaving the other outside the symbol.

Please note that the symbol has a viewBox: <symbol id="default" viewBox="0 0 250 44">

When you use the symbol inside the new symbol the use must have a width and a height.

 <symbol id="bg-1" viewBox="0 0 250 44">
        <use href="#default" width="250" height="44" />
      </symbol>
      <use href="#bg-1" x="0" width="50" height="8.8" />

When using bg-1 since you want to use width="50" the height must respect the aspect ratio thus height="8.8"

250/5 = 50;

44/5 = 8.8;

The code above is for the uncutted symbol.

When you need to cut just the first part of the default you changr the viewBox of the bg-2 symbol:

<symbol id="bg-2" viewBox="0 0 50 44">

This will give you the first 50 user units of a total of 250.

For the next 50 user units you will need to use viewBox="50 0 50 44" meaning that the fragment is begining at x = 50 and has a width of 50.

Next you can use viewBox="100 0 50 44" meaning that the fragment is begining at x = 100 and has a width of 50.

and so on...

svg {
  border: solid;
}

.cls-1,
.cls-8 {
  opacity: 0.6;
}

.cls-2 {
  fill: #25180c;
}

.cls-3 {
  fill: #fcf9eb;
}

.cls-4 {
  opacity: 0.02;
}

.cls-5 {
  fill: #956131;
}

.cls-6 {
  fill: none;
  stroke: #724141;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
  opacity: 0.3;
}

.cls-7 {
  opacity: 0.5;
  fill: url(#linear-gradient);
}

.cls-8 {
  fill: url(#linear-gradient-2);
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 55 25">

  <!-- #default is in <defs>, defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 250 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-1" x="0" width="50" height="8.8" />

  <symbol id="bg-2" viewBox="0 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-2" x="0" y="12" width="10" height="8.8" />

  <symbol id="bg-3" viewBox="50 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-3" x="10" y="12" width="10" height="8.8" />

  <symbol id="bg-4" viewBox="100 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-4" x="20" y="12" width="10" height="8.8" />

  <symbol id="bg-5" viewBox="150 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-5" x="30" y="12" width="10" height="8.8" />

  <symbol id="bg-6" viewBox="200 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-6" x="40" y="12" width="10" height="8.8" />

</svg>
<!-- This is the file my designer gave to me -->
<svg>
  <defs>
    <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#956131" stop-opacity="0" />
      <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#956131" stop-opacity="0" />
      <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
    </linearGradient>
  </defs>
  <symbol id="default" viewBox="0 0 250 44">

    <path class="cls-2" d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />

    <path id="ing2_background" class="cls-3" d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
    <g id="ing2_pattern" class="cls-4">
      <path class="cls-5" d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
      <path class="cls-5" d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
      <path class="cls-5" d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
      <path class="cls-5" d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
      <path class="cls-5" d="M237.5,37.83h0Z" />
      <path class="cls-5" d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
      <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
      <path class="cls-5" d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
      <path class="cls-5" d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
      <path class="cls-5" d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
      <path class="cls-5" d="M245.68,15h0l0,0Z" />
      <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
    </g>
    <path id="ing2_innerborder" class="cls-6" d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
    <path id="ing2_gradient" class="cls-7" d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
    <path id="ing2_innershadow" class="cls-8" d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
    <g id="ing2_outerborder">
      <path class="cls-5" d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
    </g>
  </symbol>
</svg>

0
Investor On

I wanted to put this at the end of my question, but the source code was so large it wouldn't fit. That's okay though, because this is an answer, just not one I like.

Through even more hours of trial and error, I found a solution that works

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

  <svg id="bg-1" viewBox="0 0 47 44" x="0" width="47">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(.linear-gradient);
        }

        .cls-8 {
          fill: url(.linear-gradient-2);
        }
      </style>
      <linearGradient class="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient class="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
        gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g class="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g>
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </svg>

  <!-- I'm commenting this out as further proof that it's working the way I want, but I wouldn't comment this out in the real website -->
  <!-- I'm removing the other nested svgs, otherwise my post is too large for SO to accept. -->
    
  <svg id="bg-7" viewBox="197 0 53 44" x="197" width="53">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(.linear-gradient);
        }

        .cls-8 {
          fill: url(.linear-gradient-2);
        }
      </style>
      <linearGradient class="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient class="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
        gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g class="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g>
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </svg>
</svg>

But I hate it because:

  1. I have to heavily modify the SVG my designer gave me. For example, I converted all the ids to classes. (Maybe that was completely unnecessary, but I was throwing darts at the wall while figuring out how to get it to its current state.)
  2. If they want to change the look of the button, I have to make all these modifications over again multiplied by the number of pieces.
  3. I don't understand why it works whereas my first example didn't.
  4. Compared to my non-working version, the file is massive.

Is there some way to only use the designer's SVG once in my code with minimal modification?

0
Investor On

After even more hours of trial and error, I've found a solution that doesn't require copying and pasting my designer's SVG code for each piece. I don't really understand why the current code works whereas all my other attempts failed, but that's a question for another post (that I plan to link to after I create it).

Here is the working code:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

  <!-- #Ingame_Secondary_Button is defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 47 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-1" x="0" width="47" />

  <symbol id="bg-2" viewBox="48 0 36 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-2" x="47" width="37" />

  <!-- I'm commenting this out as evidence that these are pieces of the SVG (as opposed to the whole SVG overlapping itself x times) -->
  <!-- 
  <symbol id="bg-3" viewBox="84 0 36 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-3" x="84" width="36" />
  -->

  <symbol id="bg-4" viewBox="120 0 29 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-4" x="120" width="29" />

  <symbol id="bg-5" viewBox="149 0 9 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-5" x="149" width="9" />

  <symbol id="bg-6" viewBox="158 0 39 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-6" x="158" width="39" />

  <symbol id="bg-7" viewBox="197 0 53 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-7" x="197" width="53" />


  <!-- This is the file my designer gave to me -->

  <symbol id="default">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(#linear-gradient);
        }

        .cls-8 {
          fill: url(#linear-gradient-2);
        }
      </style>
      <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g id="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g id="ing2_outershadow" class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path id="ing2_background" class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g id="ing2_pattern" class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path id="ing2_innerborder" class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path id="ing2_gradient" class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path id="ing2_innershadow" class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g id="ing2_outerborder">
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </symbol>

</svg>

The major change is my symbol.use.href now refers to a <g id="Ingame_Secondary_Button" ...> inside the #default symbol. No matter what I tried, I couldn't find a solution unless I bypassed #default. Fortunately, there's no visual difference between #default and #Ingame_Secondary_Button.

I've read that useing a symbol creates a new viewBox. I think that's related to why I couldn't get it to work with <use href="#default"/>, but this additional viewBox wasn't news to me; I was attempting to account for it the whole time.

There is one more major change: I removed the coordinates from <use href="#Ingame_Secondary_Button"/>.

Here is my previous answer, and I think it's worth keeping around, even though it's not ideal, because it shows another way to solve the problem.

Related Questions in CSS

Related Questions in SVG

Related Questions in VIEWBOX

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions