On xlink:href being deprecated in SVG

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 67Firefox 61Safari 11Edge 17IE 11iOS 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.

The post On xlink:href being deprecated in SVG appeared first on CSS-Tricks.

Source: CSS-tricks.com

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x