PerfectVector
Por Claire Yoon10 min de leitura

Como reduzir as cores de um SVG sem prejudicar a arte

Reduza a paleta SVG pela função visual, não por um número arbitrário. Una cores próximas preservando contraste, espaço negativo, camadas e cores de operação.

Nesta página

Para reduzir as cores de um SVG com segurança, agrupe-as pela função na arte e una as quase duplicadas dentro de cada grupo. Mantenha separadas as cores com significados diferentes, como realces e sombras, primeiro plano e fundo, ou operações de corte e marcação.

O erro comum é escolher uma meta como “quatro cores” e deixar uma ferramenta de agrupamento decidir tudo. Isso pode servir como primeira passada, mas a paleta final precisa de revisão visual e de produção. Dois azuis quase idênticos podem ser unidos com segurança. Dois cinzas igualmente próximos podem ser o único contraste que separa um olho do rosto.

Uma redução segura de paleta
  • Salve uma cópia intacta.
  • Levante preenchimentos, contornos, gradientes e opacidade.
  • Nomeie cores pela função antes de mudar valores hexadecimais.
  • Una cores próximas de uma função por vez.
  • Confira contraste, buracos e pequenos detalhes no tamanho final.
  • Para Cricut ou arquivos de produção, confirme que cores de operação e camadas continuam significando a mesma coisa.

Recolorir e reduzir cores são trabalhos diferentes

Recolorir substitui um valor por outro. Se um logotipo azul vira verde, mas continua com a mesma quantidade de preenchimentos, o tamanho da paleta não mudou.

Reduzir cores reúne vários valores em menos valores. Uma vetorização pode conter #173f75, #184076 e #194177 porque pixels suavizados viraram regiões separadas. Mapear os três para um azul reduz a paleta e, depois da limpeza de geometria, a quantidade de fragmentos a gerenciar.

TrabalhoAntesDepois
RecolorirTrês azuisTrês verdes
Redução de paletaTrês azuis quase idênticosUm azul
Redução de camadasVárias formas ou camadas com a mesma funçãoUma camada de produção onde a geometria permite

Esses processos podem acontecer juntos, mas não são intercambiáveis. O guia de alteração de cores SVG cobre substituição direta de cor. Este artigo se concentra em decidir quais cores podem virar uma só.

Depois de finalizar a paleta, o fluxo de separação de cores na mesma prancheta exporta um arquivo alinhado por cor exata sem desfazer essas decisões.

Primeiro, encontre as cores realmente usadas no arquivo

Abra o SVG em um editor vetorial que liste cores do documento ou selecione objetos por preenchimento. O Illustrator, por exemplo, documenta selecionar objetos com o mesmo preenchimento e contorno. Para um arquivo simples, um editor de texto também revela valores explícitos de fill e stroke.

Conte mais que códigos hexadecimais:

  • Preenchimentos sólidos das formas
  • Cores de contorno
  • Paradas de gradiente
  • Opacidade que faz uma cor parecer mais clara sobre o fundo
  • Estilos armazenados em classes, não diretamente nas formas
  • Imagens raster incorporadas, cujas cores de pixels não são uma paleta SVG

Dez valores hexadecimais listados nem sempre significam dez cores visíveis. O mesmo hexadecimal com outra opacidade pode parecer diferente. Um gradiente pode ter só duas paradas e renderizar muitos tons intermediários. Um raster <image> pode mostrar milhares de cores enquanto o SVG ao redor tem um preenchimento. A especificação de pintura SVG distingue cores sólidas, gradientes, padrões, opacidade de preenchimento e contorno e outros comportamentos de pintura.

Se o arquivo contém um raster encapsulado em vez de formas editáveis, a redução de cores pertence à preparação ou a uma nova vetorização. A verificação de SVG pixelado indica se há traçados reais para editar.

Nomeie cores pela função

Antes de mudar valores, faça um pequeno mapa da paleta:

