почти в каждом внешнем проекте вам нужно использовать иконки. Есть несколько способов. Наиболее распространенный способ — использование значка шрифта или значка SVG.
Во многих случаях значки SVG почти лучше, чем значки шрифтов. Но главная проблема SVG-иконок — это размер. Иконки в формате SVG имеют свой путь и теги для отображения. например, простой значок звезды выглядит так:
Только представьте, что у вас на странице сотни иконок! Ваша HTML-страница будет очень большой и, конечно же, снизит производительность вашего сайта.
И для встроенных значков SVG нет механизма кэширования, потому что они находятся непосредственно в вашем HTML.
Мы можем использовать внешние файлы значков SVG вместо встроенного SVG, чтобы избежать увеличения размера HTML и использовать механизм кэширования. Но внешние файлы значков SVG для рендеринга должны открывать HTTP-запрос для каждого запроса, что снижает производительность веб-сайта. а также сложнее поддерживать и настраивать внешние значки SVG.
Как использовать значки SVG без увеличения размера HTML?
1. Удалите дубликаты SVG с помощью символа
В вашем доме у нас могут быть две кнопки с одинаковыми звездочками. Наверное, это то, что мы обычно делаем:
Это приведет к большому и трудно читаемому файлу HTML.
Существует функция SVG Symbol, помогающая предотвратить дублирование SVG. Элемент ‹symbol› — это графический шаблон, который может быть создан с помощью элемента ‹use›.
С помощью элемента ‹symbol› мы определяем SVG один раз и используем его с элементом ‹use› в любом месте в любом количестве, не записывая дубликаты SVG.
Давайте напишем предыдущий пример, используя Symbol:
В этом примере мы определяем ‹символ› с уникальным идентификатором. Затем с помощью элемента ‹use› мы можем отобразить этот символ в любом месте, где захотим, только со ссылкой на идентификатор символа в атрибуте href.
С помощью этой техники мы можем предотвратить дублирование SVG, но при этом размер нашего HTML-файла увеличится. Как мы можем исключить SVG из HTML и сделать его кэшируемым?
2. Отделите SVG от HTML с помощью ленивой инъекции
Браузеры поддерживают метод insertAdjacentHTML. У каждого элемента есть этот метод, который принимает позицию рендеринга и строку допустимого HTML в качестве источника, а затем отображает источник в этой позиции элемента.
Например, отобразите тег span в div:
Результат будет:
С помощью этого метода мы можем поместить наш SVG в файл JS и внедрить его в HTML после запуска этого файла JS.
Давайте напишем пример со звездами, используя Lazy-Injection и Symbol:
Результат:
Теперь мы удалили дубликаты SVG и отделили их от HTML. Теперь у нас есть только один JS-файл, который можно легко кэшировать как на стороне клиента, так и на стороне сервера. Кроме того, размер нашего HTML не будет слишком большим.
Поздравляем!
Заключение
Иконки SVG имеют много преимуществ, но их основная проблема заключается в увеличении размера HTML.
Первое, с чем мы должны быть осторожны при использовании значков SVG, — это избегать дублирования. Это можно решить с помощью элементов ‹symbol› и ‹use›.
Второе, что мы можем сделать, чтобы уменьшить размер HTML, — это отделить значки SVG от HTML в файле JS и отобразить их с помощью insertAdjacentHTML.
Помещение значков SVG в отдельный файл JS позволяет нам использовать значки SVG без увеличения размера HTML.
Мы также можем кэшировать этот JS-файл как на стороне клиента, так и на стороне сервера, что невозможно с чистыми встроенными значками SVG.
