Проблемы с подключением спрайта у Firefox, как и у других браузеров могут возникать по многим причинам, но об этом позже.
Подключение спрайта в html через тег <object>
:
<object type="image/svg+xml" data="http://svgshare.com/i/2X7.svg#usd-usage" width="200" height="200"> </object>
В сниппете не работает, но если сохранить этот код в отдельный файл html, то работает в Firefox и Chrome.
Подключение спрайта в html через тег <img>
:
<body>
<img src="http://svgshare.com/i/2X7.svg#usd-usage" width="200" height="200" alt="image description">
</body>
Подключение спрайта в html с помощью 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>
Обратите внимание, что для всех способов подключения svg, как отдельного файла в html указаны, тем или иным способом ширина и высота. К этому чувствителен прежде всего Firefox. Более подробно о других способах подключения svg файлов здесь
- Другим источником проблем с видимостью спрайта, очень часто бывает
сам спрайт
<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>
Из-за стилей: .sprite-symbol-usage {display: none;}
картинка будет не видна.
Какая-то пара тегов <defs>.. </defs>
либо <symbol>.. </symbol>
явно лишняя, так как выполняют одну и ту же фунцкцию - спрятать изображение до вызова командой use
Так как вы не можете редактировать файл на чужом ресурсе, то лучше скачать его и привести в порядок:
<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>
- Если вы будете многократно использовать спрайт, а он именно для этого
предназначен, наверняка возникнут вопросы по стилизации
Для решения можно посмотреть тут, тут и тут