Geometrize: экспорт изображения в SVG из фигур

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

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

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

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

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

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

Решите, подходит ли геометрическая аппроксимация изображению.

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

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

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

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

Откройте исходный код и запустите пример ограниченного прямоугольника.

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

1. Выберите Пауза, если демо-версия запущена, а затем разверните Настройки.
2. Для этого небольшого примера установите для параметра Максимальное ограничение фигур значение 20.
3. Выберите Open Image (Открыть изображение) и выберите разрешенный источник. Убедитесь, что холст изменится на ваше произведение искусства.
4. В настройках выберите Прямоугольники и отключите другие типы фигур. Нашим начальным выбором были «Повернутые эллипсы», которые мы очистили.
5. Для этого сравнения оставьте оставшиеся значения фиксированными. Мы использовали непрозрачность формы 128, начальную непрозрачность фона 255, случайные фигуры на шаг 50 и мутации формы на шаг 100.
6. Выберите Выполнить. В нашем тесте значение Добавленные фигуры достигло 20, а элемент управления вернулся в состояние Выполнить после остановки ограниченного процесса.
7. Выберите Save Svg (Сохранить Svg), сохраните загруженный файл и сравните его изображение с исходным.

В объяснении к демо описаны функции «Запуск/Пауза», «Шаг», «Открыть изображение», «Сброс» и параметры сохранения. Шаг добавляет один примитив, если вы хотите поэтапно проверить процесс. Сброс очищает текущие фигуры, поэтому сохраните результат, который хотите сохранить, прежде чем начинать снова.

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

Правильно прочитайте сохраненное количество фигур

Наш загруженный файл имел размер 2292 байта, заявленную ширину 384 и высоту 256. Проверка XML обнаружила 20 элементов <rect> и ни одного элемента <image>. Прямоугольник сам по себе является векторной геометрией; его не обязательно сериализовать как <path>, чтобы считать векторной фигурой. Спецификация базовых фигур SVG определяет прямоугольный элемент.

Один из этих 20 прямоугольников был непрозрачным фоном. Остальные 19 имели fill-opacity примерно 0.502. Таким образом, подсчет не означал 20 различных объектов дизайна переднего плана и не означал один прямоугольник для каждой области оригинала.

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

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

Сохраняйте файловую структуру отдельно от визуального стиля.

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

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

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

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

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

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

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

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

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

Экспортирует ли Geometrize SVG из существующего изображения? Да. Веб-демо предоставляет элементы управления «Открыть изображение» и «Сохранить Svg». Наш фактический запуск браузера сохранил SVG, содержащий геометрию прямоугольника, из загруженного элемента управления.

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

20 — это количество фигур по умолчанию или максимальное? Нет. Мы намеренно выбрали 20 для этого ограниченного примера. Мы не проверяли мощность инструмента и не сравнивали качество при большем количестве.

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

Источники

1. Geometrize — домашняя страница проекта — предполагаемый подход преобразования изображения в геометрические примитивы.
2. Сэм Твидейл — веб-демо Geometrize — здесь используются фактические элементы управления исходным изображением, настройками, запуском и сохранением SVG.
3. W3C — базовые фигуры SVG 2 — прямоугольные элементы представляют собой векторную геометрию.
4. W3C — непрозрачность заливки SVG 2 — как непрозрачность применяется к внутренней окраске фигуры.
5. PerfectVector — Факты о продукте — Предварительный просмотр и разблокированный рабочий процесс редактирования/экспорта.

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