Я нашел этот интересный вопрос в SVG Workshop: «В чем разница в производительности между загрузчиком SVG и простым вращением изображения для загрузчика?»
Выбор между масштабируемой векторной графикой (SVG) и загрузчиками растровых изображений зависит от многих факторов, таких как производительность, эстетика и удобство использования. Короткий ответ на этот вопрос: если вы работаете над чем-то очень маленьким и конкретным, разницы почти нет. Но давайте углубимся в эту статью подробнее и обсудим возможности обоих форматов, чтобы вы могли принимать обоснованные решения в своей работе.
понимание форматов
являются SVG вектор-основанная графика, популярная благодаря своей масштабируемости и ясности. Но давайте начнем с определения того, что на самом деле представляют собой растровые изображения и векторная графика.
Растровые изображения основаны на физических пикселях. Они содержат явную информацию о цвете для каждого пикселя. Происходит следующее: вы отправляете всю попиксельную информацию, а браузер рисует каждый пиксель один за другим, что усложняет работу сети.
Это означает:
- у них есть фиксированное разрешение (Масштабирование может привести к размытию),
- Обязательно наличие браузера Раскодируйте и раскрасьте каждый кадрИ
- Анимация обычно означает покадровое воспроизведениеНапример, GIF или цикл видео.
векторы — это математические инструкции В котором рассказывается, как создавать компьютерную графику. Как сказал Крис Койер на конференции CSS: «Зачем отправлять пиксели, если можно отправить математические данные?» Таким образом, вместо того, чтобы отправлять пиксели со всей информацией, SVG отправляет инструкции о том, как нарисовать объект. Другими словами, позвольте браузеру выполнять больше работы, а сети — меньше.
По этой причине SVG:
- Неограниченный масштаб без потери качества,
- Можно стилизовать и манипулировать с помощью CSS и JavaScript, а также
- Может находиться непосредственно в DOM, исключая дополнительные HTTP-запросы.
Сила векторов: почему побеждает SVG
Есть несколько причин, по которым обычно рекомендуется использовать SVG вместо растровых изображений.
1. Прозрачность и визуальное качество
Большинство современных форматов изображений поддерживают прозрачность, но не вся прозрачность одинакова. Например, GIF-файлы поддерживают только двоичную прозрачность, то есть пиксели либо полностью прозрачны, либо полностью непрозрачны.
Это часто приводит к неровным краям масштаба, особенно вокруг кривых, а также на непрозрачном или прозрачном фоне. SVG поддерживают настоящую прозрачность и сглаженные края, что заметно влияет на загрузчики, расположенные поверх сложных слоев пользовательского интерфейса.
| jpg | гифка | PNG | SVG | |
|---|---|---|---|---|
| вектор | ❌ | ❌ | ❌ | ✅ |
| растр | ✅ | ✅ | ✅ | ❌ |
| прозрачность | ❌ | ✅ | ✅ | ✅ |
| анимация | ❌ | ✅ | ✅ | ✅ |
| Давление | вредный | безупречный | безупречный | безупречный |
2. Производительность «нулевого запроса»
С точки зрения производительности вращение небольшого PNG и SVG в CSS (или JavaScript, если уж на то пошло) одинаково. Однако на практике SVG выигрывает, потому что они поддерживает gzip и может быть встроен в строку.
Вставляя код SVG непосредственно в HTML, вы исключаете весь HTTP-запрос. Для чего-то вроде загрузчика — того, что должно быть видно, пока загружаются другие объекты — тот факт, что код SVG уже существует и немедленно отображается, является огромным выигрышем для производительности.
Что еще более важно, грузчики влияют воспринимаемая производительность. Загрузчик, который легко оптимизирует свой контекст и правильно масштабирует, может сократить время ожидания, даже если фактическое время загрузки такое же.
И хотя код SVG похоже Поскольку это будет тяжелее, чем одна строка HTML, действительно важен размер файла изображения. И тот факт, что мы измеряем SVG в байтах, которые можно сжать gzip, означает, что в конечном итоге это очень низкие накладные расходы.
Несмотря на все это, импорт SVG все еще возможен.
И да, это считается сетевым запросом, хотя при этом учитывается векторность файла, когда речь идет о четких краях в любом масштабе. Это, и это исключает другие преимущества, такие как следующее.
3. Анимация, управление и интерактивность
Загрузчики форматов в SVG основаны на DOM, а не на кадрах. Это означает, что вы можете:
Вы можете манипулировать своим SVG с помощью CSS, JavaScript или SMIL, создавая целый мир возможностей интерактивности, с которыми растровые изображения не могут сравниться.
4. Но нужны ли отдельные файлы для анимированного SVG?
Опять же, анимация SVG может быть встроена в HTML или внутри файла. .svg файл. Это означает, что вы можете отправить анимированный файл, например GIF, но с гораздо большим контролем. используя Вы можете сохранить код в чистоте. Вот пример файла загрузчика SMIL:
Для более сложных взаимодействий вы также можете включить CSS и JavaScript в свой SVG-файл:
Встраивая стили и скрипты, вы, по сути, создаете отдельное мини-приложение внутри одного графического объекта. Основным преимуществом является инкапсуляция: загрузчик полностью портативен, требует меньше HTTP-запросов, а его стили не «просачиваются» на ваш сайт. Это незаменимый актив для различных проектов.
Однако эта возможность требует компромисса в функциональности и безопасности. Браузеры обрабатывают SVG как статические изображения при загрузке. ярлык. Из-за этих ограничений встроенный метод (вставка кода непосредственно в HTML) остается предпочтительным выбором для большинства современных веб-приложений.
5. Креативность, бренд и пользовательский опыт
Здесь мы выходим за рамки производительности История.
Представьте себе B2B-сайт, на котором пользователь создает интернет-магазин. Генерация занимает несколько секунд. Вместо обычного спиннера можно показывать анимацию «приходящих» в магазин товаров. Вы также можете сделать этот загрузчик интерактивным.
Этот тип SVG-анимации может занимать менее 20 КБ. Чтобы сделать то же самое с растровыми GIF-файлами, мы поговорим о мегабайтах. Эффективность SVG позволяет вам расширить голос вашего бренда и привлечь пользователей во время ожидания, не влияя на вашу производительность.
Когда растровые загрузчики все еще имеют смысл
Сами по себе загрузчики растров не являются «неправильными»; Они ограничены в возможностях, особенно по сравнению с SVG. Тем не менее, растровые изображения по-прежнему имеют смысл, если:
- Загрузчик является фотографическим или использует сложные текстуры с большим количеством иллюстраций.
- Вы работаете в старых системах, которые не поддерживают внедрение SVG, или
- Вам нужен очень быстрый, одноразовый объект, не требующий настройки.
Краткое содержание
| Специальность | Растр (GIF/PNG) | SVG |
|---|---|---|
| визуальное качество | На экране сетчатки может возникнуть размытие | Четкий и острый в любом масштабе |
| размер файла | Обычно большой (КБ/МБ) | очень маленький (байты) |
| Приспособление | Требуется реэкспорт | Измените напрямую с помощью CSS/JavaScript. |
| сетевой запрос | обычно HTTP-запрос | Значение NULL, если оно встроено непосредственно в HTML. |
последние мысли
Если вы отображаете простой индикатор загрузки, например вращающуюся маленькую точку, разница в производительности между SVG и растром может быть незначительной. Но если учесть масштабируемость, прозрачность, доступность и возможность рассказать историю бренда, загрузчики SVG станут нечто большим, чем просто производительность; Речь идет о создании загрузчиков, которые действительно принадлежат современной сети.
Если вы хотите поэкспериментировать, я приглашаю вас попробовать loaders.holasvg.com. Это созданный мною бесплатный генератор с открытым исходным кодом, который позволяет настраивать такие параметры, как анимация, размер и цвет, а затем предоставляет вам чистый SVG-код для использования.
