Традиционные растровые форматы изображений, такие как GIF, PNG, JPG, были неотъемлемой частью работы в сети долгое время, пока не появились устройства с большой плотностью пикселей. Если проблему размера экрана можно решить адаптивностью, то как справиться с различной плотностью пикселей? Ответ: векторная графика.
SVG или Scalable Vector Graphics является форматом изображений, использующим разметку, основанную на XML и хранимую в удобочитаемом коде, который может быть использован браузером или графическими программами. Проще говоря, SVG – это обычный текстовый файл, с кучей разметки внутри.
Что же хорошего есть в SVG, чего нет в традиционных форматах изображений:
- Отзывчивость. SVG можно масштабировать как угодно и сколько угодно, он не будет получаться неровным.
- Меньше HTTP запросов. Со встроенной поддержкой SVG в браузере, можно полностью избежать использования внешних изображений.
- Стилизованность и «Скриптованность». Разметка SVG может быть доступна из CSS, с его помощью, можно манипулировать стилем и размером изображения. Можно также генерировать SVG и добавлять его в DOM динамически.
- Анимированность. Можно применять CSS или стандартную SVG анимацию, чтобы делать удивительные вещи.
- Маленький размер. Поскольку SVG – это просто куча кода, он может быть сжат до смехотворных размеров.
Прошли те времена, когда можно было смириться с 72dpi в изображениях на своем сайте, и быть уверенным, что они будут выглядеть четко на всех дисплеях. Сейчас нужно, чтобы все выглядело резко и красиво на экранах любой пиксельной плотности, но при этом имело небольшой размер, для сохранения производительности. SVG может решить эту проблему.
Комментариев: 0