PNG или JPG в редактируемый SVG: трассировка и проверка результата

Чтобы получить редактируемый SVG из PNG или JPG, нужно трассировать видимые формы или заново построить их в виде векторных объектов. Помещение картинки внутрь SVG не делает её векторной. Проверяйте, можно ли изменить заливку или контур отдельного объекта после удаления исходного растра, а не только расширение .svg.

Трассировка особенно подходит для плоских иконок, чётких силуэтов и простых иллюстраций. С фотографией, мягкой тенью или фактурной живописью обычно приходится выбирать: оставить растр, согласиться на упрощённую векторную интерпретацию или вручную воссоздать отдельные элементы. ИИ может помочь перерисовать иллюстрацию, но это новая интерпретация, точность которой нужно проверять отдельно.

В руководстве используются созданное нами геометрическое изображение чашки, реальные результаты локальной трассировки, SVG-обёртка с растровой картинкой и векторный файл с изменённой заливкой. Исходные тестовые изображения созданы программно, а не моделью ИИ. Конвертация выполнена 11 ноября 2026 года в VTracer 0.6.15. Платный Illustrator и сервисы ИИ-конвертации мы для этой статьи не тестировали.

Скачайте примеры и сравните файлы

Скачайте набор примеров PNG → SVG. В нём находятся mug.png, mug-wrapped.svg, mug-traced.svg, mug-recolored.svg, тестовое изображение с градиентом, скрипт конвертации и отчёт проверки. Начните с них, прежде чем загружать клиентский логотип или конфиденциальный макет.

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

Скриншот нашего локального средства просмотра результатов с английским интерфейсом. Входное изображение создано программно. Показаны реальные результаты трассировки, а не интерфейс ИИ-продукта.

Выберите трассировку, перерисовку или смешанный файл

Трассируйте, когда важен исходный контур. Лучше всего подходят чёткий силуэт, достаточное разрешение и небольшое число цветовых областей. Возьмите качественный оригинал, а не миниатюру из презентации. Сжатие JPEG может создавать мелкие цветовые пятна, которые превратятся в лишние фигуры.

Перерисовывайте, когда смысловая структура важнее точного совпадения пикселей. Например, просьба «выделить чашку, ручку и блюдце в именованные группы» полезна для анимации или перестановки элементов. Автоматический трассировщик обычно различает связанные цветовые области, а не смысловые объекты. ИИ может лучше сгруппировать элементы, но также изменить пропорции, убрать детали или придумать надпись. Считайте перерисовку изменением дизайна, которое нужно согласовать.

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

Если нужна новая векторная иллюстрация, а не конвертация существующей, прочитайте руководство по SVG в Image 2.6. Исходные задачи и критерии приёмки здесь различаются. Если запрос SVG/GIF к этой модели отклоняется, используйте разбор форматов вывода и ошибок параметров Image 2.6 (на английском), а не меняйте расширение файла.

Выполните трассировку в графическом редакторе

В руководстве Inkscape описаны импорт изображения и команда Path → Trace Bitmap. Для простого одноцветного силуэта начните с одного прохода; для сохранения отдельных цветовых областей используйте цветную трассировку. Оценивайте предпросмотр и подбирайте настройки под изображение, а не применяйте один пресет ко всем исходникам.

После трассировки сдвиньте результат в сторону. Многие редакторы кладут его поверх исходника, из-за чего неудачный результат может выглядеть лучше, чем он есть. В копии документа скройте или удалите исходный растр. Проверьте контур, отверстия и мелкие детали. Измените цвет одного объекта, сохраните SVG и снова откройте его. Так вы отличите просто созданную трассировку от пригодного результата.

В Illustrator официальная инструкция Image Trace начинается с размещения и выделения картинки, затем открытия панели Image Trace. Выберите подходящий пресет, проверьте предпросмотр и выполните Expand, если нужны обычные редактируемые пути. Это альтернатива по документации: скачиваемые результаты статьи созданы в VTracer, а не Illustrator.

Текст требует отдельного внимания. Трассировка букв обычно создаёт контуры, а не редактируемый текст. Если формулировка должна меняться, наберите её заново доступным шрифтом и проверьте переносы и интервалы. Сохраните рабочую копию с текстом и при необходимости отдельную копию для передачи с буквами в контурах. Преобразование в контуры сохраняет форму, но убирает обычное текстовое редактирование.

Повторите локальную конвертацию

VTracer преобразует растровые изображения в векторные. В примере закреплена версия, использованная в тесте: API новых версий может отличаться. Распакуйте ZIP в новую папку, откройте в ней терминал и выполните:

