VTracer: PNG в SVG с проверкой цветов и мелких деталей

Для рабочего процесса преобразования PNG в SVG VTracer сохраните трассировку базовой линии, прежде чем уменьшать цвета или фильтровать небольшие области. Затем меняйте по одному элементу управления и проверяйте каждый сохраненный SVG. В нашем оригинальном тесте с плоским цветом цветовой предел объединял важные области, а более сильный спекл-фильтр приводил к преднамеренному исчезновению мелких пятен. Самый маленький файл или самая короткая палитра не были файлом, в котором сохранились наши задуманные изображения.

Если вам нужен один PNG-файл, отрисованный онлайн, начните с PerfectVector и проверьте цветовые области предварительного просмотра и мелкие детали по сравнению с оригиналом. Вы должны разблокировать результат, прежде чем сможете его редактировать или экспортировать. Приведенные ниже команды остаются полноценным локальным рабочим процессом VTracer; сравнение качества вывода между инструментами не проводилось.

Попробуйте на своём изображении

Открыть полный инструмент

PNGJPGWEBPPNGSVGПеретащите изображение сюдаили нажмите · вставьте ⌘VВыбрать изображениеОтпустите, чтобы проверить изображение

Бесплатно и без регистрации: перетащите изображение, чтобы увидеть превью своего вектора.

Сопоставьте команды с установленным CLI

В этом пошаговом руководстве использовался официальный интерфейс командной строки VTracer 1.0.0-alpha.4 с собственным исполняемым файлом справки. Получите двоичный файл соответствующей платформы из официального выпуска. В примерах предполагается, что исполняемый файл называется vtracer в вашей рабочей папке рядом с разрешенной копией PNG с именем artwork.png.

Вам также понадобится терминал и программа просмотра SVG или текстовый редактор. Сохраняйте нетронутый PNG и используйте разные имена выходных файлов. Перед отслеживанием проверьте фактический двоичный файл:

./vtracer --version
./vtracer --help

Наша команда версии вернула vtracer 1.0.0-alpha.4. Если в вашей справке не указан флаг ниже, используйте документацию для установленного интерфейса. Пакет Python – это отдельный интерфейс; Аргументы ключевых слов Python и флаги CLI не являются взаимозаменяемыми.

В официальной документации проекта описаны трассировка цвета, элементы управления палитрой и интерфейс командной строки. В этой статье используется этот локальный исполняемый файл, а не сообщается о тестировании демо-версии браузера или привязки Python.

1. Сохраните базовую линию, на которой намеренно остаются небольшие отметки.

Начните с простой трассировки, с которой вы сможете сравнить позже:

./vtracer artwork.png baseline.svg \
  --mode polygon --color-precision 8 --filter-speckle 0

Мы использовали подгонку полигонов, поскольку наше контролируемое изображение содержит области с прямыми краями. Это базовая линия для плоского рисунка, а не универсальная настройка для каждой фотографии или изогнутой иллюстрации.

Три названных варианта отвечают на разные вопросы:

Откройте baseline.svg рядом с PNG. Прежде чем менять настройки, определите несколько критических областей: цвет бренда, небольшой изолированный акцент, тонкую деталь или зазор, разделяющий две фигуры. Гладкий крупный силуэт способен скрыть потерю любого из этих качеств.

Иллюстрация

2. Сравните ограничение цвета с фиксированной палитрой.

Тестируемый интерфейс командной строки предлагает --max-colors для верхнего предела цвета и --palette для предоставленных шестнадцатеричных цветов. Палитра – это набор цветов, которые вы планируете использовать в графическом объекте. Решите, какие цвета должны оставаться разными, прежде чем просить трассировщика уменьшить их.

Этот вариант сохраняет базовые параметры постоянными и добавляет ограничение на три цвета:

./vtracer artwork.png fewer-colors.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --max-colors 3

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

Если у вас уже есть предполагаемая палитра, вместо этого протестируйте предоставленные цвета:

./vtracer artwork.png fixed-palette.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --palette '#ffffff,#17324d,#298d83,#d49c32'

