Por que recolorir o SVG e não o PNG?
Num PNG, a cor está espalhada por milhares de pixels, incluindo as bordas suavizadas, então mudá-la significa pintar. Num SVG feito de caminhos preenchidos, a cor é um valor em cada forma: troque o valor e todas as bordas continuam exatamente onde estavam. Por isso, a segunda paleta de uma marca, uma versão para modo escuro ou uma versão de uma cor só para impressão devem ser feitas a partir do SVG.
Como recolorir uma parte?
Abra o arquivo no editor de SVG. Uma imagem traçada abre com cada objeto como uma camada própria; dentro dela, as formas ficam aninhadas de acordo com o que envolve o quê (um olho dentro de um rosto).
- Na aba Camadas, cada linha mostra as cores dela como pequenas amostras: uma para uma forma de uma cor só, várias lado a lado para um grupo.
- Clique numa amostra. Um seletor abre ao lado, com cores fixas, as cores do próprio desenho, um campo hexadecimal e um conta-gotas.
- Aponte para uma cor para ver a prévia na tela. O clique aplica a cor a todos os preenchimentos daquela linha (a camada inteira, o grupo ou a forma) num único passo de desfazer. O Esc devolve a cor anterior.
Uma linha com várias cores pode virar uma cor só, ou ter só uma das cores trocada. Para selecionar algo direto na tela: um clique pega o objeto inteiro, um clique duplo entra nele, e a barra de contexto sobre a tela mostra onde você está ("Desenho › Objeto 2 › Forma"). Um clique ali volta um nível.
Como trocar uma cor em todo o desenho?
Use a aba Cores. Ela lista a paleta do desenho. Clicar numa amostra seleciona todas as formas que usam aquela cor, para você ver onde ela aparece, e Trocar em todo lugar substitui a cor no desenho inteiro num único passo de desfazer.
Um dos nossos logos de exemplo, recolorido trocando as duas cores em todo o desenho. Todas as formas e bordas continuam iguais; só os dois valores de preenchimento mudam.
A mesma aba tem o preenchimento e o traço da seleção (com um conta-gotas para pegar uma cor da tela) e, num retângulo, os cantos. Posição, tamanho, organizar, alinhar e a grade ficam em Mais.
Como fazer uma versão de uma cor só?
Use Trocar em todo lugar em cada cor, uma por vez, definindo todas com a mesma tinta. Ou selecione tudo e use o preenchimento da seleção. Depois, procure formas que só apareciam por causa da cor: um olho branco num rosto escuro some quando os dois ficam pretos. Exclua essas formas ou mantenha-as numa segunda cor, como a cor do papel, para o desenho continuar legível.
Como conferir o resultado?
- Contraste. Textos e detalhes pequenos precisam de contraste suficiente com o que está atrás deles. As WCAG pedem pelo menos 4,5:1 para texto normal.
- Tamanhos pequenos. Exporte um PNG de 32 e de 64 px pelo editor e olhe nesse tamanho, sem zoom.
- Fundos escuros. Um logo feito para fundo branco muitas vezes precisa de uma versão mais clara da cor mais escura numa página escura.
Salvar e exportar
Salvar guarda uma nova versão do SVG na sua conta, e as versões anteriores continuam disponíveis. Exportar PNG renderiza o desenho na largura que você escolher, de 16 a 4.096 px. As alterações não salvas ficam guardadas como rascunho no seu navegador e são oferecidas de volta na próxima vez que você abrir o mesmo arquivo. O editor exige uma conta. Os arquivos nele, incluindo as versões editadas, ficam guardados pelo período de armazenamento da sua conta, que aparece em cada arquivo.