Преобразуйте значки PNG в единый набор SVG для UI

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

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

Краткий порядок действий

1. Проведите инвентаризацию PNG и найдите дубликаты или недостающие исходники.
2. Выберите характерные значки и определите общую сетку, отступы, модель заливок или обводок и правила цвета.
3. Преобразуйте выбранные значки в настоящие контуры.
4. Проверьте силуэт, узлы, просветы и цветовые области.
5. Унифицируйте набор в одном векторном редакторе, затем преобразуйте и проверьте оставшиеся значки.
6. Проверьте экспортированные SVG в реальном интерфейсе и процессе обработки ресурсов.

Решите, какие значки PNG стоит преобразовать в SVG

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

Если сохранившийся источник — контейнер значков, а не PNG, сначала извлеките рисунок через соответствующий процесс ICO в SVG или ICNS в SVG. Затем приведите результат к тем же правилам набора интерфейса, описанным ниже.

Имя файла SVG не доказывает, что пиксели стали векторными контурами. Формат допускает встроенный растр через элемент <image>, как объясняет спецификация встроенного содержимого SVG. Если экспортированный файл всё ещё выделяется как одно прямоугольное изображение или становится пиксельным при сильном увеличении, выполните проверки встроенного растра перед добавлением в набор.

Задайте правила набора интерфейса до трассировки

Папка отдельных чистых значков всё равно может выглядеть несогласованно. Сначала запишите правила набора, даже если исходные PNG пока им не соответствуют.

Выберите единое координатное пространство

Используйте один viewBox для значков с общим размером компонента. Числа не обязательно должны быть 24 на 24 или 16 на 16; они должны соответствовать вашей системе. SVG отображает прямоугольник viewBox в видимую область, поэтому одинаковые внешние размеры помогают только при согласованном размещении рисунка внутри. Спецификация системы координат SVG 2 определяет это отображение.

Зафиксируйте:

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

Выберите модель заливок или обводок

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

Решите, как управлять цветом

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

Сначала преобразуйте характерную выборку

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

1. Подготовьте PNG

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

Сохраняйте нетронутую копию каждого оригинала. Очистку легче оценить, сравнивая SVG с источником, а не полагаясь на память.

2. Трассируйте выбранные значки

Используйте автоматический векторизатор или инструмент трассировки вашей дизайнерской программы. Текущий процесс Illustrator Image Trace предоставляет настройки цвета, контуров, углов и шума. Текущая функция Figma Vectorize предлагает цветовые режимы после трассировки и отмечает, что сложные изображения и источники низкого разрешения могут векторизоваться плохо (Adobe Image Trace; Figma Vectorize).

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

Если основной редактор набора — Figma, сравнение Figma Vectorize с процессом внешнего SVG поможет сравнить оба пути на одной выборке. Оценивайте фигуры после импорта, включая отверстия и цветовые области, которые нужно редактировать.

3. Проверяйте контуры, а не только предпросмотр

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

Ищите:

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

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

Унифицируйте значки как одно семейство

Когда структура выбранных трассировок пригодна, разместите их на общей сетке и оцените вместе. На этом этапе набор становится системой.

Проверка всего набора

Проверьте набор в реальном размере интерфейса и при большем увеличении для редактирования:

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

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

Как это выглядит с PerfectVector

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

1. Сохраняет ли каждый значок силуэт и просветы?
2. Можно ли выделить и перекрасить нужные области?
3. Используют ли кривые управляемое число узлов?
4. Проще ли унифицировать этот результат, чем ручную трассировку или трассировку в приложении?

Если выборка проходит проверку, преобразуйте оставшиеся подходящие PNG и соберите их в том же основном файле для общей проверки набора. Если нет, измените источник или метод трассировки перед обработкой новых значков. PerfectVector не заменяет решения об оптическом выравнивании и именах, относящиеся к дизайн-системе.

Очистка с сохранением источников

Храните два уровня файлов:

• Архив источников: нетронутые PNG, исходные файлы дизайна и сведения о происхождении.
• Редактируемый оригинал: унифицированные векторные значки на общей сетке.
• Экспорты для передачи: оптимизированные SVG, которые использует продукт.

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

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

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

Перед передачей проверьте несколько значков во всех важных средах: библиотеке дизайна, компоненте приложения и любом этапе сборки или оптимизации. Проверьте отключённое состояние и инверсную окраску, если система их использует. Даже структурно чистый файл может не подойти набору, если его предположения о цвете или размерах не совпадают с компонентом. Для Android используйте список проверок импорта PNG в VectorDrawable, чтобы подтвердить размеры области просмотра, заливки, сложность контуров и поддержку импортёра до добавления ресурса в приложение. Для проектов Godot используйте список проверок импорта SVG в Godot, чтобы выбрать тип импорта текстуры и проверить размер растра, повышенную дискретизацию и поддерживаемый рисунок. Для проектов Unity используйте список проверок импорта SVG в Unity, чтобы выбрать совместимый с редактором импортёр и проверить назначение для UI Toolkit или спрайтов.

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

Список проверок передачи набора интерфейса

• Каждый трассированный значок получен из самого чистого доступного источника.
• Значки соблюдают документированные правила viewBox, отступов и выравнивания.
• Визуальный размер и воспринимаемая толщина согласованы в реальном размере интерфейса.
• Значки с заливками и обводками следуют заявленной модели системы.
• Цветовые области предсказуемо сопоставляются с утверждённой палитрой или правилом токенов.
• У кривых достаточно узлов для точности без явного нагромождения контуров.
• Ни один SVG не содержит случайного встроенного растра, фонового прямоугольника или дублированного края.
• Имена файлов и компонентов уникальны и стабильны.
• Экспортированный набор проверен после обычного этапа оптимизации продукта.
• Архив источников, редактируемый оригинал и файлы для передачи хранятся отдельно.

Частые вопросы

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

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

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

Нужно ли сохранять значки PNG после завершения набора SVG? Да. Сохраните исходные PNG и более ранние источники дизайна в архиве. Они подтверждают происхождение и дают визуальный образец, если трассировку придётся переделать. Редактируйте унифицированный векторный оригинал и создавайте из него SVG для передачи.

Источники

1. W3C — Системы координат, преобразования и единицы SVG — Определяет области просмотра SVG, системы координат, viewBox и отображение рисунка в видимую область.
2. W3C — Контуры SVG — Определяет команды линий и кривых, составляющие редактируемую геометрию контуров SVG.
3. W3C — Встроенное содержимое SVG — Подтверждает, что SVG может содержать растровое изображение вместо векторных контуров.
4. Adobe Illustrator — Векторизация изображений с Image Trace — Описывает текущий процесс трассировки растра и результат в виде редактируемых контуров.
5. Figma Learn — Преобразование статичных изображений в векторные слои — Описывает текущий процесс Figma Vectorize, цветовые режимы и ограничения исходных изображений.

---

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