SVG from an external sprite file

Question

What am I missing here...

I'm trying to display an svg logo from an external sprite file.

As far as I'm aware the coding is correct, the url path is certainly correct as the logos show when using and the .svg file seems fine as again it shows when using <img>.

What am I missing?

Here's my html code

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- IMPORTANT META TAGS -->
    <title>Test Site</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="test site" />
    <meta name="keywords" content="Test Site" />
    <meta name="robots" content="all" />

</head>
<body>
    <div>svg</div>
    <svg class="icon" viewBox="0 0 32 32">
        <use href="test.svg#menu"></use>
    </svg>

<br />
<br />
<br />
<div>img</div>
    <img src="test.svg" alt="Kiwi standing on oval">
</body>
</html>

score 0 · Answer 1 · answered Feb 12 '20 at 08:51

0

You're referencing the external file incorrectly. You need to use xlink:href, not href:

<svg viewBox="0 0 100 100">
   <use xlink:href="test.svg#menu"></use>
</svg>

answered Feb 12 '20 at 08:51

Andy Hoffman

18,436
4
42
61

Hi, thanks for the reply but that doesn't work either. I originally had "xlink:href" but I read somewhere that "href" works so I thought I would try that, just forgot to change it back. – Juan-man Feb 12 '20 at 09:45
href is pretty much ok – user8620575 Jun 13 '22 at 15:06

SVG from an external sprite file

1 Answers1