Cnavas in firefox does not draw SVG if it is a sprite, i.e. SVG is not requested so / /icons-sprite.svg , and so / /icons-sprite.svg#usd-usage #usd-usage (that is, we say that we need a specific # usd-usage fragment)

 let img = new Image(); img.onload = () => { cx.drawImage(img, 7, h-5, 20, 20); }; img.src = '/icons-sprite.svg#usd-usage';

if I try to draw another svg file, not a sprite, then everything is fine.

I thought that the problem could be in xlink:href replaced with just href did not help

https://jsfiddle.net/ko9rL91z/2/ - an example

https://pastebin.com/6LK58Xw5 - SVG example

Any idea what the problem is? everything is just fine in chrome.

    1 answer 1

    Problems with the connection of the sprite in Firefox, like other browsers may arise for many reasons, but more on that later.

    Connecting the sprite in html via the <object> :

      <object type="image/svg+xml" data="http://svgshare.com/i/2X7.svg#usd-usage" width="200" height="200"> </object>

    The snippet does not work, but if you save this code in a separate html file, it works in Firefox and Chrome.

    Connecting the sprite in html through the <img> :

     <body> <img src="http://svgshare.com/i/2X7.svg#usd-usage" width="200" height="200" alt="image description"> </body>

    Connecting the sprite in html using background-image :

     <body> <style> .container { width:200px; height:200px; background-image: url("http://svgshare.com/i/2X7.svg#usd-usage"); } </style> <div class="container"> </div> </body>

    Please note that for all methods of connecting svg, as a separate file in html , the width and height are indicated in one way or another. Firefox is primarily sensitive to this. More details about other ways to connect svg files here.

    • Another source of sprite visibility problems is that sprite itself is often

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style> .sprite-symbol-usage {display: none;} .sprite-symbol-usage:target {display: inline;} </style> <symbol viewBox="0 0 500 500" id="usd"> <path d="m 145,312 c -2,69 31,100 104,102 78,1 113,-34 109,-101 -6,-58 -62,-73 -106,-79 -48,-17 -99,-25 -99,-95 0,-48 32,-79 99,-78 60,0 97,25 96,84" style="fill:none;stroke:#000000;stroke-width:40" /> <path d="m 250,15 0,470" style="stroke:#000000;stroke-width:30" /> </symbol> </defs> <use id="usd-usage" xlink:href="#usd" class="sprite-symbol-usage" /></svg>

    Because of the styles: .sprite-symbol-usage {display: none;} picture will not be visible. Some pair of <defs>.. </defs> or <symbol>.. </symbol> clearly superfluous, since they perform the same function - hide the image before calling with the use command
    Since you cannot edit the file on another resource, it is better to download it and put it in order:

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" > <symbol viewBox="0 0 500 500" id="usd"> <path d="m 145,312 c -2,69 31,100 104,102 78,1 113,-34 109,-101 -6,-58 -62,-73 -106,-79 -48,-17 -99,-25 -99,-95 0,-48 32,-79 99,-78 60,0 97,25 96,84" style="fill:none;stroke:#000000;stroke-width:40" /> <path d="m 250,15 0,470" style="stroke:#000000;stroke-width:30" /> </symbol> <use id="usd-usage" xlink:href="#usd" class="sprite-symbol-usage" /> </svg>

    • If you will reuse the sprite, and it is designed specifically for this, there will certainly be questions about styling
      For a solution, you can look here , here and here.
    • but this does not solve the problem of the fact that I can not draw svg on canvas - Clara Oswald
    • @ClaraOswald answered your two main questions: 1. why the sprite may not be displayed, 2. why in Firefox there may be problems with the display of svg This is your business, how to relate to someone else's time spent. - Alexandr_TT