'How to fix group displaying duplicates of another group despite having different content in SVGs?

So, I'm trying to display SVGs inside of another SVG in order to make a preview. However, I'm encountering a weird bug of groups duplicating the looks of another group while having different code inside them, even across different SVGs. It always seems to duplicate the first SVG of this kind, as when I remove it, the second one shows its actual result.

How it looks

Here's a snippet of the generated code

<svg viewBox="0 0 1929 705" id="example-2">
  <image
    x="0"
    y="0"
    width="1929"
    height="705"
    href="./assets/examples/2.png"
    preserveAspectRatio="none"
  ></image>
  <g id="example-2-btn" transform="translate(1135 102)">
    <svg
      version="1.1"
      width="200"
      height="200"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <g id="Layer0_0_FILL">
          <path
            fill="#F1F1F1"
            stroke="none"
            d=" M 70.65 158.85 Q 70.65 171.05 79.15 179.7 87.9 188.3 100.1 188.3 112.35 188.3 120.9 179.7 129.5 171.05 129.5 158.85 129.5 146.65 120.9 137.95 112.35 129.45 100.1 129.45 87.9 129.45 79.15 137.95 70.65 146.65 70.65 158.85 Z"
          ></path>
        </g>

        <path
          id="Layer0_0_1_STROKES"
          stroke="#F1F1F1"
          stroke-width="9"
          stroke-linejoin="round"
          stroke-linecap="round"
          fill="none"
          d=" M 158.9 129.45 Q 146.65 129.45 138.1 120.85 129.4 112.3 129.4 100.05 129.4 87.85 138.1 79.1 146.65 70.6 158.9 70.6 171.1 70.6 179.75 79.1 188.35 87.85 188.35 100.05 188.35 112.3 179.75 120.85 171.1 129.45 158.9 129.45 Z M 129.5 41.2 Q 129.5 53.5 120.9 62 112.35 70.7 100.1 70.7 87.9 70.7 79.15 62 70.65 53.5 70.65 41.2 70.65 29 79.15 20.4 87.9 11.75 100.1 11.75 112.35 11.75 120.9 20.4 129.5 29 129.5 41.2 Z M 41.25 129.45 Q 29.05 129.45 20.45 120.85 11.8 112.3 11.8 100.05 11.8 87.85 20.45 79.1 29.05 70.6 41.25 70.6 53.45 70.6 62.15 79.1 70.65 87.85 70.65 100.05 70.65 112.3 62.15 120.85 53.45 129.45 41.25 129.45 Z M 129.5 158.85 Q 129.5 171.05 120.9 179.7 112.35 188.3 100.1 188.3 87.9 188.3 79.15 179.7 70.65 171.05 70.65 158.85 70.65 146.65 79.15 137.95 87.9 129.45 100.1 129.45 112.35 129.45 120.9 137.95 129.5 146.65 129.5 158.85 Z"
        ></path>
      </defs>

      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#Layer0_0_FILL"></use>

        <use xlink:href="#Layer0_0_1_STROKES"></use>
      </g>
    </svg>
  </g>
</svg>
<svg viewBox="0 0 1929 705" id="example-3">
  <image
    x="0"
    y="0"
    width="1929"
    height="705"
    href="./assets/examples/3.png"
    preserveAspectRatio="none"
  ></image>
  <g id="example-3-btn-heavy" transform="translate(980 160)">
    <svg
      version="1.1"
      width="200"
      height="200"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <g id="Layer0_0_FILL">
          <path
            fill="#F1F1F1"
            stroke="none"
            d=" M 120.95 20.3 Q 112.2 11.7 100 11.7 87.75 11.7 79.2 20.3 70.6 28.95 70.6 41.15 70.6 53.35 79.2 62.05 87.75 70.55 100 70.55 112.2 70.55 120.95 62.05 129.45 53.35 129.45 41.15 129.45 28.95 120.95 20.3 Z"
          ></path>
        </g>

        <path
          id="Layer0_0_1_STROKES"
          stroke="#F1F1F1"
          stroke-width="9"
          stroke-linejoin="round"
          stroke-linecap="round"
          fill="none"
          d=" M 158.85 70.55 Q 171.05 70.55 179.65 79.15 188.3 87.7 188.3 99.95 188.3 112.15 179.65 120.9 171.05 129.4 158.85 129.4 146.65 129.4 137.95 120.9 129.45 112.15 129.45 99.95 129.45 87.7 137.95 79.15 146.65 70.55 158.85 70.55 Z M 70.6 41.15 Q 70.6 28.95 79.2 20.3 87.75 11.7 100 11.7 112.2 11.7 120.95 20.3 129.45 28.95 129.45 41.15 129.45 53.35 120.95 62.05 112.2 70.55 100 70.55 87.75 70.55 79.2 62.05 70.6 53.35 70.6 41.15 Z M 41.2 70.55 Q 53.45 70.55 62 79.15 70.7 87.7 70.7 99.95 70.7 112.15 62 120.9 53.45 129.4 41.2 129.4 29 129.4 20.35 120.9 11.75 112.15 11.75 99.95 11.75 87.7 20.35 79.15 29 70.55 41.2 70.55 Z M 70.6 158.8 Q 70.6 146.5 79.2 138 87.75 129.3 100 129.3 112.2 129.3 120.95 138 129.45 146.5 129.45 158.8 129.45 171 120.95 179.6 112.2 188.25 100 188.25 87.75 188.25 79.2 179.6 70.6 171 70.6 158.8 Z"
        ></path>
      </defs>

      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#Layer0_0_FILL"></use>

        <use xlink:href="#Layer0_0_1_STROKES"></use>
      </g>
    </svg>
  </g>
</svg>
htmlsvg


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions