Растр и вектор — два разных способа хранить изображение, и знание разницы точно говорит вам, когда конвертировать между ними. Растровая картинка — PNG, JPG, WebP — это фиксированная сетка цветных пикселей. Векторная картинка — SVG — это набор инструкций: нарисуй этот контур, залей его этим цветом, поставь этот круг сюда. Поскольку вектор описывает фигуры математикой, а не пикселями, он остаётся резким при любом размере, тогда как растр размывается в тот миг, когда вы толкаете его за родное разрешение.
«Растр в вектор» означает трассировку: движок читает пиксели и вычисляет фигуры, прячущиеся в них, затем записывает эти фигуры как векторные контуры. Сделанная в правильной ситуации, она по-настоящему полезна. Сделанная в неправильной — устраивает бардак. Это руководство покрывает оба случая.
Для чего хороша трассировка
Трассировка хочет плоский, чистокрайный ввод: логотипы, иконки, простые иллюстрации, штриховая графика, ручные надписи. У них ограниченная палитра и чёткие границы, так что трассировщик может найти каждую область цвета и обвести её аккуратным контуром. Результат — компактный SVG из горстки фигур: резкий при любом масштабе, малый по размеру файла и редактируемый после. Если ваша цель — логотип, работающий от favicon до билборда, трассировка вас туда доведёт.
Почему фото не подходят
Фотография — противоположность того, что хочет трассировщик. У неё тысячи чуть различающихся цветов и никаких чётких краёв — непрерывный тон. Чтобы это векторизовать, движку приходится приближать каждый градиент наслоенными, перекрывающимися кляксами плоского цвета. Три вещи идут не так разом: SVG становится огромным, часто в несколько раз крупнее исходного JPG; он выглядит размазанным и постеризованным вместо фотографического; и его мучительно редактировать, потому что он состоит из тысяч бессмысленных фигур. Для фото растровый формат — просто правильный ответ: вместо этого сожмите JPG или конвертируйте в WebP. Вектор — для графики, а не для фотографий.
Пресеты и число цветов
Число цветов, которое трассировщику дозволено использовать, — самый большой рычаг на результат. Пресеты задают его за вас: Плоский / логотип держит цвета низкими для простых знаков, Детальный позволяет больше для богатых иллюстраций, Постеризованный схлопывает картинку в жирные плоские полосы, а Чёрно-белый сводит всё к двум тонам для штриховой графики и силуэтов. Меньше цветов — чище и меньше файл; больше цветов ловят тонкость ценой лишних контуров и веса. Попробовать два пресета на одной картинке и сравнить превью до/после — самый быстрый способ найти нужный баланс.
Всё локально, ничего не загружается
Вся конвертация работает в вашем браузере движком imagetracer. Картинка читается с canvas на вашей машине, трассируется там и отдаётся как SVG — ничего не загружается, нет аккаунта, и как только страница загрузилась, оно работает с выключенной сетью. Это стоит иметь для логотипа или внутренней графики, которую вы предпочли бы не отправлять на чужой сервер.
Одно уточнение, потому что слово «конвертировать» к нему располагает: это настоящая трассировка, а не ИИ-перерисовка. Она следует пикселям, которые вы дали, и не выдумывает более чистую версию вашей работы. Чёткий, плоский, малоцветный источник даёт чёткий результат; размытый или шумный даёт размытые, шумные контуры.
После трассировки
Поскольку вывод — стандартный SVG из именованных контуров и заливок, можно продолжить работу над ним в любом векторном редакторе — Illustrator, Inkscape, Figma. Перекрасьте целую область, отредактировав одну заливку, задайте точные фирменные цвета, уберите лишние фигуры или подправьте контур. В этом и смысл перехода на вектор: картинка перестаёт быть фиксированным изображением и становится объектом, которым вы владеете и который можете переформовать при любом размере, без размытия.