Что значит векторизовать изображение

Растровое изображение — PNG, JPG или WebP — это сетка пикселей, у каждого из которых один цвет. Если его увеличить, пиксели растут, и края размываются или становятся ступенчатыми. Векторное изображение описывает картинку иначе — контурами и заливками: очертаниями из линий и кривых и цветом внутри каждого из них. Программа отрисовывает эти очертания в любом нужном размере, поэтому края остаются четкими.

Векторизация — это переход от первого вида изображения ко второму. «Растр в вектор», «картинку в вектор», «PNG в вектор» — всё это одна и та же задача: трассировка, которая находит в пикселях цветовые области и обводит каждую контуром.

SVG, который просто вкладывает исходный PNG в элемент <image>, не векторизован. Он открывается как SVG, но при увеличении всё равно размывается: картинка внутри по-прежнему из пикселей. Как отличить настоящий вектор от вложенного PNG.

Как png2svg.art векторизует изображение

  1. Выбирает небольшой набор плоских цветов — не больше заданного вами числа — по сплошной внутренней части фигур, а не по их мягким краям.
  2. Относит каждый пиксель к одному из этих цветов. В PNG и WebP пиксели, непрозрачные меньше чем наполовину, не попадают ни в один цвет и остаются прозрачными.
  3. Обводит все цвета вместе, поэтому там, где два цвета встречаются, у них одна общая граница из прямых отрезков и кривых Безье.
  4. Группирует результат по объектам (сначала фон, затем каждый отдельный объект) и записывает каждую фигуру отдельным <path>, залитым ее цветом, с вложенностью по тому, что внутри чего находится (глаз внутри лица). Отверстия, например внутренность буквы «О», остаются открытыми.
  5. Прежде чем отдать результат, проверяет, что в нем только векторные контуры — без встроенного растра и без скриптов.

Трассировка работает без ИИ. Она не придумывает детали и не перерисовывает картинку в новом стиле, а обводит цвета, которые в ней уже есть.

Когда это работает, а когда нет

Хорошо векторизуются:

  • логотипы, иконки и контурные рисунки;
  • стикеры, клипарт и плоские иллюстрации;
  • ИИ-картинки в плоском стиле с несколькими сплошными цветами (ИИ-картинки в SVG).

Плохо векторизуются:

  • Фотографии, градиенты и мягкие тени. Они превращаются в плоские цветовые полосы, как на плакате, потому что в каждой трассировке не больше 24 цветов. Почему фото постеризуются.
  • Мелкий текст. Буквы высотой меньше примерно 10 px чисто не векторизуются. Наберите их заново шрифтом в векторном редакторе и положите поверх трассировки.
  • Маленькие или размытые изображения. Трассировка не добавляет разрешения, поэтому контуры получаются более округлыми и мягкими, чем задуманный дизайн.

Векторизация изображения в четыре шага

  1. Загрузите PNG, JPG, WebP или HEIC до 25 МБ — в окно на этой странице или в конвертер.
  2. Выберите пресет и передвиньте ползунок «Цветов, до» на то число цветов, которое видите.
  3. Проверьте бесплатный предпросмотр с водяным знаком (без регистрации) и повторите трассировку, если фигуры получились не те.
  4. Разблокируйте чистый SVG за 1 кредит (3 бесплатных кредита при регистрации) и скачайте его.

Все настройки — вместе с тем, как то же самое делают в Inkscape и Illustrator, — разобраны в руководстве как конвертировать PNG в SVG, шаг за шагом.

Вопросы

«Картинку в вектор» и «PNG в SVG» — это одно и то же?

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

Можно ли векторизовать фото?

Да, но получатся плоские цветовые пятна (до 24 цветов), а не фотореалистичный вектор. Для плаката или трафарета это может быть как раз то, что нужно.

Что значит «растр в вектор»?

Превратить сетку пикселей в контуры: найти в растровом изображении цветовые области и обвести каждую, чтобы результат масштабировался без размытия.

Это бесплатно?

Предпросмотр с водяным знаком бесплатный и без регистрации (гостям — до 5 в день). Чистый SVG стоит 1 кредит (3 бесплатных кредита при регистрации).

Можно ли потом редактировать вектор?

Да. Каждый объект — слой, в котором фигуры хранятся как контуры, и в SVG-редакторе (для него нужен аккаунт) любую из них можно перекрасить, сдвинуть, изменить по точкам или скрыть. Редактор также объединяет, вычитает и пересекает фигуры; чтобы сделать отступ контура (offset), используйте настольный векторный редактор, например Inkscape.