Converter SVG para GIF

Isso é o que resolver antes de converter qualquer coisa, e quase nada que oferece essa conversão avisa. O GIF tem transparência, mas só numa forma: uma única entrada da tabela de cores pode ser marcada como invisível. O codificador usado aqui nunca marca nenhuma. Ele monta uma paleta, escreve como uma lista de trios de vermelho, verde e azul, e no momento em que o arquivo é montado não sobra lugar nenhum para a informação de transparência viver.

Um desenho renderizado a partir de um SVG tem pixel transparente em toda área onde nada foi desenhado, então cada um deles precisa virar algo opaco antes de a paleta ser montada. Eles são preenchidos com a cor de fundo escolhida nesta página, branca por padrão. Um logotipo desenhado sobre nada, portanto, chega como um logotipo sobre um cartão branco — invisível contra uma página branca e perfeitamente visível contra uma escura, o que vale conferir antes de mandar para qualquer lugar.

O seletor de cor de fundo nesta página decide o que as áreas vazias viram, e é lido antes de qualquer outra coisa acontecer: o preenchimento é pintado na tela primeiro, e o desenho renderizado é composto sobre ele numa passagem só. É essa ordem que faz as bordas saírem limpas. Preencher depois, ou reduzir uma renderização transparente e preencher em seguida, deixa uma franja de pixels parcialmente transparentes ao longo de cada curva, que o preenchimento então escurece.

Combine o valor com o que o GIF vai encontrar por trás. Se o destino é uma página branca, deixe como está. Se é um painel colorido e você sabe o valor hexadecimal, digite e a junção some. Se o destino pode mudar — um modelo que é branco este ano e escuro no próximo — coloque um retângulo cobrindo o quadro inteiro dentro do próprio desenho, para o arquivo carregar seu próprio fundo sem depender de um ajuste feito uma vez só.

Um SVG não tem tamanho próprio, então a conversão escolhe um: 1.024 pixels de largura por padrão, com a altura seguindo a proporção do desenho. Esse padrão serve bem para PNG e WebP, onde uma imagem grande de cor chapada custa pouco. Serve mal para GIF, porque os lugares que ainda pedem esse formato — assinatura de e-mail, avatar, ícone de fórum — quase sempre trabalham entre 100 e 300 pixels.

Use o ajuste de escala. Numa fração pequena, o mesmo desenho renderiza numa largura bem mais próxima do que esses destinos exibem, e o arquivo encolhe proporcionalmente à área. Mandar um GIF de 1.024 pixels onde 150 era o esperado significa que o software de outra pessoa vai reduzir por conta própria, geralmente mal e sempre sem avisar.

A redução é menos brutal do que o número 256 sugere, pelo menos no tipo de arte que costuma chegar como SVG. Preenchimento chapado usa uma cor cada, contorno usa mais uma, e a suavização de borda acrescenta uma faixa de tons intermediários ao longo de cada contorno — que num desenho de duas cores já é umas poucas dezenas de valores no total.

Em arte chapada típica, o quantizador costuma produzir uma paleta pequena o bastante para caber numa tabela de cores enxuta, e o resultado final costuma pesar poucos kilobytes mesmo num arquivo grande em pixels. Arte chapada comprime muito bem nesse formato; o GIF guarda sequências de índice idêntico, e um desenho é feito majoritariamente de sequências assim.

Degradê é o caso. Um preenchimento linear ou radial numa área grande gera centenas de valores distintos, e a paleta não consegue guardar todos, então o quantizador escolhe representantes e o resultado degrau em vez de misturar. Numa renderização de 1.024 pixels, esses degraus ficam largos o bastante para ver claramente.

Sombra suave, borda desfocada e sobreposição semitransparente fazem a mesma coisa, já que cada uma produz uma faixa de valores misturados. Se o desenho tem qualquer um desses e o destino não abre mão do GIF, renderize menor — menos pixels significa menos mistura distinta e menos faixamento visível.

SVG consegue animar. Tem elementos de animação nativa, responde a animação de CSS, e um arquivo pode carregar script. GIF também consegue animar, o que tenta a suposição de que os dois se conectam. Não conectam: o renderizador produz um quadro estático no estado inicial do desenho, e o codificador escreve exatamente um quadro no arquivo.

Então um logotipo animado sai na primeira pose, e nenhum ajuste muda isso. Produzir um GIF em movimento a partir de um SVG animado é um trabalho totalmente diferente — precisa que a animação seja reproduzida e capturada quadro a quadro, o que um renderizador de imagem estática não faz.

O GIF é lido por praticamente tudo desde 1987, e essa é a única propriedade que importa para quem escreveu a exigência. Cliente de e-mail, motor de fórum, portal de intranet e software corporativo escrito antes da metade dos anos 2000 leem todos um GIF, e quem especificou o formato queria uma resposta que não falhasse em nenhum deles.

Leia o resto dessa especificação enquanto está ali. Uma exigência antiga o bastante para nomear GIF costuma também fixar um tamanho máximo de pixel e um tamanho máximo de arquivo, e o formato raramente era a única restrição. Acertar tudo isso numa tentativa é mais rápido que três rodadas de recusa.

Vale uma tentativa antes de aceitar a troca. Muitos sistemas que dizem GIF no texto de ajuda aceitam PNG no código de validação, porque o texto foi escrito antes do código, e o código cobre o que quer que a biblioteca por trás leia. Se passar, a transparência sobrevive exatamente e a redução de cor nunca acontece.

Onde o GIF é genuinamente exigido, aceite e escolha a cor de preenchimento de propósito em vez de aceitar o padrão sem olhar. O resultado então é uma imagem de fundo chapado decidida, não uma que simplesmente aconteceu, e vai parecer igual para todo destinatário — que era o objetivo da exigência desde o início.

Solte a pasta. Cada SVG é renderizado na mesma escala e codificado separadamente, com tudo devolvido num ZIP. A paleta é montada por imagem, não pelo conjunto inteiro, então a mesma cor de marca pode cair num índice ligeiramente diferente em dois arquivos — invisível no uso, e um motivo para não esperar que os arquivos sejam idênticos byte a byte.

Cada arquivo também mantém seus próprios ajustes, então a cor de fundo é escolhida por linha, não uma vez para a pasta inteira. Para um conjunto que vai entrar num mesmo modelo, isso significa ajustar o mesmo valor em cada um, o que vale fazer antes de começar em vez de descobrir uma assinatura de cada vez.