Векторизация PNG в SVG

PNG в SVG

Векторизовать PNG — значит обвести его пиксели и превратить их в контуры, которые можно масштабировать, перекрашивать и редактировать. Этот инструмент запускает алгоритмы Potrace и ImageTracer в браузере, чтобы преобразовывать плоско окрашенные логотипы, иконки и линейные рисунки в чистый SVG. Фотографические PNG и мягкие градиенты векторизуются плохо; используйте его для изображений с резкими краями и ограниченной палитрой.

Как работает векторизация

  1. 1

    Перетащите PNG

    Лучший результат дает четкий исходник: не менее 512 px по длинной стороне и плоские цветовые заливки.

  2. 2

    Выберите режим

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

  3. 3

    Настройте порог и сглаживание

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

  4. 4

    Просмотрите и скачайте

    Сравните растровое изображение и векторную версию рядом. Когда результат устроит, скачайте SVG.

Что хорошо векторизуется

Источник Ожидаемый результат
Черный логотип на белом фоне Чистый одноконтурный SVG, близкий к пиксельному оригиналу
Плоская иконка в 2–4 цветах Хороший SVG с несколькими контурами и четкими краями
Ручной чернильный эскиз Пригоден при сглаживании 3–5
Фотография Плохо — миллионы цветов превращаются в шумные пятна
Сглаженный скриншот Допустимо после пороговой обработки, но теряются субпиксельные детали

Важные настройки

  • Порог (монохромный режим). Граница между тем, что станет заливкой, и тем, что станет прозрачным. Значение по умолчанию — 128; снижайте его для тонких линий, повышайте для зернистого фона.
  • Количество цветов (многоцветный режим). Число ступеней палитры. 4–8 достаточно для большинства логотипов. Больше 16 часто дает шумный результат, который SVG-просмотрщики отрисовывают медленнее.
  • Сглаживание / порог углов. Сильное сглаживание скругляет углы; это полезно для органических форм, но вредно для резких краев иконок.
  • Упрощение контуров. Уменьшает количество узлов. Агрессивное упрощение сокращает размер файла, но может деформировать тонкие штрихи.

После экспорта

Откройте SVG в Illustrator, Inkscape или Figma и проверьте плотность узлов. Контуры, очищенные вручную, почти всегда меньше и плавнее автоматической трассировки. Для логотипов, предназначенных для печати, часто лучше перерисовать знак вручную, используя векторный след как основу.

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

Векторная трассировка превращает области цвета в контуры. В фотографиях есть миллионы градиентов, поэтому результатом становится шумная мозаика из пятен. Для фотографий лучше подходят растровые форматы вроде JPG или WebP.

Да. Если исходный PNG имеет прозрачный фон, трассированный SVG сохранит эту прозрачность. Для JPG-источника сначала используйте инструмент удаления фона.

Да. SVG использует стандартные элементы <path> с абсолютными координатами, которые любой векторный редактор читает и позволяет править узел за узлом.

Идеально 512–2048 px по длинной стороне. Слишком маленькие иконки теряют детали; слишком большие изображения создают тысячи узлов и раздувают SVG.

Нет. Potrace работает как WebAssembly в браузере. Ничего не передается.

Сопутствующие инструменты

Генератор мемов

Создавайте мемы по популярным шаблонам вроде Drake, Distracted Boyfriend или Doge либо загружайте свое изображение. Верхний и нижний текст, шрифт Impact, обводка и тень.

Генератор QR-кодов

Создавайте QR-коды для URL, обычного текста, данных Wi-Fi, vCard и событий календаря. Скачивайте PNG или SVG без регистрации и водяных знаков.

Создание GIF

Преобразуйте серию изображений или короткое видео в анимированный GIF. Настройте частоту кадров, повторы и размер перед экспортом.

Генератор штрихкодов

Создавайте сканируемые 1D штрихкоды в Code 128, Code 39, EAN-13, UPC-A, ITF-14 и Codabar. Экспортируйте в PNG, SVG или PDF для печати.

Компрессор изображений

Сжимайте изображения JPG, PNG и WebP, уменьшая размер файла и сохраняя визуальное качество. Всё выполняется в браузере, без загрузки на сервер.

Апскейлер изображений

Увеличивайте изображения низкого разрешения в 2×, 3× или 4× с помощью ИИ-сверхразрешения или классической интерполяции, сохраняя важные детали.