Включить встроенный SVG через символ или CSS?

Я планирую использовать встроенную концепцию svg для создания svg spritesheet для проекта.

На самом деле существует много способов создания svg spritesheet. Я предпочел два метода (из-за производительности) для создания таблицы спрайтов. они следующие:

  • Сгруппируйте все svgs в один svg, обернув содержимое каждого svg, используя symbol тег с уникальным идентификатором, чтобы позже мы могли сослаться на это, используя use тег в HTML.
  • Создайте файл CSS, содержащий все svgs, указанные через css background-image имущество. Каждый SVG будет иметь уникальное имя класса.

Теперь у меня дилемма, какой именно метод использовать. К вашему сведению, это не вопрос, основанный на мнениях, потому что я не ищу мнения, а рассматриваю производительность и оптимальное решение.

PS: я могу сгенерировать листы спрайтов svg используя gulp runner.

Источник

2 ответа

Решение

Предварительная информация

Производительность в браузере очень сложно проверить и измерить, просто из-за количества переменных, которые могут вызвать изменения, всплески или различия между браузерами, аппаратными средствами или другими вещами, которые могут стать препятствием для производительности.

Приведенный ниже тест, который я провел на ноутбуке Dell со следующим оборудованием и браузером

Процессор Intel Core i5-3320M с частотой 2,60 ГГц

8 ГБ оперативной памяти DDR3 (не уверены в синхронизации и т. Д.)

Windows 8.1 Корпоративная - 64-битная

Google Chrome v45.0.2454.101 м

Я выполнил только 3 теста, которые мне бы понравились из-за нехватки времени, но может вернуться, чтобы продолжить тесты, а также повторно запустить их на разных браузерах и машинах.

SVG я использовал

Я создал элемент SVG, который использует 5 значков, расположенных друг над другом.

Все эти иконки взяты из http://iconmonstr.com/, который предоставляет бесплатные иконки SVG.

Тесты

В соответствии - <use>

Код

<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#globe-4-icon"></use>
</svg>

Результаты, достижения

1 запрос - 221B перевод

Средний

Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms

Inline - Индивидуальный <svg> "s

Тест

Этот файл слишком большой, поэтому приведем только пример CodePen

Результаты, достижения

1 запрос - 221B перевод

Средний

Finish: 9.7ms - DOMContentLoaded: 20.6ms - Load: 19.9ms

Внешний файл - <use>

Тест

<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#globe-4-icon"></use>
</svg>

Используйте это с базовым файлом, указанным вверху страницы.

Результат

2 запроса - 440B Transfer

Средний

Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms

Заключение

Как видно из приведенных выше тестов и результатов, использование встроенного SVG и обращение к нему намного быстрее, чем использование внешнего файла; кэшируется или нет.

Кажется, что ни один из двух встроенных методов SVG не имеет такого большого количества различий в скорости, но я бы лично остановился на <use> метод, просто потому, что его легче использовать в долгосрочной перспективе и помогает поддерживать чистоту вашего кода тела.

Теперь, как я уже говорил, эти результаты полностью зависят от бесконечного количества переменных, чтобы назвать несколько:

  • браузер
  • аппаратные средства
  • Интернет-соединение
  • Размер файла SVG
  • Программное обеспечение для бутылочного горлышка

Я бы лично использовал то, что тебе удобнее всего.

Я надеюсь, что эти результаты будут несколько полезными или удовлетворительными и помогут вам с тем, что вам нужно.

Посмотреть все тесты и результаты здесь!

Источник

У меня был наибольший успех с SVG в одном файле спрайта с уникальными идентификаторами. Большинство сценариев минимизации и конкатенации svg просто называют каждый Id после отдельного имени файла, что достаточно просто.

Затем для лучшего шанса правильного масштабирования и тому подобного я включил SVG через тег HTML:

<svg viewBox="0 0 50 50"
  class="svgIcon" xmlns="http://www.w3.org/2000/svg"    
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="#myIconIdHere"></use>
</svg>

Если вам повезет, viewBox значение будет таким же, если нет, вам может потребоваться предоставить это с помощью помощника вида.

В моих прошлых работах я сохранял отдельные значения viewBox в конфигурации для последующего динамического генерирования. Конечно, вы также можете просто сгенерировать каждый SVG-тег в файле где-нибудь в виде строки. Вот пример конфигурации, которую мы использовали в одном проекте:

config = {
    "arrow": {
        "viewBox" :"0 0 50 49.999360957030746",
    }
    ,
    "close": {
       "viewBox" :"0 100 50 49.999360957030746",
    }
...
}

Что касается производительности, я могу говорить только небольшое количество.

Это решение работало в IE9+, Chrome, Firefox и мобильных устройствах. У нас есть анимации по всем направлениям, которые включают эти SVG, и масштабируем их для каждой точки останова. CSS-анимации, примененные к элементам, не имели серьезных проблем с запаздыванием, кроме IE9. Я посмотрел этот анализ для получения дополнительной помощи.

Я был бы рад показать вам страницу с высоким трафиком, используя эти SVG, но предпочел бы, чтобы вы отправили мне личное сообщение.

Источник
Другие вопросы по тегам