FunçãoCores atuaisManter separadas?
Silhueta principalAzul-marinho escuro e quase azul-marinhoGeralmente unir
RealceAzul-claroManter se define a forma
ContornoPretoManter se a borda é intencional
FundoRetângulo brancoRemover se a intenção é transparência
Operação de corteVermelhoManter separado de marcação ou gravação

Isso impede a similaridade automática de tomar a decisão errada. Distância entre cores é útil, mas o contexto vence. Um pequeno realce ao lado de uma forma escura pode precisar de menos separação numérica que duas grandes regiões de fundo e ainda contribuir mais para a legibilidade.

Associe as cores próximas às suas funções antes de escolher quais ficam. Um tom de fundo, preenchimento principal, contorno e destaque focal podem ser numericamente próximos de outras amostras, mas cada um tem um motivo diferente para permanecer distinto.

Mapa conceitual de paleta ligando muitas amostras quase duplicadas às funções de fundo, preenchimento principal, contorno e detalhe focal, depois escolhendo uma cor deliberada para cada função
Ilustração conceitual: reduza cores próximas dentro de uma função, não entre funções com significados visuais ou de produção diferentes.

Em arquivos de corte, a função pode ser literal. No Cricut Design Space, SVGs importados mantêm camadas separadas, e o controle Operation atribui comportamentos como Basic Cut, Draw, Score e Engrave às camadas selecionadas. Em outros fluxos laser ou CNC, cores também podem organizar operações. Não una camadas que carregam operações só porque suas cores parecem próximas na tela.

Una cores próximas em um editor vetorial

Trabalhe do par menos arriscado para o mais visível.

  1. Duplique o arquivo ou a prancheta.
  2. Selecione uma cor candidata com Select Same Fill ou equivalente.
  3. Substitua temporariamente pela cor vizinha da paleta.
  4. Inspecione pequenos elementos, interseções e espaço negativo no tamanho normal de visualização.
  5. Alterne entre original e cópia reduzida.
  6. Mantenha a união apenas se a hierarquia de formas e o significado de produção sobreviverem.
  7. Repita com o próximo par.

Depois que as cores correspondem, formas adjacentes não viram automaticamente um traçado. Una-as apenas quando devem ser uma forma editável ou de corte única. Dois objetos podem compartilhar preenchimento e continuar separados para animação, layout ou edição.

É aqui também que a qualidade de nós e fragmentos importa. Se um azul visual está dividido em centenas de tiras estreitas, selecionar por preenchimento ajuda, mas o arquivo ainda pode ser difícil de editar. Uma vetorização mais limpa pode ser mais rápida que reparar cada fragmento.

O que o agrupamento automático faz — e o que não faz

Ferramentas de paleta costumam agrupar cores por distância numérica. K-means e métodos semelhantes podem transformar uma longa lista de valores próximos em uma quantidade escolhida de cores representativas. Isso é útil para ilustrações criadas a partir de rasters com ruído.

O agrupamento automático não sabe:

  • qual elemento é um rosto, letra, buraco ou contorno;
  • quais cores indicam operações de máquinas;
  • se um pequeno destaque tem significado de marca;
  • se a transparência sobre um fundo criou a cor aparente;
  • se duas formas precisam continuar editáveis separadamente.

Use o resultado como rascunho. Compare no tamanho final de saída, não apenas ampliado. Uma união aparentemente inofensiva a 800% pode apagar um pequeno olho ou espaço interno no tamanho de adesivo.

Quando rasterizar e vetorizar novamente faz sentido

Exportar o SVG para PNG, reduzir a paleta raster e vetorizar novamente é uma reinicialização destrutiva. Achata grupos, nomes, símbolos reutilizáveis, estrutura de texto e traçados posicionados cuidadosamente em pixels antes de reconstruí-los.

Use apenas quando a estrutura atual do SVG já for inutilizável e você não tiver um original mais limpo. Pode ajudar em uma vetorização muito fragmentada cuja única qualidade útil é a aparência. Guarde o SVG existente como referência, exporte um raster grande com transparência, reduza as cores deliberadamente e depois vetorize e inspecione os novos traçados.

