Vector Painter: трассировка растровых иконок в SVG

Бывают ситуации, когда открывать Illustrator, Figma или Inkscape ради одной небольшой иконки — неоправданно долго. Когда нужно превратить PNG-пиксельный логотип в чистый вектор, выровнять заваленные узлы или изменить цвет иконки перед вставкой в код, хочется иметь инструмент, который открывается мгновенно прямо в браузере.

Автоматическая конвертация растра редко даёт идеальный результат с первого раза. Трассировка создаёт базовую основу, но геометрии всё равно требуются ровные касательные, правильные типы узлов, удаление лишнего шума и точный контроль над палитрой.

Что такое Vector Painter

Vector Painter — это локальный браузерный трассировщик и векторный редактор. Инструмент решает три главные задачи:

• Автоматическая трассировка растра: превращение PNG, WebP и JPEG иконок в набор векторных контуров path.
• Ручное редактирование геометрии: точная подгонка опорных точек, касательных ручек Безье, масштабирование и трансформация фигур.
• Векторное рисование с нуля: создание иконок и иллюстраций с помощью Пера (P) и геометрических примитивов.

Все операции происходят на 100% локально. Редактор не отправляет ваши файлы на сервер и автоматически сохраняет рабочую сессию в локальном хранилище браузера.

Импорт изображений, SVG и кода

Раздел File поддерживает несколько удобных способов загрузки:

• Image — открывает растровые файлы (PNG, WebP, JPEG) для автоматической трассировки или использования в качестве подложки-референса.
• SVG — загружает существующий SVG-файл и превращает его содержимое в редактируемые векторные объекты.
• From text — позволяет вставить исходный SVG-код, отдельный фрагмент XML или строку атрибута d из тега <path>.

Любой файл можно просто перетащить методом drag-and-drop в область холста. При повторном импорте редактор спросит подтверждение замены, а случайно отменённое действие всегда можно восстановить через Undo.

Как работает трассировка растра в вектор

Когда вы загружаете растровое изображение, включение панели Trace запускает алгоритм векторизации:

1. Квантование цветов (1–12): вы задаёте количество ключевых цветов. Алгоритм автоматически объединяет близкие пиксели.
2. Сепарация фона: опция Separate background автоматически определяет фоновый цвет (например, белый или прозрачный) и не тратит на него палитру и контуры.
3. Выбор режима векторизации:
   • Filled shapes — строит контуры сплошных силуэтов, закрашенных областей и логотипов.
   • Centerlines — анализирует толщину линий и строит тонкие центральные векторные оси, что идеально подходит для штриховых иконок и чертежей.
   • Auto — автоматически выбирает оптимальный алгоритм в зависимости от контраста и структуры.
4. Тонкая настройка контуров:
   • Smoothness — отвечает за сглаживание ступенчатых пиксельных границ.
   • Corner threshold — определяет острые углы и предотвращает закругление там, где должен быть чёткий перелом.
   • Max stroke width (для Centerlines) — ограничивает максимальную толщину распознаваемого штриха.
   • Min area filter — отсекает мелкий пиксельный шум и случайные точки.

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

Векторный редактор и кривые Безье

После трассировки или при рисовании с нуля в распоряжении разработчика полный набор векторных инструментов:

• Select (V / S) — выделение и перемещение фигур. Позволяет трансформировать объекты, менять размеры за маркеры габаритного контейнера и вращать фигуры.
• Edit nodes (A / N) — инструмент прямого редактирования узлов контура:
  • Перетаскивание точки меняет её положение на холсте.
  • Alt + перетаскивание узла вытягивает симметричные касательные ручки Безье.
  • Alt + перетаскивание отдельной ручки ломает симметрию и создаёт острый угол (corner node).
  • Клик по линейному сегменту добавляет новую опорную точку.
  • Нажатие Delete / Backspace на выделенном узле (или двойной клик по нему) удаляет точку из пути (path) — при этом инструмент аккуратно соединяет соседние узлы с пересчётом плавной кривой без разрыва фигуры.
• Pen (P) — классическое Перо для векторного рисования:
  • Простой клик создаёт вершину с острым углом.
  • Клик с протягиванием создаёт сглаженный узел с касательными Безье.
  • Клик по первой начальной точке замыкает контур.
  • Двойной клик или клавиша Enter завершают открытый путь.
• Примитивы: Прямоугольник Rect (R), скруглённый прямоугольник Roundrect (U), окружность Circle (C), эллипс Ellipse (E) и отрезок Line (L) (удержание Shift фиксирует угол линии шагом 45°).
• Eyedropper (I) — Пипетка для быстрой выборки цвета как с растрового референса, так и с существующего вектора.

Слои, порядок и дублирование объектов

Все векторные элементы отображаются в стеке объектов. Вы можете легко управлять их наложением:

