I use svg sprites on the site. There are a lot of icons (about 100), and there are no problems with displaying 99% of the icons. But some are not loaded, or are loaded on one page, but not on the other.
The console displays an error 500 (Internal Server Error) (just to load the sprite).
Any suggestions what this may be related to?

I will give an example of the construction of the svg sprite:

 <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-apple" viewBox="0 0 56 64"> ... </symbol> </defs> </svg>

I put in html by ID:

 <svg class="svg-icons"> <use xlink:href="images/svgdefs.svg#icon-apple"></use> </svg>

Non-loadable icon code (generated via icomoon.io):

 <symbol id="icon-education" viewBox="0 0 40 40"> <path d="M6.66 16l13.34 8 20-12-20-12-20 12h20v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path> </symbol>
  • 2
    your sprite design is correct and standard. Therefore, it is better to provide here the full code of the svg icon, which is not loaded. The second question for you - Firefox tested the performance? So how exactly does this browser most correctly work with the SVG specification. If at all it does not work in FF then the reflection of icons in Chrome is the result of new technologies that only confuse developers and do not provide cross-browser compatibility. Third, add the sprite svg file first, and then call icons from it using the command <use> - Alexandr_TT
  • one
    checked FF - the same story. Only three icons are not loaded - the standard arrows for the carousel and another custom one, I’ll add its code to the question. Interestingly, the same arrows in the carousel are completely seamlessly loaded on another page. owl-carousel-2 , add them via navText. - Igor

1 answer 1

  • First you need to add a sprite to HTML using the <object>

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

Here , the topic of adding icons from the sprite was sorted out in detail.

  • Next, call the icons by ID

    <svg class="svg-icons"> <use xlink:href="images/svgdefs.svg#icon-apple"></use> </svg>

Update

This design of the sprite file is redundant.

 <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-apple" viewBox="0 0 56 64"> ... </symbol> </defs> </svg>

The <defs> ... </defs> performs the role of library storage in svg.

This section is usually placed ready-made snippets of code that can be used many times and until the code snippet is called using the command
<use xlink:href=#.. ></use> it is not visible and does not participate in the program execution.

The <symbol> ... </symbol> tags perform the same role as the <defs> - hide the code snippet until called by the <use> command

The main difference between <defs> and <symbol> is in the ability of the symbol tag to use an additional viewBox , which allows for additional scaling and positioning of SVG elements.

CHRIS COYIER has an excellent article on this topic .

  • one
    The issue is resolved, the <object> really helped. - Igor
  • once you looked here, a more skillful person on svg I find. There is another problem with sprites - the galp in the process of building a project bypasses the file side, you have to cut it immediately in the build, which is not very convenient. Have you encountered such a problem? - Igor
  • @ Igor thanks for rating. But unfortunately I do not use the gulp. Only in plans to study thoroughly and make a review article on your website to help people. - Alexandr_TT
  • understand you, thanks for the help! :) - Igor