Converter GIF para SVG

Vetorizar funciona encontrando as fronteiras entre áreas de cor parecida e desenhando um contorno em volta de cada área. Isso significa que o processo funciona melhor quando essas áreas de fato existem, com bordas duras e sem variação sutil dentro delas.

Uma imagem indexada é exatamente isso por construção. Um quadro de GIF é desenhado a partir de uma paleta de no máximo 256 cores, então todo pixel é um de um conjunto pequeno de valores exatos, e as regiões já são chapadas antes mesmo do vetorizador olhar para elas. A limitação que faz do GIF um formato ruim para fotografia é, nesta conversão específica, o que faz dele uma boa origem.

Vale ser preciso sobre o que sai daqui. O SVG não é o desenho que alguém fez em 1998 e exportou como GIF; é um conjunto novo de caminhos ajustado aos pixels dessa exportação. Onde o original tinha um círculo perfeito, o traçado tem uma curva fechada que segue um círculo feito de pixels.

Nos tamanhos em que essas imagens costumam ser usadas, essa diferença não aparece. O que aparece é onde o original tinha algo que um caminho não consegue representar — um degradê vira uma faixa de bandas escalonadas, uma sombra suave vira várias formas concêntricas, e a suavização ao longo de uma curva vira um contorno fino extra numa cor intermediária.

A opção de cores reduz a imagem a essa quantidade de preenchimentos chapados antes de qualquer contorno ser desenhado, e é o ajuste com maior efeito tanto na aparência quanto no tamanho do resultado. Quatro dá as formas mais limpas possíveis e é certo para uma marca de cor única. Oito é o padrão e cobre a maioria dos logotipos. Dezesseis e trinta e dois seguem a origem mais de perto e multiplicam a quantidade de caminhos.

O instinto de escolher o número mais alto costuma ser errado. Mais cores significa que a franja suavizada em volta de cada borda ganha formas próprias em vez de ser absorvida no preenchimento dos dois lados, e essas formas são tanto o grosso do arquivo quanto a primeira coisa que você apagaria à mão. Começar baixo e subir só se algo importante sumiu é o caminho mais rápido.

O ajuste de detalhe controla dois limites de erro e um tamanho mínimo de forma. Suave aceita um ajuste mais frouxo às bordas de pixel e descarta qualquer forma menor que dezesseis pixels; equilibrado reduz essas tolerâncias pela metade e descarta abaixo de oito; nítido segue os pixels de perto e mantém qualquer coisa acima de dois.

O efeito prático é sobre a poeira de pixels. A suavização deixa um espalhado de fragmentos de um e dois pixels ao longo de cada borda, e em nítido todos viram caminhos — centenas deles, invisíveis individualmente e responsáveis pela maior parte do tamanho do arquivo. Suave remove esses fragmentos e arredonda um pouco os cantos no processo. Para um logotipo que vai ser ampliado, suave quase sempre é a resposta melhor; para pixel art que você quer de fato preservar, nítido é o único que mantém ela.

Se o GIF foi feito a partir de uma fotografia ou de um degradê, o codificador quase certamente aplicou dithering — espalhando pixels de duas cores da paleta num xadrez para o olho fazer a média. Isso parece uma transição suave e não é uma.

Para um vetorizador é uma quantidade enorme de regiões alternadas minúsculas, e cada uma vira um caminho. O resultado é gigante, o arquivo demora para desenhar, e o visual sai posterizado em vez do degradê que estava imitando. Este é o indicador mais confiável de se a conversão vai funcionar: dê zoom no GIF, e se as áreas chapadas se revelarem um xadrez, pare por aqui.

Qualquer coisa com a borda maior acima de 1.600 pixels é reduzida a esse tamanho antes dos contornos serem encontrados. O custo de traçar cresce com a quantidade de bordas, não com o tamanho do arquivo, e uma imagem grande tem borda em quase todo lugar, então sem um teto uma origem grande produziria um SVG de vários megabytes em dezenas de segundos.

Para esta conversão o teto não custa nada, e isso não é um jeito de amenizar. O resultado independe de resolução: uma marca traçada a partir de uma imagem de 1.600 pixels e a mesma marca traçada a partir de uma de 4.000 pixels renderizam de forma idêntica em qualquer tamanho, na tela ou impressas. O que muda é o quanto os caminhos seguem de perto a grade de pixels original, uma diferença que só aparece dando zoom na origem.

Uma captura de tela contendo texto foi medida em quarenta vezes o tamanho da imagem de origem depois de traçada. Cada letra suavizada vira uma coleção própria de formas, os vãos internos das letras viram caminhos separados, e o resultado sai gigante e um pouco errado em cada traço.

O certo quando a arte contém palavras é traçar só o símbolo e escrever as palavras como texto de verdade no SVG depois, na fonte real. Isso produz um arquivo menor, uma saída mais nítida em qualquer tamanho, e algo que dá para editar ou traduzir depois. Traçar o texto só faz sentido quando a letra é de fato arte customizada, não uma fonte.

Nada aqui tenta prever se o seu GIF específico vai traçar bem. Um palpite baseado na quantidade de cores seria um chute, e a resposta real está disponível um instante depois, de graça: trace o arquivo e veja o que saiu contra o que entrou.

A página mostra os dois tamanhos, então um resultado quarenta vezes maior se anuncia na hora. Trate isso como um sinal, não como curiosidade — um SVG maior que a origem está dizendo que a imagem não tinha regiões chapadas para encontrar, e nenhuma combinação de ajustes muda esse fato sobre a imagem.

O vetorizador é uma biblioteca JavaScript pequena — 46 KB, escolhida em parte porque as alternativas melhores têm licenças que um site estático não consegue respeitar — e roda na aba. O GIF é decodificado, reduzido, traçado e gravado como SVG sem que nenhuma requisição saia do seu navegador.

O benefício prático além da privacidade é a velocidade em arquivos pequenos. Não há upload, não há fila, não há download do resultado vindo de outro lugar, então um logotipo traça em bem menos de um segundo, e testar três quantidades diferentes de cores não custa nada além dos cliques.