Почему вы должны использовать SVG на своем сайте

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

Самое большое преимущество SVG является разрешением независимость.Поскольку файлы SVG являются векторные графика (в отличие от растровых изображений на основе пикселей), вы можете изменить размер их без потери качества изображения.Это особенно полезно, когда вы создаете адаптивные веб-сайты, которые должны хорошо выглядеть и хорошо работать по широкому диапазону размеров и устройств экрана.Вы можете масштабировать файлы SVG вверх или вниз, чтобы приспособиться к изменяющимся размеру и потребностям макета вашего адаптативного веб-сайта без каких-либо ущерб.

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

Один вызов с использованием растровых изображений (например, jpg, png, gif) на адаптивных веб-сайтах — это размер файла.Поскольку растровые изображения не масштабируются так, как векторные изображения, вы должны доставить свои пиксельные изображения в наибольший размер, на котором они будут отображаться.Это потому, что вы всегда можете сделать изображение меньше и сохранить его качество, но то же самое не относится к созданию изображений больше.Результатом являются изображения, которые намного больше, чем размер, на котором они рассматриваются, принудительные браузеры загружают большие файлы.

Напротив, векторная графика масштабируется, поэтому вы можете использовать очень маленькие размеры файлов независимо от того, насколько большими изображениями могут отображаться эти изображения.Это в конечном итоге оптимизирует общую производительность и скорость работы сайта.

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

Еще одно преимущество: вы можете стиль встроенный SVG с CSS.Нужно изменить цвет значка SVG?Вместо того, чтобы редактировать это изображение в программном обеспечении редактирования графики, а затем экспортировать и загрузить файл еще раз, вы можете изменить файл SVG просто несколькими строками CSS.Вы можете использовать CSS, чтобы изменить SVGS для государств на курсе, а также другие потребности в дизайне.

Поскольку вы можете стиль встроенные файлы SVG с CSS, вы можете использовать анимацию CSS на них.Преобразования CSS и переходы являются двумя простыми способами добавления в SVG.Вы можете получить богатую вспышку опыта на странице, не используя Flash — которую iPad больше не поддерживает.Фактически, Adobe поглазует вспышку к концу 2020 года.

Поскольку SVGS, они не могут заменить каждый другой формат изображения.Фотографии, которые требуют богатой глубины цвета, все еще должны быть в формате JPG или PNG, но простой изображения, такие как значки, идеально подходят для выполнения в виде SVG.

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

Текущая поддержка SVG очень хорошая в современных веб-браузерах.Единственные браузеры, которые отсутствуют поддержки для этой графики, являются старые версии Internet Explorer (версия 8 и ниже) и несколько старых версий Android.В целом очень небольшой процент населения просмотра все еще использует эти браузеры, и этот номер продолжает сокращаться.Это означает, что вы можете использовать SVG на своем сайте без беспокойства.