Трассировщик изображения в SVG

Инструмент Трассировщик изображения в SVG превращает PNG, JPG или любое другое растровое изображение в чистый, бесконечно масштабируемый вектор SVG. В отличие от серверных трассировщиков, которые загружают ваш файл, или «фальшивых» SVG, которые просто встраивают растр в формате base64, этот инструмент работает полностью в вашем браузере — квантуя изображение по цветовым слоям и повторно прорисовывая контур каждого слоя в реальные векторные контуры с помощью комбинации обхода границ, упрощения Рамера–Дугласа–Пекера и сглаживания углов Чайкина. Перетащите логотип, иконку, эскиз или фотографию, наблюдайте, как параллельное превью перестраивается в режиме реального времени, а затем скопируйте разметку SVG или скачайте файл .svg, который можно редактировать в Figma, Illustrator или Inkscape.

Что делает этот трассировщик особенным

Как это работает (5-этапный конвейер)

Инструкция по использованию

1. Загрузите растровое изображение. Перетащите файл PNG/JPG в зону загрузки, кликните для обзора, вставьте из буфера обмена (Ctrl+V) или нажмите на любой из встроенных примеров, чтобы увидеть трассировщик в действии.
2. Выберите предустановку. «Логотип» — для знаков с 2–4 плоскими цветами, «Силуэт» — для контрастных вырезанных фигур, «Эскиз линии» — для нарисованных от руки контуров, «Фотопостер» — для стилизованных постеров, «Детализация» — для точного вывода с палитрой до 10 цветов.
3. Настройте ползунки. Цветовые слои определяют, сколько уникальных цветов сохранит трассировщик. Сглаживание убирает пиксельные лесенки. Упрощение сглаживает длинные прямые участки (меньше = больше деталей, больше = меньше размер файла). Разрешение трассировки задает внутреннюю рабочую ширину.
4. Скопируйте или скачайте. Используйте Копировать SVG для получения исходного кода разметки, Скачать .svg — для редактируемого векторного файла или Скачать .png — для рендеринга очищенного SVG обратно в растр высокого разрешения.

Советы для идеальной трассировки

• Начинайте с высококонтрастных изображений. Однотонный фон и четкие края трассируются намного лучше, чем фотографии с обилием градиентов.
• Используйте подходящую предустановку. Стандартная предустановка «Логотип» рассчитана на 3 плоских цвета — на обычной фотографии она будет выглядеть странно. Для реалистичных изображений переключитесь на «Фотопостер» или «Детализация».
• Сначала увеличивайте упрощение, затем сглаживание. Упрощение удаляет лишние точки, а сглаживание смягчает то, что осталось. Такой порядок действий сохраняет результат компактным И плавным.
• Снижайте разрешение трассировки для логотипов. 240 px вполне достаточно для иконки — более высокие значения лишь создадут лишний шум в контурах.
• Включайте «Прозрачный фон», если планируете встроить SVG в цветной макет. В противном случае трассировщик заполнит фон белым цветом.
• Для набросков используйте «Контурный режим». Он сначала применяет фильтр Собеля, а затем трассирует полученную карту краев — отлично подходит для графики и карандашных рисунков.

Где применимы полученные SVG

Векторные логотипы и иконки остаются четкими при любом размере экрана и DPI — от фавиконки 16×16 до баннера 4K. Трассированные SVG также представляют собой отличную основу для дальнейшего проектирования: откройте файл в Figma, Adobe Illustrator или Inkscape, и вы сможете перекрасить, изменить форму или анимировать любой отдельный контур. Кроме того, SVG — это первоклассный веб-формат: вставьте разметку инлайн в HTML, чтобы избежать лишнего сетевого запроса, добавьте её в CSS как background-image через URI-схему data: или анимируйте штрихи контуров с помощью stroke-dasharray для создания эффекта рисования от руки.

Технические основы алгоритма

Классическим золотым стандартом в этой области является Potrace (Петер Селингер, 2003), использующий аппроксимацию многоугольниками и оптимизацию кривых для создания исключительно плавных путей Безье. Полный порт Potrace занимает несколько тысяч строк кода, поэтому данный инструмент использует более легкий, но не менее надежный конвейер: обход границ в окрестности Мура для извлечения контуров, Рамера–Дугласа–Пекера (также известный как алгоритм Дугласа–Пекера) для упрощения путей и алгоритм отсечения углов Чайкина для сглаживания. Каждый этап выполняется за время O(n) относительно длины пути, благодаря чему вся трассировка обычного изображения размером 240 px занимает значительно меньше секунды.

Конфиденциальность и безопасность

Все процессы выполняются локально. Элемент <input type="file"> считывает ваш файл напрямую в браузер, Canvas API извлекает пиксельные данные на вашем устройстве, а JavaScript-трассировщик никогда не отправляет сетевых запросов с вашим изображением. Вы можете убедиться в этом лично, открыв вкладку DevTools → Network во время трассировки — там не появится никакого исходящего трафика. Это делает инструмент абсолютно безопасным для конфиденциальных логотипов, неопубликованных брендовых активов и личных фотографий.

FAQ

Загружается ли мое изображение на ваш сервер?

Нет. Трассировщик изображения в SVG работает на 100% на стороне клиента. Ваше растровое изображение считывается в браузер, обрабатывается с помощью Canvas API, трассируется на чистом JavaScript и никогда не отправляется по сети. Вы можете полностью отключить Wi-Fi, и трассировщик продолжит работать.

Какие форматы изображений я могу трассировать?

Любой растровый формат, который способен отобразить ваш браузер: PNG, JPG, GIF (первый кадр), WebP и BMP. Вы также можете трассировать уже существующий SVG (он будет предварительно растрирован), что очень удобно для упрощения сложных векторов или повторного квантования их цветов.

С какой предустановки мне лучше начать?

Для одноцветных логотипов и иконок выбирайте предустановку Логотип. Для чистых черно-белых силуэтов используйте Силуэт. Для рисунков и графики подойдет Эскиз линии. Для обычных фотографий используйте Фотопостер или Детализация. Затем немного подвигайте ползунки — интерактивное превью сразу покажет, за что отвечает каждый элемент управления.

Почему мой трассированный SVG выглядит угловатым?

Увеличьте ползунок Сглаживание, чтобы скруглить острые углы пикселей, и поднимите значение ползунка Упрощение, чтобы объединить длинные прямые отрезки. Более высокое Разрешение трассировки также захватывает больше деталей перед началом обработки, формируя более изящные контуры.

Могу ли я отредактировать полученный SVG позже?

Да. На выходе формируется стандартная разметка SVG с одним тегом <path> на каждый цветовой слой (или один контур на силуэт в монохромном/контурном режимах). Откройте его в Inkscape, Illustrator, Affinity Designer, Figma или любом текстовом редакторе, чтобы перекрасить, изменить форму или анимировать отдельные контуры. Пути упорядочены по порядку их отрисовки (от светлых к темным), поэтому структура слоев в любом векторном редакторе будет им полностью соответствовать.

Какого размера может быть мое исходное изображение?

Абсолютно любого — однако трассировщик внутри себя масштабирует растр до выбранного вами Разрешения трассировки (от 64 до 512 px). Повышение разрешения сохраняет мелкие детали, но увеличивает итоговый размер файла SVG. Для большинства логотипов оптимальным выбором является 200–300 px; для проработанных фотографий попробуйте выставить 400–512 px.

Будет ли полученный SVG выглядеть в точности как растровое изображение?

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

Могу ли я использовать полученный SVG в коммерческих целях?

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