Масштабируемая векторная графика, или SVG, сегодня играет важную роль в дизайне веб-сайтов. Если вы в настоящее время не используете SVG в своей работе по веб-дизайну, вот несколько причин, по которым вам следует начать это делать, а также запасные варианты, которые вы можете использовать для старых браузеров, которые не поддерживают эти файлы.
Решение
Самое большое преимущество SVG - независимость от разрешения. Поскольку файлы SVG представляют собой векторную графику (в отличие от растровых изображений на основе пикселей), вы можете изменять их размер без потери качества изображения. Это особенно полезно при создании адаптивных веб-сайтов, которые должны хорошо выглядеть и хорошо работать на экранах разных размеров и на разных устройствах. Вы можете масштабировать SVG-файлы в большую или меньшую сторону, чтобы приспособиться к меняющимся размерам и макетам адаптивного веб-сайта без ущерба для их качества.
Как правило, SVG имеют более плавный и четкий вид, чем изображения других форматов, независимо от размера.
Размер файла
Одной из проблем при использовании растровых изображений (например, JPG, PNG, GIF) на адаптивных веб-сайтах является размер файла. Поскольку растровые изображения не масштабируются так, как векторные изображения, вы должны предоставлять свои пиксельные изображения в самом большом размере, в котором они будут отображаться. Это связано с тем, что вы всегда можете уменьшить изображение и сохранить его качество, но этого нельзя сказать об увеличении изображения. В результате изображения намного больше размера, в котором они просматриваются, что вынуждает браузеры загружать большие файлы.
В отличие от этого, векторная графика является масштабируемой, поэтому вы можете использовать очень маленькие размеры файлов независимо от того, насколько велики должны быть эти изображения. В конечном итоге это оптимизирует общую производительность сайта и скорость загрузки.
Стили CSS
Вы можете легко добавить SVG непосредственно в HTML страницы. Это известно как встроенный SVG. Одним из преимуществ использования встроенного SVG является то, что, поскольку графика фактически рисуется браузером, нет необходимости в HTTP-запросе для получения файла изображения.
Еще одно преимущество: вы можете стилизовать встроенный SVG с помощью CSS. Нужно изменить цвет значка SVG? Вместо того, чтобы редактировать это изображение в программном обеспечении для редактирования графики, а затем снова экспортировать и загружать файл, вы можете изменить файл SVG просто с помощью нескольких строк CSS. Вы можете использовать CSS для изменения SVG для состояний наведения и других дизайнерских нужд.
Итог
Поскольку вы можете стилизовать встроенные SVG-файлы с помощью CSS, вы также можете использовать для них анимацию CSS. Преобразования и переходы CSS - это два простых способа оживить SVG. Вы можете получить богатый опыт, подобный Flash, на странице без использования Flash, который iPad больше не поддерживает. Фактически, Adobe постепенно отказывается от Flash к концу 2020 года.
Использование SVG
Каким бы мощным ни был формат SVG, он не может заменить любой другой формат изображения. Фотографии, требующие богатой глубины цвета, по-прежнему должны быть в формате-j.webp
SVG также подходит для некоторых сложных иллюстраций, таких как графики, диаграммы и логотипы компаний. Вся эта графика выигрывает от масштабируемости и возможности оформления с помощью CSS.
Поддержка старых браузеров
Текущая поддержка SVG в современных веб-браузерах очень хороша. Единственными браузерами, в которых отсутствует поддержка этой графики, являются старые версии Internet Explorer (которые Microsoft больше не поддерживает) и несколько старых версий Android. В целом, очень небольшой процент пользователей по-прежнему использует эти браузеры, и это число продолжает сокращаться. Это означает, что вы можете спокойно использовать SVG на своем веб-сайте.
Если вы хотите обеспечить запасной вариант для SVG, используйте такой инструмент, как Grumpicon от Filament Group. Этот ресурс создает файлы-p.webp
