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

Как лучше всего подключать 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>


Надеюсь понятно объяснил))
  • Вопрос задан
  • 15123 просмотра
Комментировать
Подписаться 6 Оценить Комментировать
Решения вопроса 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 таким способом. Если знаете, то подскажите как)
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ответы на вопрос 2
@imerofeev
вот полезная статья на эту тему
Ответ написан
Комментировать
Комментировать
isqua
@isqua
Научу HTML, CSS, JS, BEM и Git
https://github.com/jonathantneal/svg4everybody
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработчика на opencart
21 нояб. 2024, в 17:30
1500 руб./за проект
Бот парсер
21 нояб. 2024, в 17:22
7000 руб./за проект
Шифрование данных, межсетевые экраны,обнаружение предотвращение вторже
21 нояб. 2024, в 17:13
1500 руб./в час
Ещё заказы