Use SVG with the use tag

Posted on: Tuesday, October 1, 2024

html

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.