Não rasterize um SVG limpo e organizado apenas para mudar quatro preenchimentos. A edição vetorial direta preserva muito mais informação.

Confira o arquivo reduzido

Faça estas verificações antes de sobrescrever qualquer coisa:

  • Veja sobre fundos claros e escuros.
  • Confira silhuetas e espaços negativos.
  • Confirme que contornos não desapareceram nos preenchimentos.
  • Inspecione gradientes e opacidade separadamente das cores sólidas.
  • Conte as camadas Cricut ou operações finais de produção.
  • Observe textos e ícones pequenos no tamanho real de saída.
  • Abra o SVG exportado do zero em outro visualizador.

Se o arquivo é para Cricut, o fluxo de SVG em camadas explica como cor corresponde a material e montagem. O guia de dificuldade para remover o excesso de material cobre problemas de geometria que menos cores, por si só, não resolvem.

Onde o PerfectVector se encaixa

O PerfectVector não edita um SVG existente. Ajuda quando a explosão de cores começou em uma imagem raster. O fluxo de SVG para Cricut converte o original em traçados editáveis e permite inspecionar e ajustar regiões de cor vetorizadas antes do download.

Use quando um PNG ou JPG produziu dezenas de cores próximas e camadas fragmentadas em outro conversor. Comece com o raster mais limpo disponível, remova sombras ou variações de fundo indesejadas e compare a prévia vetorial. Una cores conforme as camadas de material que realmente planeja cortar.

O objetivo nem sempre é o menor número possível de cores. É a menor paleta que ainda comunica o desenho e o plano de produção.

Perguntas frequentes

Como reduzir a quantidade de cores de um SVG? Liste preenchimentos, contornos, gradientes e opacidade, agrupe por função visual ou de produção e una quase duplicatas um par por vez. Use seleção por preenchimento no editor vetorial e compare com uma cópia intacta depois de cada união.

Mudar dois preenchimentos para o mesmo hexadecimal une as camadas SVG? Não necessariamente. As formas compartilham uma cor, mas continuam objetos separados até você unir ou combinar sua geometria. Mantê-las separadas pode ajudar em edição, animação ou layout mesmo quando são cortadas do mesmo material.

Posso limitar automaticamente um SVG a quatro cores? Ferramentas de agrupamento de paleta podem produzir um rascunho de quatro cores, mas não entendem detalhes semânticos ou operações de produção. Revise pequenos elementos, contraste, buracos, gradientes e significado das camadas antes de usar.

Por que vetorizar uma imagem de quatro cores criou dezenas de cores? O raster provavelmente continha suavização, sombras, variações de compressão ou bordas desfocadas. O vetorizador tratou essas diferenças de pixels como regiões separadas. Limpe o raster seletivamente ou una cores próximas no resultado vetorial.

Devo reduzir cores SVG antes de enviar à Cricut? Geralmente sim quando várias cores são quase duplicatas indesejadas. Planeje uma cor significativa por material ou camada, preserve o que deve cortar separadamente e confira a quantidade de camadas após importar. Poucas camadas deliberadas são mais fáceis de cortar e montar que uma vetorização cheia de pequenas variações de cor.

Fontes

  1. W3C — pintura SVG 2 — Define preenchimentos, contornos, gradientes, padrões e opacidade de pintura.
  2. Adobe Illustrator — selecionar objetos com o mesmo preenchimento e contorno — Documenta um fluxo prático de seleção por aparência.
  3. Cricut — enviar imagens para o Design Space — Explica como camadas SVG são mantidas no envio.
  4. Cricut — selecionar Operation — Define operações de máquina atribuídas às camadas do Design Space.

Se o problema de paleta começou em uma imagem raster, prepare para Cricut e inspecione as cores vetorizadas. Mantenha o original ao lado da prévia e aprove cada união com base no material final, não apenas na tela.

Mais do blog

Recomece com um SVG mais limpo
e fácil de editar