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

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

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

Главное, что это совсем несложно, и не требует лишних действий. Чтобы создать простейшую анимированную PNG иконку вам необходимо дважды ее нарисовать, объединить в спрайт, оптимизировать и задать ему смещение при наведении. В случае с SVG вам только необходимо переопределить свойства заливок на CSS — и все! И самое важное: код SVG вставляется напрямую в HTML, не требуя дополнительных обращений к серверу. А это означает еще более быструю работу вашего сайта.

Реализовано:

• Видеоуроки по SVG графике