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

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?

htmlcsssvg


Solution 1:[1]

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.

Solution 2:[2]

Why dont you use svg in img tag.Because you are not generating anything instead you are loading.

Check the example

Solution 3:[3]

You forgot to add xmlns:xlink="http://www.w3.org/1999/xlink" in <svg>.

This is how it should be:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg"></use>
</svg>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert Longson
Solution 2 Francis Stalin
Solution 3 Getkey

Related Questions