SVG stack sprite not reducing number of sent requests

Question

I have about 30 colorful .SVG icons, for simplicity and reducing number of request sent to server, I created an integrated .SVG like this :

<?xml version="1.0" encoding="iso-8859-1"?>
<svg
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.dev/svgjs">
    <defs>
        <style>
            <![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
    ]]>
        </style>
    </defs>
    <svg class="sprite" id="search" viewBox="0 0 24 24">
        <g  transform="matrix(1,0,0,1,0,0)">
            <path d="M 9 2 C 5.1458514 2 2 5.1458514 2 9 C 2 12.854149 5.1458514 16 9 16 C 10.747998 16 12.345009 15.348024 13.574219 14.28125 L 14 14.707031 L 14 16 L 20 22 L 22 20 L 16 14 L 14.707031 14 L 14.28125 13.574219 C 15.348024 12.345009 16 10.747998 16 9 C 16 5.1458514 12.854149 2 9 2 z M 9 4 C 11.773268 4 14 6.2267316 14 9 C 14 11.773268 11.773268 14 9 14 C 6.2267316 14 4 11.773268 4 9 C 4 6.2267316 6.2267316 4 9 4 z" fill="#616161" class="color000 svgShape"></path>
        </g>
    </svg>
    <svg id="history" class="sprite"  viewBox="0 0 48 48">
        <g transform="matrix(1,0,0,1,0,0)">
            <path fill="none" d="M0 0h48v48h-48z"></path>
            <path d="M25.99 6c-9.95 0-17.99 8.06-17.99 18h-6l7.79 7.79.14.29 8.07-8.08h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83c3.25 3.26 7.74 5.28 12.71 5.28 9.95 0 18.01-8.06 18.01-18s-8.06-18-18.01-18zm-1.99 10v10l8.56 5.08 1.44-2.43-7-4.15v-8.5h-3z" opacity=".9" fill="#757575" class="color000 svgShape"></path>
        </g>
    </svg>
    
// more icons here
</svg>

I call my icons in my html pages like this :

<img class="w3-width-30 w3-height-30 w3-padding-all-4 w3-right" src="~/icons/Sprite.svg#comment" />

and in some pages more than 20 icons.

The problem: during loading the page, too many requests sent to server , so I think my sprite is not working . I do not know what's wrong ?

Answer 1

I don't have an idea of loading SVG sprites with tag but there is another way of loading sprites on your page.

Following code-snippet can do your job easily. First you have to add the SVG file location than the id of your icon.

<svg width="50" height="50">
    <use xlink:href="/sprite.svg#history" />
<svg>

You can use this in tag or tag like this

<a href="#">
    <svg width="50" height="50">
        <use xlink:href="/sprite.svg#history" />
    <svg>
</a>

There is also a funda of Same origin policy here.

If you use URLs in the xlink:href they need to be loaded from the same domain. There is cross-origin protection on SVGs loaded this way. Some people just serve it directly from their static assets. You can also use a proxy.