Обилие устройств с высоким разрешением экранов подталкивает разработчиков к использованию пиктограмм в векторных форматах. Шрифтовые иконки так и не стали универсальным средством из-за проблем с отображением. В докладе Владимир расскажет об использовании SVG для пиктограмм: о том, как собрать файл с контурами, как добавить их на страницу и как избежать типичных проблем.
15. Почему бы не сослаться
на внешний файл?
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href=" external.svg#icon_nav_up "></use>
</svg>
По стандарту в ссылке можно использовать любой
интернационализированный идентификатор ресурса.
01.
02.
03.
16.
17. Мы пробовали:
1. менять значение атрибута xlink:href после загрузки страницы;
2. асинхронно подгружать SVG-файлы;
3. кешировать SVG-файлы в LocalStorage;
4. …
В итоге нашли оптимальную последовательность действий.
19. Шаг 2
Подключаем скрипт в <head>
<script src="svg-icon.js"></script>
20. Шаг 3
Добавляем на страницу пустой <div>
<div id="svg-icon-placeholder"></div>
21. Шаг 4
Вставляем содержимое строки, которое мы подготовили на первом
шаге, в элемент, который мы добавили на третьем шаге.
<script>
document.getElementById('svg-icon-placeholder')
.innerHTML(icon);
</script>
01.
02.
03.
04.
22. Плюсы:
— метод работает во всех браузерах;
— пиктограммы кэшируются на стороне клиента;
— нет лишних запросов на сервер.
Минусы:
— без JS ничего не отобразится.