SVG спрайт не работает в firefox и IE

123

26 августа 2019, 17:50

Есть спрайт

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<symbol id="facebook" viewBox="0 0 22 22">
    <path id="d7ela" d="M362.605 1191.601h-1.653c-.196 0-.414.258-.414.6v1.194h2.068l-.312 1.703h-1.756v5.112h-1.951v-5.112h-1.77v-1.703h1.77v-1.001c0-1.437.997-2.604 2.365-2.604h1.653zM360 1184c-6.076 0-11 4.924-11 11 0 6.075 4.924 11 11 11 6.075 0 11-4.925 11-11 0-6.076-4.925-11-11-11z"/>
    <g transform="translate(-349 -1184)">
        <use xlink:href="#d7ela"/>
    </g> 
</symbol>
<symbol id="twitter" viewBox="0 0 22 22">
    <path id="n0o7a" d="M399.474 1193.01c.005.094.006.188.006.28 0 2.865-2.178 6.166-6.164 6.166a6.113 6.113 0 0 1-3.32-.974c.168.02.341.028.517.028a4.34 4.34 0 0 0 2.69-.927 2.17 2.17 0 0 1-2.024-1.503 2.177 2.177 0 0 0 .977-.038 2.168 2.168 0 0 1-1.737-2.124v-.026c.292.161.626.26.982.271a2.166 2.166 0 0 1-.67-2.894 6.16 6.16 0 0 0 4.465 2.265 2.167 2.167 0 0 1 3.692-1.977 4.351 4.351 0 0 0 1.374-.525c-.161.505-.504.93-.952 1.2.44-.055.856-.17 1.245-.343-.29.434-.658.817-1.08 1.121zM395 1184c-6.076 0-11 4.924-11 11 0 6.075 4.924 11 11 11 6.075 0 11-4.925 11-11 0-6.076-4.925-11-11-11z"/>
    <g transform="translate(-384 -1184)">
        <use xlink:href="#n0o7a"/>
    </g> 
</symbol>
</svg>

Который вот так вызывается

<svg><use xlink:href="#facebook"></svg>
<svg><use xlink:href="#twitter"></svg>

В хроме работает отлично как надо

Answer 1

Можно ещё раз внимательно прочитать первую половину ответа насчет экспериментальных технологий Chrome, который не требует указания имени файла при вызове спрайта. А остальные браузеры требуют указания имени файла.

#1. Вот смотрите, добавляю инлайн в HTML файл-спрайт с иконками:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;"> 
 
<symbol id="facebook" viewBox="0 0 22 22"> 
    <path id="d7ela" d="M362.605 1191.601h-1.653c-.196 0-.414.258-.414.6v1.194h2.068l-.312 1.703h-1.756v5.112h-1.951v-5.112h-1.77v-1.703h1.77v-1.001c0-1.437.997-2.604 2.365-2.604h1.653zM360 1184c-6.076 0-11 4.924-11 11 0 6.075 4.924 11 11 11 6.075 0 11-4.925 11-11 0-6.076-4.925-11-11-11z"/> 
    <g transform="translate(-349 -1184)"> 
        <use xlink:href="#d7ela"/> 
    </g>  
</symbol> 
 
<symbol id="twitter" viewBox="0 0 22 22"> 
    <path id="n0o7a" d="M399.474 1193.01c.005.094.006.188.006.28 0 2.865-2.178 6.166-6.164 6.166a6.113 6.113 0 0 1-3.32-.974c.168.02.341.028.517.028a4.34 4.34 0 0 0 2.69-.927 2.17 2.17 0 0 1-2.024-1.503 2.177 2.177 0 0 0 .977-.038 2.168 2.168 0 0 1-1.737-2.124v-.026c.292.161.626.26.982.271a2.166 2.166 0 0 1-.67-2.894 6.16 6.16 0 0 0 4.465 2.265 2.167 2.167 0 0 1 3.692-1.977 4.351 4.351 0 0 0 1.374-.525c-.161.505-.504.93-.952 1.2.44-.055.856-.17 1.245-.343-.29.434-.658.817-1.08 1.121zM395 1184c-6.076 0-11 4.924-11 11 0 6.075 4.924 11 11 11 6.075 0 11-4.925 11-11 0-6.076-4.925-11-11-11z"/> 
    <g transform="translate(-384 -1184)"> 
        <use xlink:href="#n0o7a"/> 
    </g>  
</symbol> 
</svg> 
 
<svg><use xlink:href="#facebook"></svg> 
<svg><use xlink:href="#twitter"></svg>

Работает во всех браузерах.

#2. Для случая, когда спрайт оформлен в виде отдельного файла

Если спрайт, в котором находится иконка является отдельным файлом, то необходимо сначала добавить этот файл в HTML

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

И только потом вызывать иконку по ID из этого спрайта:

<svg><use xlink:href="svgdefs.svg#facebook"></svg>
 <svg>  <use xlink:href="svgdefs.svg#twitter"></svg>

Note

Экспериментальные технологии Chrome в этом вызове допускают не указывать имя файла, в котором хранится иконка, но для более полной поддержки всеми браузерами лучше указывать имя файла