Как сократить число цветов в SVG, сохранив рисунок

Чтобы безопасно сократить число цветов в SVG, сгруппируйте их по роли в рисунке, а затем объедините почти одинаковые оттенки внутри каждой группы. Оставляйте раздельными цвета с разным назначением: блики и тени, передний план и фон, операции резки и биговки.

Частая ошибка — выбрать цель вроде «четырёх цветов» и доверить все решения инструменту кластеризации. Это может быть полезным первым этапом, но итоговую палитру нужно проверить и визуально, и с точки зрения производства. Два почти одинаковых синих оттенка, возможно, удастся безопасно объединить. А два столь же похожих серых могут создавать единственный контраст, отделяющий глаз от лица.

Безопасное сокращение палитры

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

Перекрашивание и сокращение числа цветов — разные задачи

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

Сокращение палитры сводит несколько значений к меньшему числу. В трассировке могут встречаться #173f75, #184076 и #194177, потому что сглаженные пиксели стали отдельными областями. Замена всех трёх одним синим сокращает и палитру, и — после очистки геометрии — число фрагментов, которыми нужно управлять.

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

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

Сначала найдите цвета, которые действительно использует файл

Откройте SVG в векторном редакторе, который умеет показывать цвета документа или выделять объекты по заливке. Например, в документации Illustrator описано выделение объектов с одинаковой заливкой и обводкой. В простом файле текстовый редактор тоже покажет явно заданные значения fill и stroke.

Учитывайте не только шестнадцатеричные коды:

• Сплошные заливки фигур
• Цвета обводок контуров
• Точки градиента
• Непрозрачность, из-за которой цвет на фоне выглядит светлее
• Стили, сохранённые в классах, а не непосредственно в фигурах
• Встроенные растровые изображения, цвета пикселей которых не являются палитрой SVG

Десять указанных шестнадцатеричных значений не всегда означают десять видимых цветов. Один код при разной непрозрачности может выглядеть по-разному. Градиент может содержать всего две точки, но отображать множество промежуточных тонов. Растровый <image> может показывать тысячи цветов, хотя в окружающем SVG всего одна заливка. Спецификация рисования SVG различает сплошные цвета, градиенты, узоры, непрозрачность заливки и обводки и другие свойства рисования.

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

Назовите цвета по их роли

Прежде чем менять значения, составьте небольшую карту палитры:

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

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

Для файлов резки роль бывает буквальной. В Cricut Design Space импортированные SVG сохраняют отдельные слои, а элемент управления Operation назначает выбранным слоям действия Basic Cut, Draw, Score и Engrave. В других процессах лазерной обработки или CNC цвета тоже могут служить для организации операций. Не объединяйте слои, задающие операции, только потому, что их цвета похожи на экране.

Объединяйте близкие оттенки в векторном редакторе

Начните с пары, изменение которой наименее рискованно, и переходите к самым заметным цветам.

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

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

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

Что может и чего не может автоматическая кластеризация

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

Автоматическая кластеризация не знает:

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

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

Когда оправдана растеризация с повторной трассировкой

Экспорт SVG в PNG, сокращение растровой палитры и повторная трассировка — это разрушительное пересоздание. Группы, имена, повторно используемые символы, структура текста и тщательно расположенные контуры сначала превращаются в пиксели, а затем строятся заново.

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

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

Проверьте файл с сокращённой палитрой

Выполните эти проверки, прежде чем перезаписывать файл:

• Посмотрите на светлом и тёмном фоне.
• Проверьте силуэты и просветы.
• Убедитесь, что обводки не слились с заливками.
• Проверьте градиенты и непрозрачность отдельно от сплошных цветов.
• Посчитайте итоговые слои Cricut или производственные операции.
• Посмотрите на мелкий текст и значки в реальном размере вывода.
• Заново откройте экспортированный SVG в другой программе просмотра.

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

Где поможет PerfectVector

PerfectVector не редактирует существующие SVG. Он помогает, когда множество цветов возникло из растрового изображения. Процесс подготовки SVG для Cricut преобразует источник в редактируемые контуры и позволяет проверить и настроить трассированные цветовые области перед скачиванием.

Используйте этот путь, если другой конвертер создал из PNG или JPG десятки близких оттенков и фрагментированных слоёв. Начните с самого чистого доступного растра, уберите ненужные тени или неоднородность фона, затем сравните векторный предпросмотр. Объединяйте цвета в соответствии со слоями материалов, которые вы действительно планируете вырезать.

Цель не всегда в минимально возможном числе цветов. Нужна самая компактная палитра, которая всё ещё передаёт рисунок и производственный план.

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

Как сократить число цветов в SVG? Составьте список заливок, обводок, градиентов и значений непрозрачности, сгруппируйте их по визуальной или производственной роли, затем объединяйте почти одинаковые оттенки по одной паре. Используйте выделение по заливке в векторном редакторе и после каждого объединения сравнивайте результат с нетронутой копией.

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

Можно ли автоматически ограничить SVG четырьмя цветами? Инструменты кластеризации палитры могут создать черновик из четырёх цветов, но они не понимают смысловых деталей и производственных операций. Перед использованием результата проверьте мелкие детали, контраст, отверстия, градиенты и назначение слоёв.

Почему трассировка изображения из четырёх цветов создала десятки цветов? Вероятно, в растре были сглаживание, тени, различия из-за сжатия или смягчённые края. Трассировщик воспринял эти различия пикселей как отдельные области. Выборочно очистите растр или объедините близкие оттенки в векторном результате.

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

Источники

1. W3C — Рисование в SVG 2 — Определяет заливки, обводки, градиенты, узоры и непрозрачность рисования.
2. Adobe Illustrator — Выделение объектов с одинаковой заливкой и обводкой — Описывает практический процесс выделения по внешним свойствам.
3. Cricut — Загрузка изображений в Design Space — Объясняет, как слои SVG сохраняются при загрузке.
4. Cricut — Выбор Operation — Определяет операции станка, назначаемые слоям Design Space.

---

Если проблема палитры началась с растрового изображения, подготовьте его для Cricut и проверьте трассированные цвета. Держите оригинал рядом с предпросмотром и оценивайте каждое объединение по готовому материалу, а не только по экрану.