AutoTrace: PNG в SVG с осевыми линиями

Чтобы преобразовать PNG в SVG с осевой линией с помощью автономного интерфейса командной строки AutoTrace, добавьте --centerline, запросите вывод SVG и назовите сохраненный файл. Затем проверьте геометрию. Наш элемент управления AutoTrace 0.40.0 создал путь, нарисованный с помощью SVG-обводки и без цветовой заливки, но этот один элемент пути содержал два отдельных открытых подпути. Небольшое количество элементов пути SVG не является доказательством непрерывности маршрута рисования.

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

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

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

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

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

Убедитесь, что вы используете автономный интерфейс командной строки AutoTrace.

В этом руководстве используется установленный исполняемый файл autotrace, описанный в официальном проекте AutoTrace. AutoTracer.org — это служба загрузки в браузере с собственным интерфейсом; его элементы управления не являются командами ниже. Центральный интерфейс Inkscape — еще один путь к этой задаче. Руководство по рисованию в однострочный SVG описывает рабочий процесс графического интерфейса, подготовку исходного кода, очистку и последующие проверки плоттера.

Вам понадобится установленный исполняемый файл AutoTrace, терминал, разрешенный PNG и программа просмотра SVG или текстовый редактор. Поместите рабочую копию с именем line-control.png в отдельную папку и сохраните оригинал. Наш тестовый образец представлял собой специально созданный 160 × 120 RGB PNG: толстый черный вертикальный стержень с двумя правыми полосами на непрозрачном белом фоне.

Проверьте установленную сборку перед отслеживанием:

autotrace --version
autotrace --help
autotrace --list-input-formats
autotrace --list-output-formats

Наша версия вернула AutoTrace version 0.40.0. Ее списки форматов включали входной PNG и выходной SVG. В проекте отмечают, что поддержка формата зависит от сборки. Если PNG отсутствует в вашем фактическом списке ввода, разрешите поддержку ввода этой сборки, прежде чем копировать команду преобразования.

1. Сохраните контурную ссылку SVG.

Сначала сохраните обычную трассировку под собственным именем файла:

autotrace --background-color FFFFFF \
  --output-format svg --output-file outline.svg line-control.png

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

Фактический outline.svg содержал один закрытый путь с fill:#000000; stroke:none;. Оно описывало границу густой черной области. Более подробное объяснение рисованных линий, представленных фигурами, заполненными цветом, см. в разделе Штриховые рисунки в SVG.

2. Добавьте осевую линию и сохраните отдельный SVG.

Запустите тот же источник с опцией центральной линии и новым именем выходного файла:

autotrace --background-color FFFFFF \
  --output-format svg --output-file centerline.svg \
  --centerline line-control.png

В официальном проекте и руководстве трассировка средней линии отличается от трассировки контура. Наш сохраненный centerline.svg имел stroke:#000000; fill:none;, один элемент пути и отсутствие элемента изображения. Его геометрия следовала тонким маршрутам через толстые области источника, а не заполняла их граничную форму.

Мы также протестировали тот же источник без явной опции белого фона:

autotrace --centerline --output-format svg \
  --output-file centerline-background-retained.svg line-control.png

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

3. Проверяйте сохраненные маршруты, а не только количество путей.

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

подпуть — это отдельный контур внутри элемента пути. В данных пути SVG M запускает подпуть, а Z закрывает его, как определено в спецификации путей SVG. На нашем пути по центральной линии было две команды M и не было команды Z. Соответствующие сохраненные данные с добавлением пробелов для чтения были:

M30 30L30 75
C30 80.0707 28.3961 88.5616 31.6034 92.8519
C35.7319 98.3743 47.9272 96 54 96L117 96
M31 56L87 56

Первый маршрут начинается вдоль вертикального ствола в точке x = 30. Второй начинается в точках x = 31, y = 56. Это отдельное начало не является свидетельством присоединенной ветви. Даже этот простой вход требует проверки конечной точки, прежде чем кто-либо будет рассматривать его как непрерывный маршрут.

Иллюстрация

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

Восстановление после неудачной проверки

Сохраните принятый SVG с исходным PNG, версией AutoTrace и полной командой. Проверка завершения этой задачи CLI представляет собой сохраненный SVG с предполагаемыми путями рисования, представленными обводками SVG и проверенными разрывами. Мы не тестировали принимающее приложение, встроенное редактирование, физическое рисование пером или физическую резку. Используйте очистку и проверку плоттера в однострочном руководстве для принятия следующих решений; автоматическая трассировка не является доказательством идеальной реконструкции ветвей.

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

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

Что такое команда AutoTrace для преобразования осевой линии PNG в SVG?

Используйте autotrace с --centerline, --output-format svg, местом назначения --output-file и входным PNG. Сначала проверьте установленную версию и поддерживаемые входные форматы, затем проверьте обводку, заливку и маршруты сохраненного SVG.

Всегда ли один путь SVG представляет собой одну непрерывную осевую линию?

Нет. Элемент пути может содержать несколько подпутей. Наш фактический SVG с осевой линией имел один элемент пути, но два открытых подпути, поэтому само по себе количество элементов не доказывало непрерывности маршрута.

Нужна ли опция белого фона?

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

Может ли PerfectVector создать такую ​​же осевую линию?

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

Источники

1. Официальный проект AutoTrace — автономный интерфейс командной строки, поддержка центральной линии, форматы ввода, зависящие от использования и сборки.
2. Руководство по команде AutoTrace — параметры центральной линии, фона, выходного файла и формата вывода.
3. Спецификация путей W3C SVG — подпути, команды перехода и замыкание.
4. AutoTracer.org — отдельная служба браузера, отличающаяся от установленного CLI.