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

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

Scalable Vector Graphics (SVG, масштабируемая векторная графика) — это язык разметки на основе XML, созданный W3C. Это формат векторных изображений, разработанный для современного веба.

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

Помимо очевидной привлекательности для дизайнеров и разработчиков, SVG также является невероятно мощным форматом с точки зрения удобства пользователя. Описательная информация, содержащаяся в SVG, зачастую очень компактна по сравнению с более директивной информацией в формате растровых изображений, основанной на сетке пикселей. В случае простых фигур, если несколько утрировать, это разница между тем, чтобы сказать браузеру «нарисуй красную линию в 1px между 1x1 и 1x5» и «1x1 — это красный пиксель, 1x2 — красный пиксель, 1х3 — красный пиксель, 1x4 — красный пиксель, 1x5 — красный пиксель». Обратной стороной является то, что описательная природа SVG требует от браузера больше интерпретации — больше «мышления». По этой причине сложные SVG могут оказаться и более сложными для отображения. Аналогично, сложное изображение означает многословный набор инструкций и большой размер файла.

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

SVG — это огромная тема: целый язык разметки, созданный для совместного использования с HTML, с уникальными параметрами и возможностями стилизации. Более подробное введение в SVG можно найти в руководстве по SVG от MDN.