Use SVG with the use tag
As always, I’d like to peep into the HTML markup whenever I’m visiting websites. I was just checking the W3C website and I noticed that it’s using use
tag to reference a svg markup on a separate file and link to that specific SVG with the #icon-translations
hash. Before today, I had the impression that we can only use the use
tag to reference the SVG markups when they are located in the same document.
<a href="/WAI/translations/">
All Translations
<svg focusable="false" aria-hidden="true" class="icon-translations ">
<use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use>
</svg>
</a>
We can visit https://www.w3.org/WAI/assets/images/icons.svg and check all the SVGs tags.