python3 -m venv .venv
source .venv/bin/activate
python -m pip install vtracer==0.6.15 Pillow==11.3.0
python convert.py mug.png my-mug.svg

В Windows используйте .venv\Scripts\activate вместо source. Скрипт отказывается перезаписывать существующий выходной файл. Конвертация выполняется локально: изображение никуда не загружается, ИИ API не вызывается. Если для вашей системы нет совместимого пакета wheel, могут потребоваться инструменты сборки. Вместо настройки окружения можно воспользоваться графическим редактором.

В проверенной конфигурации используются цветная трассировка, наложение областей и сплайновые кривые. Области могут перекрываться: удаление переднего объекта иногда открывает более крупную фоновую фигуру под ним. Такая структура не обязательно совпадает с тем, как дизайнер построил бы файл вручную. Если нужны независимые формы для резки или производства, проверьте пересечения и отверстия в конечном приложении: одного успешного просмотра в браузере недостаточно.

Входящий в набор инспектор показывает растровые элементы, векторную геометрию и атрибуты холста:

python inspect_svg.py my-mug.svg

Это помощь при проверке структуры, а не аудит безопасности или доказательство визуальной точности. Даже без элемента <image> файл может выглядеть неверно, зависеть от недоступного шрифта или содержать слишком сложную геометрию. Открывайте SVG из доверенных источников и проверяйте сгенерированную разметку перед вставкой на сайт.

Измените цвет и размер, затем проверьте результат

В нашем примере замена одной оранжевой заливки на фиолетовую изменила чашку, сохранив контур. Откройте рядом mug-recolored.svg и mug-traced.svg: отверстие ручки и блюдце должны остаться на месте. Для изменения заливки выбирайте объект; переходите к редактированию узлов только тогда, когда нужно менять контур.

В ZIP есть mug-responsive.svg с нормализованными параметрами холста. Исходный результат трассировщика задаёт ширину и высоту, но не viewBox. Для документа фиксированного размера это допустимо, однако для адаптивной вставки неудобно. Для известного тестового изображения 512 × 384 скрипт добавляет viewBox="0 0 512 384". Для другого файла определяйте viewBox по его реальной системе координат, а не копируйте эти размеры. Проверьте маленький и большой варианты отображения с сохранением пропорций.

Перед передачей файла внесите в копию три изменения: замените одну заливку, переместите один объект и измените размер всей иллюстрации. Сохраните файл, откройте его заново и убедитесь, что все изменения сохранились. Это проверяет нужный получателю процесс редактирования и полезнее, чем миниатюра или сообщение конвертера об успехе.

Используйте ИИ для перерисовки, не теряя требования

Если инструмент принимает изображение-образец и возвращает код SVG или готовый файл, начните с конкретного задания. Ниже — переиспользуемый шаблон, а не утверждение, что мы запускали его во всех инструментах:

Перестрой приложенную иллюстрацию как самостоятельный редактируемый SVG.
Сохрани силуэт, пропорции и важные просветы между элементами.
Используй векторные пути или фигуры; не встраивай исходный растр.
Раздели смысловые компоненты на именованные группы.
Задай viewBox с нужным соотношением сторон.
Не добавляй текст, объекты, внешние изображения, скрипты или внешние шрифты.
Если деталь нельзя надёжно воспроизвести, укажи это, а не придумывай замену.
Верни SVG и краткий перечень упрощений. Не изменяй исходное изображение.

Затем попросите одно ограниченное изменение — например, новый цвет чашки при сохранении геометрии. Сравните файлы, а не полагайтесь на заверение агента, что остальное не изменилось. Для фирменного знака, точного контура или юридически согласованной надписи используйте исходный вектор либо проверку дизайнера: красивая перерисовка может не соответствовать заданию.

Можно начать задачу в Ofox Chat, приложив разрешённый к использованию образец и требования выше. Результаты локальной трассировки не подтверждают, что любой режим Chat создаст SVG или сохранит именно ваш дизайн. Проверяйте полученный файл перед использованием.

Исправьте типичные проблемы

Тест с градиентом показателен: выбранные настройки дали всего два пути и сильно упростили цветовое поле. Это не означает, что SVG не поддерживает градиенты. Это показывает, почему одинаковые автоматические настройки могут подходить плоской иконке и не подходить изображению с плавными тональными переходами.

Готовый результат должен включать исходник, редактируемый SVG и предпросмотр, а также описание допущенных упрощений. Сохраните рабочую версию, чтобы следующее изменение не начиналось с очередной конвертации с потерями.