Potrace: PNG в SVG с обработкой альфа-канала и отверстий

Чтобы преобразовать PNG в SVG с помощью Potrace, сначала подготовьте растровое изображение в оттенках серого, а затем проследите его с помощью potrace --svg. Для темных рисунков на прозрачных пикселях перед сохранением растрового изображения скомпонуйте изображение на белую подложку. Прежде чем принять SVG, проверьте формы с порогами и их внутренние отверстия.

Стандарт Potrace 1.16 читает PBM, PGM, PPM и BMP, а не PNG напрямую. В его официальном руководстве описана операция монохромной трассировки: промежуточные оттенки становятся черными или белыми. Приведенный ниже рабочий процесс создает сплошную геометрию с пустыми областями вместо сохранения непрерывных альфа-значений PNG.

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

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

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

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

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

Что нужно перед отслеживанием

Используйте установленный исполняемый файл Potrace, Python 3 с Pillow и исходный PNG. Этот рецепт был реализован с использованием Potrace 1.16 и Pillow 11.3.0. Сохраните копию входных данных и работайте в отдельной папке, чтобы каждый вариант порогового значения имел отдельное имя файла.

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

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

1. Устраните прозрачность перед сохранением растрового изображения.

PNG хранит цвет и непрозрачность отдельно. Альфа-канал описывает непрозрачность каждого пикселя. Спецификация PNG объясняет это представление; полностью прозрачный пиксель все еще может содержать значения RGB. Удаление альфа-канала не объединяет эти пиксели на белый фон, который вы, возможно, видели в программе просмотра изображений.

Чтобы получить темный знак, намеренно поместите изображение поверх белого. Этот фрагмент Python открывает artwork.png, объединяет его в белое изображение одинакового размера, преобразует результат в оттенки серого и сохраняет artwork.pgm:

from PIL import Image
 
src = Image.open("artwork.png").convert("RGBA")
matte = Image.new("RGBA", src.size, "white")
gray = Image.alpha_composite(matte, src).convert("L")
gray.save("artwork.pgm")

alpha_composite документация компании Pillow определяет второе изображение как наложенное на первое. Оба изображения здесь имеют одинаковые размеры и режим RGBA.

Откройте подготовленный PGM перед отслеживанием. Внешний фон должен быть белым, предполагаемый передний план — темным, а важные пробелы — видимыми. Черный прямоугольник на этом этапе — проблема предварительной обработки; изменение правил заполнения SVG позже не может восстановить отверстие, которое никогда не достигало трассировщика.

Иллюстрация

2. Отследить подготовленный PGM

Запустите это в папке, содержащей artwork.pgm:

potrace artwork.pgm --svg --blacklevel 0.5 --turdsize 2 --output artwork.svg

--blacklevel 0.5 выбирает отсечение оттенков серого. --turdsize 2 сохраняет явное подавление мелких пятен Potrace по умолчанию. Используйте новое выходное имя при изменении настройки, а затем сравните файлы, а не повторно перезаписывайте ссылку.

Измените один элемент управления за раз:

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

Что показали два оригинальных тестовых изображения

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

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

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

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

3. Проверьте дыры и фон в сохраненном SVG.

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

SVG составной путь может описывать внешний контур и внутреннее отверстие внутри одного объекта. Если отверстие уже отсутствует в прорисованной геометрии, вернитесь к PGM и порогу. Если он существует в одном средстве визуализации, но заполняется после импорта, вместо этого изучите интерпретацию пути принимающего приложения. В Руководстве по устранению дыр в SVG эти случаи разделены.

Проверьте сохраненный файл на наличие:

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

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

Когда подходит этот монохромный рабочий процесс

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

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

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

Может ли Potrace открыть PNG напрямую? Стандарт Potrace 1.16 принимает входные данные PBM, PGM, PPM и BMP. Сначала декодируйте PNG с помощью другого инструмента для работы с изображениями, явно укажите его прозрачность и сохраните поддерживаемое растровое изображение перед трассировкой.

Сохраняет ли Potrace прозрачность PNG? Монохромный рабочий процесс создает заполненную геометрию и пустые области. Он не сохраняет непрерывные альфа-значения PNG. Перед установкой порога наложите прозрачные пиксели на преднамеренную подложку, а затем проверьте пустые области SVG на контрастном фоне.

Является ли альфамакс альфа-настройкой PNG? Нет. Функция Alphamax Potrace контролирует обработку углов на трассируемых кривых. Он не определяет, как формируется канал непрозрачности PNG перед трассировкой.

Почему исчезла дыра? Проверьте, видно ли проем в подготовленном растровом изображении и выбранном пороге. Если порог заполнил его, измените подготовку или отсечку и вернитесь. Если SVG содержит отверстие, но его заполняет только принимающее приложение, проверьте там обработку составного пути и правила заполнения.

Источники

1. Potrace — вручную — поддерживаемые форматы ввода, монохромный порог, вывод SVG и названные параметры команды.
2. Pillow — Модуль изображения — композиция изображений RGBA и порядок, используемый в фрагменте подготовки.
3. W3C — спецификация PNG — образцы цвета и альфа-представление в изображениях PNG.
4. W3C — пути SVG — составные пути и внутренние контуры, которые могут описывать отверстия.

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