Преобразуйте пиксельную графику в вектор без потери чётких краёв

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

Если вы редактируете игровой спрайт в Scratch, кнопка Convert to Vector меняет режим редактирования, не трассируя растр. Используйте проверки редактируемости костюма Scratch, чтобы решить, оставить ли пиксели, перерисовать часть или импортировать трассированные фигуры SVG, затем сравните центр нового костюма с оригиналом.

Если цель — просто показать чёткую пиксельную графику на сайте или в игре, SVG может вообще не понадобиться. PNG правильного размера с масштабированием по принципу ближайшего соседа часто меньше и точнее передаёт исходник; в интернете свойство image-rendering предоставляет режимы crisp-edges и pixelated, предназначенные для сохранения чётких краёв.

Три результата для трёх разных задач

Вопрос скорее в значении блоков, чем в том, какой формат «лучше». В пиксельной графике ступенчатые края часто намеренны. Их сглаживание может быть столь же разрушительным, как размытие линейного рисунка.

Сохранение сетки и сглаживание контуров — разные задачи

Путь 1: точно сохраните пиксельную сетку

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

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

Процесс Object Mosaic в Illustrator

Adobe описывает встроенный способ превращения встроенного растра в мозаику:

1. Поместите исходную пиксельную графику в Illustrator и встройте её.
2. Выделите изображение и выберите Object > Create Object Mosaic.
3. Если исходная сетка известна, задайте соответствующее количество плиток.
4. Используйте квадратные плитки и цветной результат.
5. Сохраните исходный растр до проверки мозаики, затем удалите или скройте его.
6. При сильном увеличении сравните с оригиналом внешний силуэт, внутренние промежутки и палитру.

Документация Adobe по Create Object Mosaic описывает команду, квадратные плитки, настройку цвета и работу с исходным растром. Процесс для пиксельной графики — практическое применение этого документированного поведения мозаики.

Мозаика объектов может точно передавать структуру и всё же быть неэффективной. Спрайт 64 на 64 содержит 4 096 ячеек до объединения. Удалите полностью прозрачные ячейки, по возможности объедините соседние прямоугольники одного цвета и не переносите невидимые объекты в итоговый SVG.

Путь 2: создайте SVG-сетку без Illustrator

Такой же файл можно создать скриптом, учитывающим пиксели, или специализированным конвертером. Принцип важнее приложения:

1. Читайте исходник в исходном размере сетки.
2. Преобразуйте каждый не полностью прозрачный пиксель в точный векторный прямоугольник.
3. Сохраните значения палитры без сглаживания.
4. Объединяйте соседние ячейки только тогда, когда объединённая фигура даёт ту же видимую сетку.
5. Экспортируйте с SVG viewBox, соответствующим исходным размерам сетки.
6. Проверьте SVG при отображении с целочисленными и нецелочисленными размерами.

Открытый проект vectorize-pixelart — один из примеров утилиты преобразования, специально учитывающей пиксели. Он также иллюстрирует общее ограничение: крупные или сложные сетки могут давать тяжёлые SVG. Старую утилиту сначала рассматривайте как материал для изучения. Проверьте её код и состояние сопровождения перед включением в производственный процесс.

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

Путь 3: намеренно сгладьте фигуры

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

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

1. Сначала уберите сглаживание. Мягкие пиксели на краях создают лишние цвета и маленькие краевые фигуры.
2. Контролируйте палитру. Если исходник содержит восемь цветов, трассировка не должна изобретать десятки из-за сжатия или размытия.
3. Проверьте ступенчатые диагонали. Решите, какие должны стать прямыми отрезками, а какие — кривыми.
4. Проверьте отверстия и промежутки в один пиксель. Маленькие проёмы могут закрыться при упрощении соседних областей.
5. Оцените число узлов. Смысл сглаживания не в замене каждого квадратного угла несколькими крошечными кривыми.
6. Проверьте в целевом размере. Приятная плавная кривая в размере плаката может стереть лицо или руку в размере иконки.

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

Проблемы подготовки, ухудшающие любой путь

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

Файл в JPG. Сжатие создаёт цветовые блоки и ореолы вокруг каждого жёсткого пиксельного края. По возможности используйте исходный PNG.

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

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

Нужен ли вектор для сайта?

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

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

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

Итоговая проверка

Перед передачей сравните файл с оригиналом в исходном размере и в предполагаемом размере вывода.

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

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

Источники

1. Adobe Illustrator — создание эскизов и мозаик — Команда Object Mosaic, квадратные плитки, цветной результат и требование встроенного растра.
2. MDN — CSS image-rendering — Отображение по принципу ближайшего соседа для пиксельной графики в интернете.
3. W3C — спецификация PNG, третья редакция — Растровая модель PNG без потерь и поведение альфа-канала.
4. W3C — базовые фигуры SVG — Геометрия прямоугольников для буквальных SVG из ячеек сетки.
5. W3C — системы координат SVG и viewBox — Отображение исходной системы координат сетки в область просмотра SVG.

Если вам нужны плавные контуры вместо сохранённой сетки, обработайте рисунок в PerfectVector, затем перед использованием сравните силуэт, промежутки в один пиксель и мелкие детали с пиксельным оригиналом.