4

Есть спрайт

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

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

1 ответ 1

6

Можно ещё раз внимательно прочитать первую половину ответа насчет экспериментальных технологий 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 в этом вызове допускают не указывать имя файла, в котором хранится иконка, но для более полной поддержки всеми браузерами лучше указывать имя файла

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.