bootd
@bootd
Гугли и ты откроешь врата знаний!

Как лучше всего подключать svg иконки на сайт для последующего использования через use?

Добрый день! Имеется у меня пак с svg иконками. Как лучше всего иконки подключать на страницу?

Постоянно обращаясь к файлу icons.svg
<svg width="32" height="32">
	<use xlink:href="img/ico/icons.svg#icon1" overflow="visible" />
</svg>


или вставить весь код с иконками на страницу и вставлять иконку так же, но в пути уже будет только id
<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 32" enable-background="new 0 0 128 32" xml:space="preserve">
<symbol id="icon1"></symbol>
<symbol id="icon2"></symbol>
<symbol id="icon3"></symbol>
<symbol id="icon4"></symbol>
<symbol id="icon5"></symbol>
</svg>

<svg width="32" height="32">
	<use xlink:href="#icon1" overflow="visible" />
</svg>

</body>
</html>


Надеюсь понятно объяснил))
  • Вопрос задан
  • 14192 просмотра
Решения вопроса 1
@AlBandito
Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет.
На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались.
Сейчас опишу, как я делаю.
1) Создаем JS файл с inline SVG. К примеру, такой
// Тут хранятся иконки в SVG
var icon = '
<svg style="display:none;">\
  <defs>\
    <symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
  </defs>\
</svg>';    
// Вставляем иконки в HTML        
document.getElementById('svg-icon-placeholder').innerHTML = icon;

2) Создаем в HTML пустой div с id svg-icon-placeholder. В него мы и будем вставлять SVG
3) Юзаем через use :)
Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
вот полезная статья на эту тему
Ответ написан
Комментировать
isquariel
@isquariel
Научу HTML, CSS, JS, BEM и Git
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы