Трассировка растра в Vectorpea: настройки и экспорт SVG

Vectorpea имеет встроенную трассировку Vectorize Bitmap. Выберите растровое изображение, используйте кнопку «Векторизовать растровое изображение», которая появляется на панели инструментов, проверьте настройки, затем подтвердите и экспортируйте в формате SVG. Наш исходный трехцветный PNG создал три реальных контура SVG с заданными заливками и открытым центром рамки. Сохраненный файл имеет большее значение, чем плавный предварительный просмотр холста.

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

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

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

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

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

Используйте текущее приложение Vectorpea, затем выберите растровое изображение.

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

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

В нашем примере мы создали новый документ и вставили исходный PNG с помощью команды Edit → Paste (Правка → Вставить). Растр появился в документе с именем image.ai. Выберите это растровое изображение на холсте. Кнопка Vectorize Bitmap (Векторизировать растровое изображение) появится на панели инструментов под главным меню. Это было непосредственно перед элементом управления «Непрозрачность» в тестируемом сеансе.

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

Запишите базовую линию перед изменением настроек трассировки.

Нажмите Vectorize Bitmap (Векторизовать растровое изображение), чтобы открыть собственное диалоговое окно. В тестируемом диалоговом окне были доступны Цвета, Мультфильм/Фото, Уменьшить шум и Объединить цвета, а затем нажать OK (ОК). В нашем захваченном сеансе приложения использовались корейские метки интерфейса; имена здесь являются их английскими эквивалентами.

Мы использовали это наблюдаемое состояние настроек для исходного элемента управления с плоским цветом:

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

Нажмите OK (ОК), если хотите применить трассировку. В нашем документе на панели «Слои» затем отображались Path 0, Path 1 и Path 2 в разделе Background. Эти записи являются полезной первой проверкой того, что вы просматриваете трассировку, но экспортированный SVG все еще требует проверки.

Фактический след Vectorpea

Экспортируйте трассировку в формате SVG.

При наличии трассированного изображения выберите File → Export As → SVG (Файл → Экспортировать как → SVG), а затем Save (Сохранить) в процессе экспорта. Сохраните исходный PNG отдельно и дайте SVG отдельное имя файла, чтобы вы могли сравнить их позже.

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

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

Что на самом деле произвел первоначальный элемент управления

Мы создали неконфиденциальный PNG-изображение размером 320 × 240 с темно-синей рамкой и пустым центром, золотым треугольником и бирюзовым прямоугольником на прозрачном фоне. Мы вставили этот исходный растр в Vectorpea, применили записанные собственные настройки и сохранили полученный SVG. Затем мы проверили фактическую разметку и независимо отобразили сохраненный файл.

Значение «Цвета» было 20, однако этот экспорт содержал три элемента пути. Это значение параметра не является количеством объектов, которое вы можете прочитать из каждого результата. В более общем смысле, количество путей само по себе не скажет вам, сохранились ли нужные детали.

Путь к кадру использовал fill-rule="evenodd". правило заполнения определяет, какие части пути считаются внутренними; Спецификация правила заполнения SVG объясняет, как вложенные подпути могут оставлять отверстие. Проверьте сохраненный рендеринг на контрастном фоне, а не предполагайте, что белый центр является прозрачным.

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

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

Используйте нетронутый растр рядом с сохраненным SVG и проверьте четыре вещи:

1. Силуэт и зазоры: сравните внешний контур, углы, стойки и узкие промежутки до нужного вам размера.
2. Цветовые области: сравните важные заливки с предполагаемой палитрой. Область, которая выглядит близко, может все же нуждаться в целенаправленной цветовой коррекции.
3. Пустое пространство: поместите контрастный фон позади SVG. Он должен быть виден через необходимые отверстия и внешние зоны.
4. Объекты и холст: проверьте структуру пути и границы документа. Если дальнейшее редактирование имеет значение, попробуйте выполнить запланированное редактирование на копии и проверьте сохраненный результат.

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

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

Есть ли в Vectorpea встроенная функция векторизации растровых изображений?

Да. В тестируемом текущем приложении при выборе вставленного растра на панели инструментов появляется кнопка «Векторизировать растровое изображение». При применении этого диалогового окна были созданы видимые записи путей, а фактический экспорт SVG содержал пути без встроенного изображения.

Следует ли мне следовать инструкциям меню изображения Photopea в Vectorpea?

Используйте текущие элементы управления Vectorpea. В нашем запуске Vectorpea использовалась кнопка на панели инструментов, которая появлялась после выбора растра. Документированное меню изображения Photopea относится к отдельному рабочему процессу приложения.

Означает ли значение Colors 20, что в SVG будет 20 путей?

Нет. Наш тестовый образец использовал Colors 20 и экспортировал три пути. Проверяйте фактические объекты и предполагаемые области, а не рассматривайте значение параметра как гарантированное количество путей.

Сохранились ли в ходе теста исходные цвета и отверстие рамки?

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

Источники

1. Приложение Vectorpea — встроенные элементы управления трассировкой и завершенный рабочий процесс экспорта SVG.
2. Документация по растровому изображению Photopea Vectorize — определяет отдельный рабочий процесс меню Photopea, который может отображаться в результатах поиска.
3. Проблема 72 Vectorpea — исторический контекст запроса функций, отличный от текущих данных о приложении.
4. Правила заполнения SVG W3C — вложенные подпути и правило заполнения Evenodd.