Нашим исходным золотом было #e7b64c; в этой предоставленной палитре вместо нее использовался #d49c32. В сохраненном SVG использовалось это новое золото, сохранив при этом указанные темно-синий, бирюзовый и белый цвета. Это был намеренный выбор цвета, а не сохранение исходной палитры. Для более широкого принятия решения о том, какие цвета можно объединить, не теряя смысла, используйте Руководство по уменьшению палитры SVG.

3. Проверьте фильтрацию небольших областей на отдельной копии.

Вернитесь к параметрам базовой линии, затем измените только фильтр спекл:

./vtracer artwork.png filtered.svg \
  --mode polygon --color-precision 8 --filter-speckle 8

Пятны – это небольшие изолированные области, которые могут быть нежелательным шумом или преднамеренным изображением. Один только их размер не скажет вам, что именно. В нашем приборе как изолированные 2 × 2, так и 8 × 8 синих меток были видны на базовой линии и исчезли в этом отфильтрованном варианте.

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

Еще раз проверьте цвета. В нашем отфильтрованном SVG рядом с белым появился #fefefe. Это наблюдение является причиной для проверки фактической выходной палитры после детального изменения, вместо того, чтобы предполагать, что один параметр влияет только на свойство, указанное во флаге.

Что показали четыре сохраненных файла

Мы создали оригинальный PNG-изображение размером 384 × 256 с белым фоном, темно-синей рамкой с белым центром, бирюзовым треугольником, золотым прямоугольником и двумя изолированными темно-синими квадратными знаками. Все четыре преобразования использовали один и тот же ввод и режим многоугольника. В таблице указаны фактическая разметка SVG и независимые рендеры, а не целевой редактор или физический тест.

Все четыре SVG содержали пути и не содержали элементов изображения. Эти факты устанавливают фактическую трассировку в этих файлах, но не оценивают контуры и не доказывают успешное редактирование в другом приложении. Центр и фон белой рамки в этом эксперименте непрозрачны; это не тест на прозрачность PNG.

Для исходных цветов и намеренных знаков этого прибора мы бы сохранили базовую линию. Вариант с фиксированной палитрой подходит для отдельной работы по преднамеренной замене золота. Файлы с уменьшенным цветом и отфильтрованные файлы не соответствуют конкретным требованиям к хранению. Ни один из этих вариантов не устанавливает универсальную лучшую предустановку или сравнение с другим трассировщиком.

Выберите файл, который вы можете объяснить

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

Карта оценки качества трассировки добавляет проверки контура, возможности редактирования и назначения, помимо этого эксперимента с палитрой и деталями. Для явного монохромного рабочего процесса Руководство Potrace PNG-to-SVG описывает другую задачу трассировки.

Храните исходный и принятый SVG вместе. Если вы хотите попробовать тот же PNG в Интернете, начните бесплатно с PerfectVector и сверьте предполагаемые цвета предварительного просмотра и мельчайшие необходимые детали с исходным кодом.

Часто задаваемые вопросы

Может ли VTracer преобразовать цветной PNG в реальные пути SVG?

Да. Все четыре файла в нашем протестированном рабочем процессе CLI содержали пути и не содержали элементов изображения. Полезный результат по-прежнему зависел от того, какие цвета и небольшие области остались после выбранных настроек.

Гарантирует ли max-colors 3 ровно три цвета?

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

Почему после фильтрации исчезли мелкие отметки?

Настройка спекла позволяет отбрасывать небольшие области. Обе намеренные квадратные метки в нашем тестовом образце исчезли при значении фильтра-спекл 8. Сравните с базовой линией с низким уровнем фильтра и уменьшите настройку, если вашему произведению нужны эти области.

Могу ли я вставить эти флаги в пример Python VTracer?

Используйте интерфейс и версию, которую вы установили. В этом руководстве тестировался исполняемый файл версии 1.0.0-alpha.4 и его поддержка CLI. В примерах привязки Python используются собственные аргументы функций и документация.

Источники

1. Официальный проект VTracer — трассировка цвета, использование CLI и параметры палитры/детализации.
2. Выпуск VTracer 1.0.0-alpha.4 — исполняемый файл с привязкой к версии, используемый для этого рабочего процесса.
3. Пакет VTracer Python — отдельный интерфейс привязки Python, отличающийся от тестируемого CLI.