Como separar cores de SVG em arquivos individuais

Para separar cores de SVG em arquivos individuais, agrupe as formas pela cor exata de preenchimento e exporte cada grupo na mesma prancheta de tamanho completo do original. Não recorte cada cor nos limites de suas próprias formas. O espaço vazio é o que mantém as peças alinhadas ao importar, cortar, imprimir em serigrafia ou remontar.

Para um SVG compatível com preenchimentos sólidos, o SVG Color Separator gratuito do PerfectVector faz isso localmente no navegador. Para arte complexa, você pode selecionar objetos por preenchimento em um editor vetorial e exportar cada cor manualmente.

A regra para separar com segurança

• Faça uma cópia intacta do SVG original.
• Decida se cores quase duplicadas devem ser unidas antes da separação.
• Agrupe por cor exata de preenchimento; não trate gradientes, padrões ou imagens como cores simples.
• Mantenha largura, altura e viewBox originais em cada resultado.
• Preserve a posição original de cada forma e a ordem de pintura das formas da mesma cor.
• Importe todos os arquivos juntos e confira tamanho e alinhamento antes de cortar o material.

Por que cada arquivo de cor deve manter a prancheta inteira

Imagine uma flor com uma pétala azul perto do canto superior esquerdo e uma vermelha perto do canto inferior direito. Se os dois arquivos forem recortados rente às formas, cada pétala vai para o canto superior esquerdo de seu novo documento. Os dois SVGs deixam de compartilhar um sistema de coordenadas, e a remontagem passa a depender de tentativa e erro.

Quando cada arquivo mantém a prancheta original, cada cor continua na coordenada a que pertencia. O arquivo apenas azul pode conter bastante área vazia. Isso são dados intencionais de alinhamento, não desperdício.

Conceito de área compartilhada

O viewBox do SVG define o espaço interno de coordenadas. Preserve-o junto de largura e altura físicas confiáveis quando sua máquina de corte, impressora ou parceiro de produção precisa de dimensões reais.

Cores exatas não são o mesmo que cores visuais

Um SVG pode conter #ff0000 e #fe0000. Elas parecem quase idênticas, mas são dois valores exatos e produzem dois arquivos em um fluxo por cor exata. Isso é mais seguro que presumir silenciosamente que o designer queria uma única cor de produção.

Antes de separar, examine a paleta:

O fluxo de redução de paleta explica como unir cores próximas pela função visual e de produção. Tome essa decisão primeiro. Um separador não deve tomá-la por você.

Método 1: use o separador gratuito no navegador

O SVG Color Separator aceita um subconjunto de SVG deliberadamente restrito para preservar o arquivo, em vez de entregar camadas plausíveis, mas erradas.

1. Escolha o SVG

Selecione um SVG de até 5 MiB. O documento é verificado dentro de um worker descartável no navegador antes da criação de uma prévia ou download seguro. O conteúdo SVG, nome do arquivo, traçados, cores, prévias e arquivos gerados não são enviados ao PerfectVector.

A versão atual foi projetada para arte vetorial opaca de preenchimento sólido: traçados, retângulos, círculos, elipses, polígonos e polilinhas compatíveis com transformações comuns. Ela trata os preenchimentos sólidos compatíveis definidos diretamente e por herança.

2. Revise compatibilidade e tamanho

Confira a composição aceita, as dimensões físicas, o viewBox, a quantidade de traçados, a paleta de cores exatas e os avisos. Se o arquivo tem viewBox, mas não tem largura e altura físicas confiáveis, confirme uma dimensão; a outra permanece proporcional.

O processamento para em vez de remover conteúdo não compatível. As condições atuais de interrupção incluem traços visíveis, gradientes, padrões, filtros, caminhos de recorte, máscaras, texto editável, imagens incorporadas, referências reutilizáveis, SVGs aninhados, recursos externos, folhas de estilo ou classes, scripts, manipuladores de eventos e cores de corte transparentes.

Esse limite acompanha o próprio modelo SVG. A especificação de pintura do SVG 2 distingue cores sólidas de gradientes, padrões, opacidade de preenchimento e comportamento dos traços. Uma “cor” visível nem sempre é um valor chapado que pode ser movido com segurança para um arquivo.

3. Examine cada prévia de cor exata

A ferramenta cria uma prévia por cor opaca exata. Verifique se:

• as formas esperadas aparecem no arquivo da cor correta;
• não falta nenhum conteúdo pretendido de traço, texto ou imagem;
• as dimensões da composição correspondem ao arquivo original;
• cada camada permanece na posição original;
• a paleta contém a quantidade de cores de produção pretendida.

Um SVG de uma cor continua válido; ele já está separado. Arquivos com duas a 24 cores exatas recebem a visualização normal de camadas. Quantidades maiores compatíveis continuam aceitas até o limite de segurança, mas dezenas de cores normalmente indicam que a limpeza da paleta deve vir primeiro. Mais de 256 cores exatas são recusadas.

4. Baixe os arquivos

Baixe os arquivos de cor necessários individualmente ou use o arquivo compactado local. Cada resultado mantém a mesma largura, altura, viewBox e sistema de coordenadas. Os nomes dos arquivos e a ordem das camadas são determinísticos, então a entrega pode ser repetida.

Não é necessário cadastro nem créditos para o separador ou para baixar suas camadas. Esse fluxo é separado do download pago de raster para vetor do PerfectVector.

Método 2: separe cores em um editor vetorial

