SVG not showing up with use xlink, only with img src -

Question

This works:

<img src="img/home/icon.svg" alt="one" class="trysvg">

This doesn't work:

<svg>
    <use xlink:href="img/home/icon.svg" class="trysvg"></use>
</svg>

CSS:

.trysvg {
    //position: relative;
    //display: block;
    //color:black;
    height: 20rem;
    width: 20rem;
}

When checking dev tools and trying it with use svg it shows shadow-root (closed). Tried to search, but couldn't come up with any solution. SVG icon is from reliable source - downloaded, so there shouldn't be a problem with svg code. Any ideas?

edit: I also tried to put class on the < svg class... >, was still not working and also put class on < svg class... > + < use class.. > and still nothing.

edit2: when I use href instead of xlink href the problem remains..

Answer 1

SVG 1.1 does not permit <use> elements to point to an entire file. SVG 2 does permit this but no browser has got round to implementing that part of the SVG 2 specification yet.

If you want to use a <use> element and have it work with today's browsers, you'd need to put an id on the <svg> root element and have a fragment identifier that references that id.