A separate HTML file is loaded on the site, in which one large SVG code is declared. Example:

<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-arrow-left" viewBox="0 0 129.19 245.66"><title>icon-arrow-left</title> <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" viewBox="0 0 129.19 245.66"> <title>icon-arrow-right</title> <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M3.18 3.18l119.65 119.65L3.18 242.48" data-name="Layer 1"/> </symbol></svg>

In these places I use the usual call. Example:

 <svg class="logo"> <use xlink:href="#logo"></use> </svg>

In Chrome and IE, everything works, but in Firefox, the icons are displayed solely on the main page of the site, the internal icons are not displayed, I read that the problem is in the base tag. I decided to check if the base tag is removed, then everything works correctly on the internal pages of the site. The base tag contains a link to the main page of the site - always. Is this a feature of Firefox or where is a mistake?

  • Include the line xmlns: xlink = " w3.org/1999/xlink " This line should be ahead of http: // www that are not shown. - Vlad from Moscow
  • That's not the point, checked. - Solunski.D
  • @ Solunski.D If you are satisfied with the answer, please mark it as a solution. - Alexandr_TT

1 answer 1

Firefox loves certainty. Therefore, it is really necessary to complete the header of the SVG file. In addition, it considers all proportions based on the specified Viewport and viewBox values. They are not specified in the file header, but the secondary viewBox of the symbol tag is specified. And it is considered depending on the primary viewBox in the header, which is not. Therefore, if you run your file in its pure form without connecting anywhere, nothing is visible. In your project, some additional conditions are apparently imposed, and as a result a disappearing effect appears, something is not visible. I propose my own version of the file in which at least your brackets will always be visible.

 <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>

The x and y coordinates can adjust the position of the brackets. The numbers in the viewport and viewBox can adjust the scale of the image. more here . How to connect the file to the HTML page here .