SVG-спрайты. Не все иконки грузятся

187

01 сентября 2018, 21:20

Использую на сайте svg-спрайты. Иконок достаточно много (около 100), и с отображением 99% иконок нет никаких проблем. Но некоторые не подгружаются, или подгружаются на одной странице, а на другой - нет.
В консоли выводит ошибку 500 (Internal Server Error) (именно на подгрузку спрайта).
Есть предположения с чем это может быть связано?

Приведу пример конструкции svg-спрайта:

<svg  width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol id="icon-apple" viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

Вставляю в html по айдишнику:

<svg class="svg-icons">
   <use xlink:href="images/svgdefs.svg#icon-apple"></use>
</svg>

Код неподгружаемой иконки (сгенерен через icomoon.io):

<symbol id="icon-education" viewBox="0 0 40 40">
    <path d="M6.66 16l13.34 8 20-12-20-12-20 12h20v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path>
</symbol>

Answer 1

Сначала нужно обязательно добавить спрайт в HTML с помощью тега <object>

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

Вот здесь подробно разбиралась тема добавления иконок из спрайта.

Далее вызываете иконки по ID

<svg class="svg-icons"> <use xlink:href="images/svgdefs.svg#icon-apple"></use> </svg>

Update

Данная конструкция файла спрайта - избыточна

<svg  width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol id="icon-apple" viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

Секция <defs> ... </defs> выполняет в svg роль библиотечного хранилища.

В этот раздел обычно помещают готовые фрагменты кода, которые могут быть использованы многократно и пока фрагмент кода не вызван с помощью команды
<use xlink:href=#.. ></use> он не виден и не участвует в ходе выполнения программы.

Теги <symbol> ... </symbol> выполняют ту же роль, что и <defs> - скрывают фрагмент кода до вызова командой <use>

Главное отличие <defs> от <symbol> - в возможности у тега символа использовать дополнительный viewBox, который дает возможность дополнительного масштабирования и позиционирования элементов SVG.

У CHRIS COYIER есть прекрасная статья на эту тему.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить в Title страниц сайта emoji в кодировке HTML Entity (Decimal)?

почему то не получается корректно реализовать возможность добавления в Title страниц сайта emoji в кодировке HTML Entity (Decimal)В коде страницы emoji не сохраняет...

163

HTML