В наших проектах мы стараемся по максимуму использовать векторную графику для элементов интерфейса веб-сайта. Векторная графика обладает очевидными преимуществами перед растровой.

Выделим основные преимущества. Во-первых это меньший размер векторного изображения. Это позволяет значительно увеличивать скорость загрузки страницы что положительно влияет на поисковое ранжирование сайта и облегчает нагрузку на браузеры мобильных устройств. Во-вторых стоит отметить особенность масштабирования векторной графики. При увеличении масштаба в окне браузера настольного ПК или мобильного браузера векторные изображения сохраняю прежнюю четкость и не становятся “размытыми” как это делают растровые изображения.

Для сравнения приведем ниже пример одного и того же изображения в растровом и векторном исполнении. Для экспиримента попробуйте увеличить масштаб страницы. В большинстве популярных браузеров ПК это делается при помощи комбинации клавиш “Ctrl” + “+”

Растровое изображение:

Формат: .PNG; Размер: 77 kb

Векторное изображение:

Формат: .SVG;  Размер: 11 kb