0

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 ?

enter image description here

wout
  • 2,477
  • 2
  • 21
  • 32
ehsan_kabiri_33
  • 341
  • 6
  • 13

1 Answers1

0

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.

thelovekesh
  • 1,364
  • 1
  • 8
  • 22
  • Thanks for replying. I removed `` tag and used icons as you said, reloading the page and still sending many requests to server rather than sending just one request ! As you can see in the attached image. – ehsan_kabiri_33 May 21 '21 at 17:38
  • 2
    Oh sorry. I understand that you have trouble loading the SVG from sprite. Actually, you are requesting a particular component from the file. So the first browser will download that file and then serve you your component. If you are using a sprite file then the browser will load the whole file. The best option is that you use the inline SVG code. This will not affect page speed as well as your HTTP requests will be less. – thelovekesh May 22 '21 at 02:12
  • 1
    You can use online tools to sanitize your SVG code and minify the code. – thelovekesh May 22 '21 at 02:13
  • I tried using SVG icons, as a CSS background like this : `background-image: url('../icons/Sprite.svg#tag');` and again on loading a page, one request for one icon and totally many requests !! Maybe the `svg sprite` procedure is not suitable for this purpose and inline should be used, though inline coding is not a clean and good for maintenance coding. – ehsan_kabiri_33 May 22 '21 at 11:07
  • 1
    Absolutely bro! All resources will be loaded because they are in a single file. You should use the inline SVG technique in a way to attain maximum efficiency. – thelovekesh May 22 '21 at 11:16