Преимущества векторных изображений
Растровые изображения, например.JPEG, .PNG и т.д., состоят из квадратных пикселей, расположенных в виде сетки. Следовательно, чем больше изображение, тем больше пикселей оно использует, что приводит к увеличению размера файла.
Мало того, пиксельная графика плохо масштабируется.
SVG не зависит от разрешения.
Масштабирование заложено в векторной графики, а SVG — это формат векторных изображений на основе XML.
SVG состоят из инструкций геометрического рисования, например фигур, путей, линий и т.д. которые не зависят от размера пикселя.
С точки зрения размера файла не имеет особого значения, в каком размере отображается изображение, просто потому, что эти инструкции остаются неизменными.
Еще одним следствием независимости от разрешения является то, что вам не нужно готовить разные копии одного и того же изображения для разных устройств; Один размер подходит всем и выглядит четко при любом разрешении экрана.
Рекомендации по созданию высокопроизводительных файлов SVG
Вообще говоря, SVG для использования в Интернете довольно просты: это логотипы, карты, значки и т. д. Вполне вероятно, что такие простые изображения SVG имеют небольшой размер файла по сравнению с их растровыми аналогами.
Однако есть шаги, которые вы можете предпринять, чтобы еще больше оптимизировать размер файла и обеспечить посетителям отличный опыт на вашем веб-сайте.
Заложите производительность в конструкцию с самого начала.
Вы можете написать простую графику SVG самостоятельно или использовать библиотеку JavaScript, например Snap.svg, для рисования векторной графики.
Экспорт SVG умным способом.
Используйте все возможности экспорта в графическом редакторе. В противном случае вы можете получить SVG-код, напичканный фирменной разметкой и ненужным вам содержимым.
Сжимайте больше байтов с помощью инструментов оптимизации SVG.
После того, как ваша графика SVG будет экспортирована, вы все равно можете еще немного уменьшить ее, используя один из превосходных доступных инструментов оптимизации SVG.
Заключение
Графика SVG — отличный выбор для Интернета. Используемые для простых значков, логотипов и т. д. зачастую более эффективны, чем их растровые аналоги, особенно если вы примете несколько мер предосторожности, перечисленных в этой статье.
28 показов 3 открытия
Monstro – сервис для продвижения сайтов и услуг
https://t.me/monstrotraf