On xlink:href being deprecated in SVG

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says:

Deprecated since SVG 2
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though.


<!-- This is old -->
  <use xlink:href="#whatever" />

<!-- This is new -->
  <use href="#whatever" />

I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to:

Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11
🙅‍♂️ 🙅‍♂️

Better than I thought! But enough 🙅‍♂️ no-go’s there that up and switching everything seems far too dangerous, especially when xlink:href has support across the board.

Will browsers actually pull support? I’ll bet ya fifty bucks none of them ever do. There are tons of websites that use the attribute in the old format that will never update, and we know that browsers take breaking old sites very seriously (yay).

It feels like the same thing with, for example, :before and ::before. Yeah, ::before is the new and more correct syntax. But no browser will ever pull support for :before (I’ll bet ya another 50 bucks) because it just needlessly breaks sites. And because of that, it almost makes the most sense to keep using :before as you get the widest swath of support that way.

I probably won’t be updating older articles using <use xlink:href="" /> unless something bizarre happens and some browser actually does pull support.