Векторные изображения¶
Узнайте о SVG - формате векторных изображений, используемом в Интернете.
Векторная графика - это метод передачи серии фигур, координат и путей в контекст рендеринга. Они представляют собой набор инструкций по отрисовке изображения. При увеличении или уменьшении масштаба изображения набор точек и линий, которые оно представляет, перерисовывается в соответствии с масштабом. Плавная кривая между двумя точками будет перерисовываться так же плавно при любом размере - подобно тому, как CSS-определенная граница элемента HTML перерисовывается при изменении масштаба элемента в области просмотра.
Scalable Vector Graphics (SVG) - язык разметки на основе XML, разработанный W3C. Это формат векторных изображений, предназначенный для современного Интернета.
Любое программное обеспечение, предназначенное для редактирования векторных изображений, позволяет экспортировать изображение в формат SVG. Однако, будучи стандартизованным, человекочитаемым языком разметки, SVG можно создавать и редактировать с помощью любого текстового редактора, независимо от того, в какой программе он был создан, хотя это быстро становится нереальным для изображений любой реальной сложности. SVG может быть стилизован с помощью CSS или содержать JavaScript, который встраивает поведение и взаимодействие в сами изображения.
Помимо очевидной привлекательности для дизайнеров и разработчиков, SVG также является невероятно мощным форматом с точки зрения удобства для конечного пользователя. Описательная информация, содержащаяся в источнике SVG, зачастую очень компактна по сравнению с более предписывающей информацией в формате растровых изображений, основанной на пиксельной сетке, в случае простых фигур - если несколько упростить, то разница между указанием браузеру "нарисуй красную линию в 1px между 1x1 и 1x5" и "1x1 - красный пиксель. 1x2 - красный пиксель. 1x3 - красный пиксель. 1x4 - красный пиксель. 1x5 - красный пиксель". Обратной стороной является то, что описательный характер SVG требует от браузера большей интерпретации - большего "мышления". По этой причине сложные SVG могут быть более сложными для визуализации. Аналогичным образом, сложное изображение может потребовать многословного набора инструкций и большого размера передачи.
Возможно, потребуется немного проб и ошибок, прежде чем вы сможете сразу определить, что для исходного изображения лучше использовать SVG, а не обычный растровый формат. Однако есть несколько рекомендаций: такие элементы интерфейса, как значки, почти всегда хорошо работают в SVG. Изображения с четкими линиями, сплошными цветами и четко очерченными формами, скорее всего, будут хорошим кандидатом для SVG.
SVG - это огромная тема: целый язык разметки, созданный для сосуществования с HTML, с уникальными опциями и возможностями стилизации. Более подробное знакомство с SVG можно найти в MDN SVG tutorial.
Источник — Vector images