• Bring Forward (Ctrl/Cmd+]) — поднять объект на один уровень выше.
• Send Backward (Ctrl/Cmd+[) — опустить объект на один уровень ниже.
• Bring to Front (Ctrl/Cmd+Shift+]) — переместить на самый верх.
• Send to Back (Ctrl/Cmd+Shift+[) — опустить на самый низ.
• Duplicate (Ctrl/Cmd+D) — сделать точную копию выделенной фигуры.
• Delete (Delete / Backspace) — удалить выделенный объект.

Брендовые цвета и перекраска

Vector Painter использует единую систему палитр Brand Palette:

• Working palette — палитра, автоматически извлечённая из импортированного изображения или результатов трассировки.
• Brand colors — ваша персональная библиотека брендовых цветов, сохраняющаяся между сессиями браузера.

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

Прозрачность и фон предпросмотра

Для контроля читаемости векторных иконок в сворачиваемом разделе Preview background доступен выбор фона отображения:

• шахматная сетка (для проверки прозрачности);
• чистый белый или светло-серый;
• тёмно-серый или чёрный;
• пользовательский цвет (через color picker или hex-ввод).

Фон предпросмотра используется исключительно на этапе работы и никогда не включается в экспортированный SVG или PNG.

Просмотр, навигация и субпиксельная подгонка

Чтобы трассировка точно совпала с растровым оригиналом, в панели Background adjust доступны параметры совмещения:

• Offset X и Y — сдвиг растровой подложки с микро-шагом 0.25px.
• Scale — масштаб подложки от 10% до 300% с шагом 5%.
• Горячие клавиши просмотра:
  • H — переключить видимость растрового референса.
  • T — переключить видимость векторного слоя.
  • O — включить режим сравнения оригинального изображения и вектора «бок о бок».
  • Space + перетаскивание — панорамирование по холсту при крупном масштабе.
  • Колёсико мыши — плавное зумирование.

Undo, Redo и локальное автосохранение

Любые действия — трассировка, добавление фигур, движение узлов Безье, изменение касательных, перекрашивание и выравнивание — записываются в историю отмены Undo (Ctrl/Cmd+Z) / Redo (Ctrl/Cmd+Shift+Z).

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

Экспорт в SVG и PNG

Раздел Export предлагает гибкие варианты сохранения:

• Trim to content — автоматически обрезает границы SVG или PNG точно по габаритам видимых векторных контуров.
• Full canvas — сохраняет исходный размер холста и точно фиксирует отступы.
• Форматы:
  • SVG File — скачивание оптимизированного файла SVG. Соседние пути объединяются, а координаты округляются для минимального веса.
  • PNG File — растровый экспорт с поддержкой альфа-канала и произвольного масштаба (например, 2x, 4x, 8x).
  • Copy SVG — копирование чистого SVG-кода прямо в буфер обмена.
  • Save current SVG (Ctrl/Cmd+S) — прямая перезапись исходного SVG-файла на диске (в браузерах с поддержкой File System Access API).
  • Open in SVG Optimizer — передача полученного вектора в соседний инструмент оптимизации для минификации, очистки лишних атрибутов и экспорта в React, Vue или Data URI.

Горячие клавиши

Пошаговый сценарий: от растрового PNG к чистому SVG

1. Загрузите растровую иконку через кнопку Image или перетащите файл в окно браузера.
2. В панели Trace установите количество цветов (например, 2 для монохромного логотипа) и включите Separate background.
3. Выберите режим Filled shapes для залитых силуэтов или Centerlines для штрихового рисунка.
4. Нажмите Trace и оцените сгенерированные векторные контуры.
5. Переключитесь на инструмент Edit nodes (A), подправьте неточные узлы и отрегулируйте изгибы кривых Безье касательными ручками.
6. В разделе Color примените палитру бренда для моментальной перекраски иконки.
7. Проверьте прозрачность и контраст на тёмном и светлом фоне предпросмотра.
8. Экспортируйте результат через Trim to content в компактный SVG или отправьте вектор в SVG Optimizer.

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

Похожие инструменты

Vector PainterТрассируйте растровые изображения в редактируемые контуры, правьте узлы и кривые Безье, рисуйте примитивы, применяйте бренд-палитры и экспортируйте SVG или PNG.Pixel PainterРисуйте по пикселям, редактируйте и клонируйте выделения, трансформируйте весь холст, управляйте палитрами и экспортируйте SVG или PNG.Оптимизатор изображенийПакетно сжимайте до 10 PNG, JPEG или WebP, задавайте максимальные размеры или целевой вес, сравнивайте до и после, скачивайте по одному либо ZIP-архивом — полностью локально.Color ToolboxКонвертируйте HEX, RGB и HSL, смотрите значение OKLCH, собирайте палитры, извлекайте цвета и проверяйте контраст WCAG.