> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Трассировка в SVGcode: проверьте экспорт фигур

> Нарисуйте плоское цветное изображение в SVGcode, скопируйте фактический SVG и проверьте его палитру, внутренние отверстия, фон и холст, прежде чем использовать файл в своем дизайне.

Source: https://perfectvector.com/ru/blog/svgcode-image-tracing

Language: ru
Author: Irene Kim
Published: 2026-11-02T08:00:00+09:00

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

Если вам нужен другой рабочий процесс браузера для уже имеющегося изображения, [просмотрите его бесплатно в PerfectVector](https://perfectvector.com/ru/image-to-vector). Вы должны разблокировать результат, прежде чем сможете его редактировать или экспортировать. Используйте ту же форму и цвет, что и ниже; в этом пошаговом руководстве не сравнивается качество вывода этих двух инструментов.

## Что отслеживает SVGcode и что нужно подготовить

[SVGcode](https://svgco.de/) преобразует растровые изображения в векторную графику SVG. Его автор описывает реализацию WebAssembly на основе Potrace, которая отслеживает цвет за цветом; [официальный репозиторий исходного кода](https://github.com/tomayac/SVGcode) документирует эту реализацию. Это объясняет подход, но экспортированный файл является доказательством вашего собственного произведения искусства.

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

Плоская метка с отдельными цветными областями — полезный первый ввод. Запишите цвета и отверстия, которые необходимо сохранить, прежде чем изменять настройки. Для фотографии или мягкого градиента решите, какие детали вы можете упростить; трассировка не может вывести каждую предполагаемую границу из пикселей. [Руководство по векторизации изображений](https://perfectvector.com/ru/blog/what-is-image-vectorization) более подробно объясняет решение преобразования растра в путь.

## 1. Загрузите изображение и выберите режим трассировки.

Откройте SVGcode и загрузите свое изображение. Для протестированного нами маршрута поместите фактическое изображение в буфер обмена и выберите **Вставить изображение**. Прежде чем что-либо настраивать, убедитесь, что предварительный просмотр показывает предполагаемое изображение, включая прозрачные области и мелкие детали интерьера.

Выбирайте **Color SVG** (Цветной SVG), если важны отдельные цветные области. Используйте **Monochrome SVG** (Монохромный SVG), если желаемым результатом является одноцветный силуэт. В этом пошаговом руководстве повсюду использовался цветной SVG; он не сообщает об отдельном монохромном тесте.

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

## 2. Изменяйте настройки, учитывая одну видимую деталь.

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

**Подавить крапинки** удаляет небольшие области. Поднятие его может помочь с случайными точками, но проверьте мелкие детали, которые вы хотели сохранить. **Постеризация входного изображения** уменьшает изменение цвета перед трассировкой; постеризация группирует цвета на меньшее количество уровней. [Пошаговое руководство по SVGcode](https://web.dev/case-studies/svgcode?hl=en) автора объясняет как элементы управления, так и постеризацию для каждого канала.

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

**Иллюстрация**

![Концептуальная палитра, открытая рамка и артборд, иллюстрирующие три отдельные проверки SVG.](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp)

*Палитра, отверстия и полотно — это отдельные проверки.*

### Что показал наш оригинальный тест с плоскими цветами

Мы создали 512 × 512 PNG с прозрачным фоном, темно-синюю прямоугольную рамку с отверстием, золотой прямоугольник и перекрывающийся бирюзовый прямоугольник. Мы вставили это исходное изображение в общедоступное приложение SVGcode, использовали Color SVG, Suppress Speckles 2 и Stroke Width 0, а затем скопировали два фактических вывода SVG.

В первом использовалась постеризация входного изображения с красным, зеленым и синим по 7 шагов каждый и альфа-каналом по 1 шагу. Во втором использовалось то же изображение со снятым флажком «Постеризовать входное изображение». В этом втором состоянии элементы управления RGB и альфа стали отключены.

| Проверять               | Оригинальный PNG                | Постеризация включена                 | Постеризация выключена                |
| ----------------------- | ------------------------------- | ------------------------------------- | ------------------------------------- |
| Сплошные цвета регионов | `#152b46`, `#e6aa3c`, `#3e948d` | Черный, `#d4aa00`, бирюзовый          | `#002a2a`, `#d4aa2a`, `#2a8080`       |
| Открытие рамы           | Прозрачный                      | Открыть в отрендеренном SVG           | Открыть в отрендеренном SVG           |
| Холст                   | 512 × 512 пикселей              | `viewBox="0 0 1024 1024"`             | `viewBox="0 0 1024 1024"`             |
| SVG-структура           | Растровый ввод                  | Три пути, без встроенного изображения | Три пути, без встроенного изображения |

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

## 3. Скопируйте SVG и сохраните фактическую разметку.

Когда предварительный просмотр будет готов, выберите **Copy SVG** (Копировать SVG). Подождите, пока **Optimizing SVG** (Оптимизация SVG) завершится, прежде чем читать или вставлять буфер обмена. В нашем случае немедленное чтение буфера обмена было пустым; чтение его после того, как оптимизация вернула разметку SVG.

Вставьте разметку в текстовый редактор и сохраните ее с расширением `.svg`, например `artwork-trace.svg`. Убедитесь, что он содержит элемент `<svg>` и закрывает `</svg>`, а не снимок экрана или документ с форматированным текстом. Сохраняйте отдельное имя файла для каждого варианта настроек, чтобы последующий экспорт не заменял вашу ссылку.

Это маршрут скопированной разметки, который мы завершили. SVGcode также отображает «Сохранить SVG», но это пошаговое руководство не подтверждает поведение встроенного диалогового окна сохранения файла или успешный импорт в другое приложение.

## 4. Проверьте цвета, отверстия и холст в сохраненном файле.

Откройте сохраненный SVG в программе просмотра или редакторе рядом с нетронутым исходным кодом. Проверьте это отдельно:

1. **Палитра:** сравнивайте важные заливки с предполагаемыми значениями цвета. Трасса может сохранять три региона, изменяя при этом все три цвета. Если требуются точные цвета, восстановите и проверьте предполагаемые заливки в редакторе.
2. **Проемы:** разместите контрастный фон позади произведения искусства. Новый фон должен проступать через намеченные отверстия и внешнее пространство. Фигура, окрашенная в белый цвет, может выглядеть как отверстие на белом фоне. [Справочник по прозрачному фону SVG](https://perfectvector.com/ru/blog/transparent-background-svg) показывает, как их отличить.
3. **Холст:** проверьте границы документа, а также границы графического изображения. **viewBox** определяет прямоугольник внутренних координат SVG; это не обещание физических размеров. Проверьте поля и размер в приложении, в котором вы будете использовать файл.
4. **Геометрия:** выберите важные области по отдельности и попробуйте немного перекрасить или переместить их, а затем отменить. Файл, содержащий пути, по-прежнему требует проверки возможности редактирования для предполагаемого задания.

SVG может представлять проем с несколькими контурами внутри одного составного контура; [Стандарт пути SVG](https://www.w3.org/TR/SVG2/paths.html) описывает подпути и дыры. Вам не нужен отдельный элемент пути для каждой видимой границы. И наоборот, небольшое количество путей само по себе не доказывает, что все запланированные детали сохранились.

Наша проверка завершения была цифровой: проверьте скопированную разметку и визуализируйте фактические SVG. Проем и внешнее пространство в обоих вариантах были прозрачными. Результаты импорта, печати или вырезания в редакторе назначения не тестировались. Для более широкой проверки передачи используйте [карту оценки качества векторной трассировки](https://perfectvector.com/ru/blog/evaluate-vector-trace-quality).

## Восстановление после первой неудачной проверки

| Что ты видишь                             | Что проверить дальше                                                                                                         |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Случайные точки остаются                  | Осторожно увеличивайте значение параметра «Подавление пятен», а затем перепроверьте намеренно мелкие детали.                 |
| Небольшая функция исчезает                | Сравните источник и настройку меньшего спекла, прежде чем пытаться использовать несвязанные элементы управления.             |
| Цвета различаются                         | Сравните экспортированные заливки с вашей палитрой; не думайте, что отключение постеризации восстанавливает точные значения. |
| Дыра выглядит заполненной                 | Проверьте контрастный фон, а затем проверьте, существует ли внутренний контур.                                               |
| У произведения искусства неожиданные поля | Сравните границы холста и произведения искусства; установите необходимый размер документа в целевом приложении.              |
| Копирование SVG не дает ничего полезного  | Дождитесь оптимизации, скопируйте еще раз и проверьте вставленный текст перед сохранением.                                   |
| Вставить изображение недоступно           | Проверьте разрешение буфера обмена и другие видимые параметры загрузки изображений приложения в вашем браузере.              |

Если отверстие остается неправильным, [Руководство по устранению неполадок с отверстиями SVG](https://perfectvector.com/ru/blog/svg-holes-fill-in) отделяет недостающую геометрию трассировки от интерпретации правила заполнения. Подробную информацию о рабочем процессе трассировки рабочего стола с помощью инструментов прямой очистки см. в разделе [Inkscape Trace Bitmap](https://perfectvector.com/ru/blog/inkscape-trace-bitmap).

Сохраните исходное изображение и принятый SVG вместе. Запишите любые исправления палитры или настройки холста, которые понадобятся следующему человеку. Если вы хотите опробовать существующую иллюстрацию в другом браузере, [начните с PerfectVector бесплатно](https://perfectvector.com/ru/image-to-vector) и проверьте силуэт и отверстия предварительного просмотра.

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

**Может ли SVGcode отслеживать PNG в реальных путях SVG?**

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

**Сохраняет ли отключение постеризации исходные цвета?**

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

**Почему холст SVG отличается от моего размера PNG?**

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

**Как узнать, что отверстие прозрачно?**

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

## Источники

1. [Приложение SVGcode](https://svgco.de/) — интерфейс трассировки изображений и текущие элементы управления.
2. [Пошаговое руководство автора SVGcode на web.dev](https://web.dev/case-studies/svgcode?hl=en) — поцветная трассировка, подавление пятен и постеризация.
3. [Официальный репозиторий SVGcode](https://github.com/tomayac/SVGcode) — реализация проекта и исходная документация.
4. [Пути W3C SVG](https://www.w3.org/TR/SVG2/paths.html) — составные пути, подпути и отверстия.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/svgcode-image-tracing)
- [Potrace: PNG в SVG с обработкой альфа-канала и отверстий](https://perfectvector.com/ru/blog/potrace-png-to-svg.md)
- [Лучшие ИИ-векторизаторы изображений 2026: выбор по задачам](https://perfectvector.com/ru/blog/best-ai-vectorizers-2026.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)