Как разделить цвета SVG на отдельные файлы

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

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

Правило безопасного разделения

• Сделайте нетронутую копию исходного SVG.
• Решите, нужно ли объединить почти одинаковые цвета, до разделения.
• Группируйте по точному цвету заливки; не считайте градиенты, узоры и изображения простыми цветами.
• Сохраняйте исходные ширину, высоту и viewBox в каждом результате.
• Сохраняйте исходную позицию каждой фигуры и порядок отрисовки фигур одного цвета.
• Импортируйте все файлы вместе и проверьте их размер и совмещение до резки материала.

Почему каждый цветовой файл должен сохранять полное монтажное поле

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

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

Принцип общего холста

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

Точные цвета и визуальные цвета — не одно и то же

SVG может содержать #ff0000 и #fe0000. Они выглядят почти одинаково, но являются двумя точными значениями и при разделении по точным цветам создадут два файла. Это безопаснее, чем незаметно угадывать, что дизайнер задумал один производственный цвет.

Перед разделением проверьте палитру:

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

Способ 1: бесплатный браузерный разделитель

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

1. Выберите SVG

Выберите SVG размером до 5 МиБ. Документ проверяется во временном рабочем потоке браузера (Web Worker) до создания безопасного предпросмотра или скачиваемого файла. Содержимое SVG, имя файла, контуры, цвета, предпросмотры и созданные файлы не отправляются в PerfectVector.

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

2. Проверьте совместимость и размер

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

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

Это ограничение следует самой модели SVG. Спецификация окрашивания SVG 2 различает сплошные цвета, градиенты, узоры, непрозрачность заливки и поведение обводок. Видимый «цвет» не всегда является одним плоским значением, которое можно безопасно вынести в файл.

3. Проверьте предпросмотр каждого точного цвета

Инструмент создаёт один предпросмотр для каждого точного непрозрачного цвета. Убедитесь, что:

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

Одноцветный SVG тоже допустим: он уже разделён. Файлы с 2–24 точными цветами получают обычное представление слоёв. Более высокие поддерживаемые количества допускаются до границы безопасности, но десятки цветов обычно означают, что сначала нужно очистить палитру. Более 256 точных цветов не принимаются.

4. Скачайте файлы

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

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

Способ 2: разделение цветов в векторном редакторе

Используйте Illustrator, Inkscape, Affinity или другой векторный редактор, если перед разделением SVG нужно исправить.

1. Откройте копию и запишите ширину, высоту и viewBox или монтажное поле документа.
2. Переведите редактируемый текст в кривые, если программе назначения нужны фигуры.
3. Разберите или намеренно замените неподдерживаемые обводки, градиенты, узоры, маски и структуры обтравки.
4. Выделите одну характерную фигуру, затем используйте команду редактора «Выделить объекты с таким же цветом заливки» (Select Same Fill Color).
5. Скопируйте выбранные фигуры на дубликат монтажного поля с теми же размерами и началом координат.
6. Удалите или скройте другие цвета, не перемещая выбранные фигуры.
7. Экспортируйте цветовой файл в SVG и повторите.
8. Импортируйте все файлы вместе и проверьте точное наложение.

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

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

Подготовка файлов для Cricut

В актуальном руководстве Cricut по загрузке изображений сказано, что многослойные SVG загружаются в задуманном виде и появляются как сгруппированное изображение, слои которого можно отдельно перемещать и масштабировать после разгруппировки. Там также указан предел SVG в 5 000 контуров.

Перед резкой:

1. Загрузите все разделённые файлы.
2. Добавьте их на один холст Canvas без изменения размеров.
3. Убедитесь, что каждый показывает одинаковые ширину и высоту.
4. Используйте управление позицией или общий способ совмещения, если нужно точное наложение.
5. Назначьте правильную операцию и цвет материала каждому слою.
6. Выполните небольшой тест на недорогом материале.

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

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

Частые ошибки разделения

Слои больше не совпадают

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

Один «цвет» превратился в несколько файлов

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

Градиент исчез или не был принят

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

Текст или обводки отсутствуют

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

Cricut не принимает файл

Сначала проверьте неподдерживаемые возможности и количество контуров. Файл может быть корректным SVG и всё равно выходить за пределы подмножества, принимаемого Design Space.

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

Может ли SVG содержать несколько цветов? Да. Фигуры SVG могут использовать разные заливки и обводки; SVG также поддерживает градиенты, узоры, непрозрачность и заливки по ссылкам. Разделение по точным цветам проще всего для непрозрачных сплошных заливок.

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

Будут ли похожие цвета SVG объединены автоматически? Нет. Разделитель PerfectVector группирует только точные цвета. Намеренно объедините почти одинаковые значения до разделения, если они должны стать одним производственным цветом.

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

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

Источники

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

---

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