SVG "use" doesn't show

Question

I have and SVG icon I need to use in a several toolbars on a page.

If I add the SVG code to the location in the toolbar, it works. However, since I need to use it many times I'm trying to define it one at the bottom of the page and then with "use" having it displayed in several places.

So I define it:

<svg>
 <defs>
  <g id="svgHelp" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
  <path d="M1 12c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"/>
  <path d="M11.792 14v-1c1.609 0 3-1.391 3-3s-1.391-3-3-3c-1.194 0-2.342.893-2.792 1.921"/>
  <path d="M12 17v1"/>
  </g>
 </defs>
</svg>

And then try to use it:

  <use xlink:href="#svgHelp" x="0" y="0" />

But it does not display. What am I missing here?

Answer 1

I believe <use> must be wrapped by <svg>

<svg>
  <use xlink:href="#svgHelp" x="0" y="0" />
</svg>