I must say that I read a bunch of resources and a bunch of topics, including The problem with the display of svg icons of sprites in HTML , but did not find the answer. The problem is this: with the inline method of loading SVG, and then through

<svg viewBox="0 0 57 57"> <use xlink:href="#facebook" ></use> </svg>

there is a problem in a number of FF versions (in particular, version 52), which is that the icons from the inline sprite are shown only on the main one. The problem is with the base tag, but no one has suggested a normal solution without deleting this tag. Alexandr_TT suggests using object instead of inline

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

but then the connection construction via use works only if it also specifies the path "path / to / sprite.svg # facebook" in xlink: href, but then the object is not needed AT ALL, because the sprite is loaded and so it creates another problem: external svg files in this way loaded do not work in IE (you can, of course, connect SVG4everybody.js, but you want to solve this problem without any shine). Actually the question: how to defeat the old versions of the Mozilla without removing the base tag or how to use xlink shortcuts: href = "# facebook" along with connecting the sprite through the object.

    1 answer 1

    Inline connection:

    style="display:none" better to remove the style that you use to hide elements of the sprite. For this purpose, the standard <symbol> tag is used in the sprite, which hides svg elements before being called by the <use> command anywhere in the HTML document

    Below is an example that works equally well in all browsers, including IE

     <div class="row"> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="600" height="245" viewBox="0 0 1200 490"> <symbol id="icon-arrow-left"> <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M126.01 242.48L6.36 122.83 126.01 3.18"/> </symbol> <symbol id="icon-arrow-right"> <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M3.18 3.18l119.65 119.65L3.18 242.48" /> </symbol> <use x="0" xlink:href="#icon-arrow-left" /> <use x="850" xlink:href="#icon-arrow-right" /> </svg> <div>

    Inline connection is the most reliable way to add SVG to HTML, but if the SVG code is very large, then it is usually added as a separate SVG file using the <object> tag <object> There are other ways to add svg to HTML

    Connect using <object> svg file (sprite) to HTML

    If you want to get a short path to call icons from the sprite, then place the svg file in the same folder with the index file, if the file is located in another folder, you must specify the full path.

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

    Chrome is now using new technologies, in particular, calling icons by ID without first loading the sprite through <object> but this only works in Chrome

    Therefore, for cross-browser compatibility, always use <object> then call the icon from the sprite:

     <svg viewBox="0 0 57 57"> <use xlink:href="img/sprite.svg#facebook" ></use> </svg>

    Firefox reproduces svg most correctly, so if it doesn’t work, then you need to look for an error. Svg IE understands the worst of all. In particular, it incorrectly (in its own way) scales, positions svg. Therefore, double scaling, positioning - in the svg file header and when calling the <svg viewBox="0 0 57 57"> icon can lead to the disappearance of the image.

    • Somewhere in one of our posts you wrote here that when using object we can call icons via use without specifying the path (xlink: href = "# facebook"), but in fact it does not work without a path. Was that information wrong? Right now I'm testing in different browsers (FF52, IE11, etc.) without specifying object, and everywhere except IE (for which I still had to connect svg4everybody.js), it works. Simply the file is downloaded once, and then used for all icons. Therefore, it is still not clear why an object should serve here, if we already have a sprite downloaded without it? - Major666RUS