Векторная магия. Старый новый друг

SVG — Scalable Vector Graphics (Масштабируемая Векторная Графика) . Как видно из названия - это формат векторной графики. Разрабатывался он с 1999 года но только сейчас его популярность начала возрастать среди разработчиков. В отличие от растровой графики (такие форматы как PNG, GIF, JPEG и тд.) SVG может растягиваться и сжиматься в размере без потери качества и пропорций, что означает одинаковое отображение на всех устройствах при любых размерах и разрешении.

Причины перейти на формат SVG

Адаптивность
SVG - лучшее решение для адаптивных сайтов, на которых размер изображений меняется в зависимости от размера экрана, только svg позволит вам сохранить качество изображения на высшем уровне.

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

Скорость
Уменьшается количество HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.

Простота в разработке
Дизайнерам легко создавать изображения в векторной графике.Также для работы с SVG не обязательно приобретать Adobe Illustrator, есть много других свободно распространяемых инструментов.

Поддержка
Поддержка всеми последними версиями браузеров, платформами и устройствами.

Модификация
Простота в управлении - содержимое svg файла можно редактировать любым текстовым редактором начиная с блокнота, а также можно видоизменять изображение прямо на сайте средствами CSS.

Интерактивность
Внутрь изображения можно вставить скрипты, ссылки, описать анимацию при наведении и многое другое.

Недостатки

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

Использование

Для того чтобы использовать SVG на сайте есть несколько способов: Первый из них всем наиболее знаком - использование тега img или свойство “ background-image” в css. Также менее популярные методы как вызовы через теги Iframe, Embed и Object. Ну и на конец просто напрямую вставить в код страницы код самого файла тегом svg.

Какой именно способ использовать надо выбирать исходя из конкретной ситуации и ваших личных предпочтений. Каждый из них имеет как свои минусы так и плюсы. Для помощи в определении можно использовать вот такую небольшую сводную таблицу:

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