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