Use Illustrator, Inkscape, Affinity ou outro editor vetorial quando o SVG precisar de reparos antes de ser separado.

1. Abra uma cópia e registre largura, altura e viewBox ou prancheta do documento.
2. Converta texto editável em contornos se o destino exigir formas.
3. Expanda ou substitua intencionalmente traços, gradientes, padrões, máscaras e estruturas de recorte não compatíveis.
4. Selecione uma forma representativa e use o comando Select Same Fill Color do editor.
5. Copie as formas selecionadas para uma prancheta duplicada com as mesmas dimensões e origem.
6. Exclua ou oculte as outras cores sem mover as formas selecionadas.
7. Exporte o arquivo de cor como SVG e repita.
8. Reimporte todos os arquivos juntos para conferir se eles se sobrepõem exatamente.

Não crie um novo documento ajustado rente a cada seleção. Duplique a prancheta original ou use uma configuração de exportação que preserve seus limites.

A edição manual também permite combinar formas da mesma cor quando isso ajuda na produção. Não as una automaticamente se vazados, sobreposições, ordem de pintura original ou edições posteriores dependerem de objetos separados.

Prepare os arquivos para a Cricut

O guia atual de envio de imagens da Cricut informa que SVGs em camadas são enviados conforme o desenho e aparecem como imagem agrupada cujas camadas podem ser movidas e redimensionadas separadamente após desagrupar. Ele também documenta um limite de 5.000 traçados por SVG.

Antes de cortar:

1. Envie todos os arquivos separados.
2. Adicione-os à mesma Canvas sem alterar dimensões.
3. Confirme que cada um informa a mesma largura e altura.
4. Use os controles de posição ou um método compartilhado de registro se o fluxo precisar de sobreposição exata.
5. Atribua a operação e a cor de material corretas a cada camada.
6. Faça um pequeno teste com material barato.

O guia de itens não compatíveis da Cricut destaca preenchimentos com padrões, gradientes, caminhos de recorte, texto editável, imagens vinculadas e imagens incorporadas não compatíveis como problemas para o envio de vetores em camadas. Converta texto em formas e simplifique esses recursos deliberadamente antes de exportar.

Para uma conferência mais ampla, siga como examinar um SVG antes de cortar. Se os arquivos separados forem importados em tamanho inesperado, use o diagnóstico de SVG com tamanho errado antes de redimensionar camadas individualmente.

Erros comuns de separação

As camadas deixam de se alinhar

Cada cor provavelmente foi recortada nos próprios limites ou colada em um documento com origem diferente. Exporte novamente com a prancheta, largura, altura e viewBox originais.

Uma “cor” virou vários arquivos

O SVG contém valores quase duplicados. Decida quais valores têm a mesma função, una-os intencionalmente e repita a separação.

Um gradiente desapareceu ou foi rejeitado

Um gradiente é um servidor de pintura, não um preenchimento sólido exato. Substitua-o por regiões sólidas deliberadas, mantenha o fluxo original de gradiente ou use um método de produção raster quando a fidelidade tonal importar.

Faltam texto ou traços

Texto editável e traços visíveis são estruturas diferentes de traçados de contorno preenchidos. Converta-os em formas no editor vetorial apenas quando isso corresponder aos requisitos do destino.

A Cricut rejeita o arquivo

Verifique primeiro recursos não compatíveis e a quantidade de traçados. Um arquivo pode ser SVG válido e ainda estar fora do subconjunto aceito pelo Design Space.

Perguntas frequentes

Um SVG pode conter várias cores? Sim. As formas SVG podem usar preenchimentos e traços diferentes, e o SVG também suporta gradientes, padrões, opacidade e pintura referenciada. A separação por cor exata é mais simples com preenchimentos sólidos opacos.

Por que os arquivos separados têm tanto espaço vazio? O espaço vazio preserva a prancheta e as coordenadas originais. Ele permite que cada cor continue alinhada quando os arquivos são importados ou remontados.

Cores semelhantes do SVG serão unidas automaticamente? Não. O separador do PerfectVector agrupa apenas cores exatas. Una cores quase duplicadas deliberadamente antes de separar se elas devem virar uma única cor de produção.

Posso separar gradientes em arquivos de cor? Não como camadas exatas de cor sólida sem mudar a arte. Substitua o gradiente por regiões sólidas escolhidas, mantenha o fluxo original de gradiente ou use saída raster quando detalhes tonais suaves importarem.

O SVG Color Separator é gratuito? Sim. SVGs compatíveis são verificados, visualizados, separados e baixados localmente, sem conta ou créditos. Os recursos estáticos da página carregam normalmente, mas os dados do documento ficam no navegador.

Fontes

1. PerfectVector — SVG Color Separator — Contrato atual de processamento local, cor exata, alinhamento, compatibilidade e download.
2. W3C — Pintura do SVG 2 — Define preenchimentos, traços, pintura sólida, gradientes, padrões, opacidade e pintura referenciada.
3. Cricut — Como enviar imagens ao Design Space — Comportamento atual de importação de SVG em camadas e limite de traçados.
4. Cricut — Envio de imagens: itens não compatíveis — Limitações atuais de gradientes, padrões, recortes, texto e imagens para envio de vetores em camadas.

---

Pronto para manter todas as cores alinhadas? Abra o SVG Color Separator gratuito, revise as prévias de cores exatas e as dimensões e baixe somente depois de conferir a prancheta compartilhada.