Векторизация изображения в Boxy SVG: трассировка или импорт контуров?

Boxy SVG умеет трассировать изображение генератором Vectorize. Разработчик подтвердил появление трассировки в версии 3.35.0 вместе с Pixelate, Triangulate и Primitivize. Старые советы, называющие ручную обводку единственным способом, не учитывают это дополнение.

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

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

Выберите геометрию, с которой хотите работать

У Vectorize и остальных генераторов общая широкая цель: преобразовать растровую информацию в векторную графику. Но визуальные задачи различаются. В обсуждении Triangulate и Primitivize разработчик описывает геометрическое приближение, включая выбор треугольников или прямоугольников в Primitivize.

Используйте это различие для выбора начального способа:

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

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

Иллюстрация вариантов геометрии

Попробуйте встроенную трассировку, сохранив исходник

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

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

Меняйте по одному доступному параметру трассировки и сравнивайте одну и ту же мелкую деталь после каждой попытки. Для кружки следите за отверстием ручки и стыком ручки с чашкой. Сохраните вариант с этими деталями перед экспериментами с упрощением. Полезную универсальную настройку для всех исходных изображений обещать нельзя.

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

Проверяйте отверстие ручки перед упрощением контуров

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

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

Для примера кружки выполните проверки по порядку:

1. Посмотрите на результат без растрового исходника позади. Убедитесь, что чашка и ручка выглядят полными.
2. Проверьте ручку на контрастном фоне. Также изучите узкие просветы между декоративными отметками.
3. Выберите цветную область чашки и временно измените заливку. Посмотрите, затрагивает ли правка одну полезную область или множество мелких частей.
4. Проверьте внешний контур инструментами редактирования контуров. Измените маленький участок и отмените правку, чтобы убедиться, что работаете с нужной геометрией.
5. Уменьшите графику до размера значка меню. Оцените читаемость ручки и полезность мелких граней.

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

Импортируйте отдельную трассировку, если это подходит задаче

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

В описании Boxy SVG от разработчика в Google Play перечислены редактирование геометрии, операции с контурами, сохранение SVG/SVGZ и инспектор кода SVG/CSS. Они полезны для доработки независимо от того, получены ли контуры встроенной трассировкой, внешней конвертацией или ручным рисованием.

Проверяйте импортированную графику вместо доверия расширению. Элемент image в SVG может ссылаться на PNG или JPEG, поэтому SVG способен содержать растр. Если кружка остаётся объектом изображения, открытие в векторном редакторе не превратило её в контуры. Наше руководство по SVG-файлам с растровыми изображениями объясняет, как распознать смешанную графику.

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

Когда предпочтительнее ручной рисунок или растр

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

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

Частые вопросы

Есть ли в Boxy SVG автоматическая трассировка изображений? Да. Разработчик описывает Vectorize как функцию трассировки, появившуюся в версии 3.35.0. Если вы не можете её найти, проверьте редакцию и версию вместо использования старых инструкций только о ручной обводке.

Vectorize и Triangulate — одно и то же? У них разные цели. Начните с Vectorize, если нужны трассированные контуры. Изучайте геометрические генераторы, когда желаемая графика должна быть гранёной или иначе стилизованной, и проверяйте пригодность полученных частей для нужных правок.

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

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

Источники

1. Ответ разработчика Boxy SVG в Mac App Store — подтверждение разработчика о Vectorize и других генераторах в версии 3.35.0.
2. Обсуждение геометрических генераторов разработчиком Boxy SVG — объяснение Triangulate и Primitivize создателем, отдельно от мнений других пользователей.
3. Boxy SVG в Google Play — описание разработчика о редактировании, операциях с контурами, сохранении и проверке кода.
4. W3C — правила заливки SVG 2 — определение внутренних областей контуров.
5. W3C — встроенное содержимое SVG 2 — возможность ссылок на растровые изображения внутри SVG.

---

Выбирайте геометрию, подходящую следующей правке. Если поможет отдельная трассировка, попробуйте своё изображение в PerfectVector, откройте SVG в Boxy SVG и проверьте самое маленькое важное отверстие и область для перекрашивания.