The icon from the sprite is not called. Original svg icon which is generated by the Avacode program.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/></defs><g><g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="#qq8ea"/><use fill="#fff" fill-opacity="0" stroke="#a86ac7" stroke-miterlimit="50" xlink:href="#qq8ea"/></g></g></svg>

And here I have created a sprite, which so far contains the very one icon

 <svg xmlns="http://www.w3.org/2000/svg" > <defs> <symbol id="plus" viewBox="0 0 24 24"> <path d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/> </symbol> </defs> </svg>

And so I try to call the icon with this sprite

 <svg> <g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="#plus"></use></g> </svg>

But for some reason the icon is not called what is the problem?

    1 answer 1

    Theory

    If the sprite that contains the icon is a separate file, you must first add this file to HTML

     <object type="image/svg+xml" data="images/svgdefs.svg"> Your browser does not support SVG </object>

    And only then call the icon by ID from this sprite:

     <svg> <g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="svgdefs.svg#plus"></use></g> </svg>

    Note

    Experimental technologies of Chrome in this call allow you not to specify the name of the file in which the icon is stored, but for more complete support by all browsers it is better to specify the name of the file

    Practice

    The tags <symbol id="plus"> c ID are used for two indications:

    • The svg code inside these tags is hidden before being called by the <use> command, and in the same file you can put several icons with different ID
    • Each <symbol id="icon2" viewBox="0 0 24 24"> can be assigned its own viewBox , which allows you to scale each icon separately.

    Below is the code of your icon. Carefully removed too much.

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/> <g transform="translate(-452 -1183)"> <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/> </g> </svg>

    Surround the code <symbol id="plus">

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <symbol id="plus" > <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/> </defs> <g transform="translate(-452 -1183)"> <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/> </g> </symbol> </svg>

    As expected, everything is hidden before the call using <use>

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <symbol id="plus"> <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/> <g transform="translate(-452 -1183)"> <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/> </g> </symbol> </svg> <svg> <use xlink:href="#plus" /> </svg>

    Now you can call this icon as many times as you like.

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <symbol id="plus"> <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/> <g transform="translate(-452 -1183)"> <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/> </g> </symbol> </defs> </svg> <svg> <use xlink:href="#plus" /> <use xlink:href="#plus" transform="scale(2)" x="15" /> <use xlink:href="#plus" transform="scale(3)" x="30" /> </svg>

    • I have not yet separated the sprite into a separate file, because it doesn’t work in one html file with a call - LiEm
    • @LiEm If you work on a local network in Chrome , then the icons on the local computer in this browser are not called from the file - a known bug In any case, it is better to always specify the file name, so as not to suffer in search of bugs later - Alexandr_TT
    • It's not a LAN case, but somewhere in svg, the error is buried, I called simple shapes in the form of a circle and everything is fine - LiEm
    • @LiEm will now update in your example with your icon - Alexandr_TT
    • one
      @LiEm Yes, not at all. Practical advice when you draw your icons try to make sure that there is no transform translate inside the code. That is, you need to choose the size of the document when drawing a little bit more than the size of the icon and strictly draw inside it, do not move the icon, do not scale when drawing. And at the stage of mastering svg it’s better to take professional icons - Alexandr_TT