6

I am looking for a way to test if a browser can have an external svg reference in the use element:

<svg>
    <use xlink:href="sprite.svg#icon-name"></use>
</svg>

This works in most modern browsers, but does not work in browsers like IE11 or Edge. Instead of testing to see if a browsers "name" is "x", I would rather use "feature detection" to know if I need to run a fallback.

I can't access the use's Shadow DOM to see if an external reference was placed inside of it, and I don't think I can detect if "content" was actually placed in a temporary element referencing an external svg.

For example, I can't set up an element in this way:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS(
    'http://www.w3.org/1999/xlink',
    'xlink:href', 
    'sprite.svg#icon-name'
);

svg.appendChild(use);
document.body.appendChild(svg);

// Somehow test to see if it worked...

document.body.appendChild(svg);

Is there actually a way to feature detect this, or will I have to go with detecting browser "name"?

KevBot
  • 17,900
  • 5
  • 50
  • 68

0 Answers0