Векторная графика — это метод передачи ряда фигур, координат и путей в контекст их рендеринга. Это набор инструкций о том, как следует рисовать изображение. Когда это изображение масштабируется вверх или вниз, набор точек и линий, которые представляет изображение, перерисовывается в соответствии с масштабом. Гладкая кривая между двумя точками будет перерисовываться так же плавно при любом размере — аналогично тому, как перерисовывается граница HTML-элемента, определенная CSS, при масштабировании этого элемента в области просмотра.
Масштабируемая векторная графика (SVG) — это язык разметки на основе XML, разработанный W3C. Это формат векторного изображения, разработанный для современной сети.
Любое программное обеспечение для дизайна, предназначенное для редактирования векторных изображений, позволит вам экспортировать изображение в формате SVG. Но, будучи стандартизированным, удобочитаемым языком разметки, SVG также можно создавать и редактировать с помощью любого программного обеспечения для редактирования текста, независимо от того, какое программное обеспечение использовалось для его создания, хотя это быстро становится нереальным для изображений любой реальной сложности. SVG может быть стилизован с помощью CSS или содержать JavaScript, который встраивает поведение и взаимодействие в сами изображения.
Помимо очевидной привлекательности для дизайнеров и разработчиков, SVG также является невероятно мощным форматом с точки зрения удобства работы конечных пользователей. Описательная информация, содержащаяся в источнике SVG, часто очень компактна по сравнению с более предписывающей информацией, основанной на пиксельной сетке форматов растровых изображений, в случае простых фигур - если несколько упростить, разница между сообщением браузеру «нарисуйте красную линию толщиной 1 пиксель» между 1x1 и 1x5» и «1x1 — красный пиксель. 1x2 — красный пиксель. 1x3 — красный пиксель. 1x4 — красный пиксель. 1x5 — красный пиксель». Обратной стороной является то, что описательная природа SVG требует от браузера большей интерпретации – большего «мышления». По этой причине рендеринг сложных SVG может быть более трудоемким. Точно так же очень сложное изображение может означать подробный набор инструкций и большой размер передачи.
Может потребоваться небольшой метод проб и ошибок, прежде чем вы сможете мгновенно распознать кандидат в источник изображения как более подходящий для SVG, а не для обычного растрового формата. Однако есть несколько рекомендаций: элементы интерфейса, такие как значки, почти всегда хорошо обслуживаются SVG. Изображения с четкими линиями, сплошными цветами и четко определенными формами, вероятно, будут сильным кандидатом на использование SVG.
SVG — это огромная тема: целый язык разметки, созданный для сосуществования с HTML, с уникальными вариантами стилей и возможностями. Более подробное введение в SVG смотрите в туториале MDN SVG .