Слои PNGtoSVG: удаление цвета и метки совмещения

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

В этом рабочем процессе используется PNGtoSVG.com, текущий интерфейс которого включает отдельную классическую ссылку. Он следует за одним источником через базовую линию, удаление белого и экспорт регистрационных меток. Результатом является проверенный файл SVG; Импорт машин и выравнивание материалов по-прежнему нуждаются в собственных испытаниях.

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

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

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

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

Выберите цвета, которые вам нужно сохранить

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

Нашим первоначальным элементом управления был PNG-изображение RGB размером 384 × 256 на непрозрачном белом фоне. У него была темно-синяя рамка с белым центром, бирюзовым треугольником, золотым прямоугольником и двумя маленькими темно-синими квадратами. Мы повторно использовали его без изменений и протестировали работающий веб-сайт 8 ноября 2026 года. На сайте появилось предупреждение о низком разрешении для этого источника, которое по-прежнему видно на снимке экрана ниже.

Метод: Мы сохранили три фактических экспорта SVG и сравнили их XML, заливки и границы документа. Это один небольшой геометрический контроль, а не тест качества фотографий, сравнение PerfectVector или тест импорта/обрезки Cricut.

Сохраните базовую линию, затем удалите цвет белой палитры.

1. Откройте PNGtoSVG.com и используйте просмотр файлов, чтобы выбрать источник. Дождитесь векторного результата, а не полагайтесь на исходное изображение.
2. Сохраните автоматический стартовый результат для первого сравнения. В нашем прогоне использовались логотип/картинка, высокий уровень, цвета 10, детализация 84, сглаживание 0, крапинки 5 и углы 45; обнаруженная палитра содержала четыре цвета. Это записанные тестовые настройки, а не рекомендуемые настройки для каждого изображения.
3. Оставьте регистрационные отметки выключенными и используйте Download (Загрузить), чтобы сохранить baseline.svg.
4. Найдите запись белой палитры и выберите элемент управления ее удалением ×. Подождите, пока результат обновится, а затем сохраните отдельный файл white-removed.svg.
5. Сравните сохраненный результат с оригиналом, особенно с любыми предполагаемыми белыми деталями и небольшими изолированными отметинами.

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

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

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

Прежде чем считать слои, разберитесь с цветовыми путями.

Интерфейс отображал 11 путей для нашей базовой линии, но загруженный SVG содержал четыре элемента <path>. После удаления белого в интерфейсе отображалось 5 путей, а файл содержал три элемента пути.

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

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

На следующем этапе подготовки наше руководство по многоуровневому SVG отделяет организацию цвета от проекта, готового к использованию на компьютере. Если вам нужен один файл для каждого цвета, см. как разделить цвета SVG на файлы.

Добавляйте регистрационные метки только в том случае, если вам нужны средства выравнивания.

В разделе часто задаваемых вопросов PNGtoSVG его регистрационные метки описываются как соответствующая угловая геометрия, добавляемая к каждому цветовому слою. Это средства выравнивания цветных изображений. Здесь они не зарекомендовали себя как сенсорные метки Cricut Print then Cut или как замена собственному рабочему процессу печати и резки вашей машины.

Убрав белый цвет, включите регистрационные метки и сохраните третий SVG как white-removed-registration-marks.svg. Сравните его с немаркированным экспортом, а не перезаписывайте этот файл.

Наш отмеченный экспорт по-прежнему содержал три элемента пути. Каждый цветовой путь содержал одни и те же четыре квадратных подпути размером 8 × 8 в углах. Знаки расширили свой viewBox с 0 0 384 256 до -20 -20 424 296; его ширина и высота также изменились с 384 × 256 на 424 × 296.

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

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

Проверьте сохраненный файл перед созданием поделки.

Откройте принятый SVG независимо от предварительного просмотра веб-сайта. Убедитесь, что заданные цвета остались, удаленный белый цвет не стирает нужные изображения, а отдельные цветные фрагменты по-прежнему занимают ожидаемые позиции. Если метки включены, проверьте все четыре угла и границы нового документа.

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

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

Когда автоматическая трассировка является следующим полезным шагом

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

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

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

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

Удаление белого цвета меняет только цвет фона? Нет. PNGtoSVG описывает элемент управления × как удаление путей этого цвета. Прежде чем принять результат, проверьте все белые изображения, а также внешний фон.

Это следы датчика Cricut Print then Cut? Этот тест подтверждает наличие совпадающих квадратных меток совмещения в экспортированных цветовых путях. Он не подтверждает совместимость с процессом работы с сенсорными метками Cricut. Следуйте инструкциям принимающего приложения и проверьте нужную операцию до начала производства.

Источники

1. PNGtoSVG — Векторизатор изображений и часто задаваемые вопросы — Удаление текущей палитры, описание регистрационной метки и фактический интерфейс, использованный в этом тесте.
2. W3C — пути SVG 2 — одному элементу пути может принадлежать несколько подпутей.
3. W3C — системы координат SVG 2 — ViewBox и различие между координатной областью, используемые для описания помеченного экспорта.
4. PerfectVector — факты о продукте — бесплатный предварительный просмотр и разблокированные границы редактирования/экспорта.

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