Рассказываем, зачем и как работать с файлами в формате SVG и для чего их можно модифицировать через код.
Зачем использовать SVG
Если вам нужны четкие, адаптивные или анимированные элементы интерфейса, иконки, логотипы, векторные изображения, то лучше всего использовать формат SVG. Ниже мы расскажем об основных преимуществах формата.
Масштабирование изображения с сохранением качества pixel perfect
При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает ее качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.
Изображения в формате SVG сохраняют качество при масштабировании, так как они нарисованы с помощью кода, а не с помощью пикселей.
Сравнение качества растровых и векторных изображений
Возможность модификации
Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.
Небольшой вес файлов
Изображения в формате PNG становятся очень тяжелыми, когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что, в свою очередь, может ухудшить результаты сайта в поисковой выдаче.
Файлы в формате JPG чуть легче картинок в PNG, но всё равно они слишком тяжёлые. А изображения SVG представляют собой код, поэтому они весят очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.
Доступность
Если SVG-изображения содержат текст, то поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.
Использование SVG: распространенные практики
Векторные изображения долго были непопулярными, так как не все браузеры их поддерживали, но сейчас эта проблема решена. Поэтому формат активно применяется для решения задач веб-разработки. Наиболее популярные кейсы использования представлены ниже.
1. Логотипы и иконки в SVG
Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Четкость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.
Использование SVG обеспечивает разработчикам контроль над каждой линией, формой и элементом изображения. Также формат облегчает позиционирование элемента и позволяет манипулировать его элементами.
2. Инфографика
Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.
3. Визуальные эффекты
С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.
4. Анимация
SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.
5. Иллюстрации и рисунки
Обычные рисунки и иллюстрации, если они не слишком сложные, легко трансформировать в SVG. Также это практически идеальный формат для скетчей, схем, например, для иллюстраций, схематически показывающих принцип работы какого-то механизма.
Интерфейсы и приложения
SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.
Узнать больше
Как правильно добавлять файлы SVG на сайт с помощью HTML и CSS, читайте в полной версии статьи — в блоге Хекслета.
Изучить верстку можно в рамках профессии «Верстальщик»: HTML5 и CSS3, Flex, Grid, Sass, Bootstrap. В процессе обучения вы сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.
И не забудьте подписаться на наш канал в Дзене, чтобы каждую неделю получать полезные материалы для IT-специалистов!