Why is SVG not rendering the object referenced by the <use> tag?

Question

I've been trying to learn how to create graphics with SVG recently, and I am coming up against a problem when trying to display an image with the 'use' tag.

I've successfully played around with the 'use' tag to create duplicate objects in other svgs, so I'm not sure what's going on here. My attempt to display this symbol with 'use' tag results in an invisible object with 0x0 as width x height

<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    <g id="yinyang">
    <circle r="39"/>
    <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
    <circle cy="19" r="5" fill="#fff"/>
    <circle cy="-19" r="5"/>
    <g/>
    <use href="#yinyang" transform="scale(20)"/>
</svg>

How could i fix this?

Answer 1

Could be just a typo with your closing group tag <g/>

 <svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80"> <defs> <g id="yinyang"> <circle r="39"/> <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/> <circle cy="19" r="5" fill="#fff"/> <circle cy="-19" r="5"/> </g> </defs> <use href="#yinyang" transform="scale(0.9)"/> </svg> 

Also, the use block will repeat the shape that is already visible. If you just want to define it somewhere, and re-use it elsewhere, you can put inside of a <defs> block