How to <use> the <svg> element correctly for loading external sources?

Issue

I've followed many guides to adding external SVGs to a page... like this one : http://wearejh.com/design/inline-svg-use-element/

The code is like this:

<svg>
  <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg"></use>
</svg>

It just does not load, example here: http://jsbin.com/cipacitovo/edit?html,output

What am I doing wrong?

Solution

Per the SVG specification

Unlike ‘image’, the ‘use’ element cannot reference entire files.

You need to add a fragment identifier to the URL to indicate which item within the image you are trying to display.

If the file you're referencing does not have elements with id values then you'll need to edit that file and add ids to the elements you wish to reference.

Answered By - Robert Longson