Why the <use> element in SVG doesn't work?

Issue

I have the following simple example. It is stored in image.svg:

<svg>
  <defs>
    <g id="shape">
      <circle cx="100" cy="100" r="100" />
    </g>
  </defs>
</svg>

However, putting this code in a HTML file doesn't load anything. Why is that?

<svg>
  <use xlink:href="#shape" x="10" y="10" />
</svg>

What am I doing wrong? I can't seem to make it work.

Solution

You need to have the use-tag inside the SVG with the shape you want to use:

<svg>
    <defs>
        <g id="shape">
            <circle cx="100" cy="100" r="100" />
        </g>
    </defs>

    <use xlink:href="#shape" x="10" y="10" />
</svg>

Answered By - razemauze