Converta pixel art em vetor sem perder bordas nítidas

Você pode converter pixel art em vetor, mas primeiro decida se os pixels quadrados precisam continuar visíveis. Para preservar a aparência original, reconstrua a imagem como grade ou mosaico de objetos. Para transformar o sprite em uma ilustração suave, use vetorização de contornos. São resultados diferentes, e uma vetorização genérica não pode escolher o certo por você.

Se você edita um sprite de jogo no Scratch, o botão Convert to Vector muda o modo de edição sem vetorizar o bitmap. Use as verificações de edição de fantasias no Scratch para decidir se mantém os pixels, redesenha uma parte ou importa formas SVG vetorizadas; depois compare o centro da fantasia substituta com o original.

Se o objetivo real é apenas mostrar pixel art nítida em um site ou jogo, talvez você nem precise de SVG. Um PNG no tamanho correto, ampliado por vizinho mais próximo, costuma ser menor e mais fiel ao original; na web, a propriedade image-rendering oferece os comportamentos crisp-edges e pixelated para preservar bordas duras.

Três resultados para três trabalhos diferentes

A questão é menos qual formato é “melhor” e mais o significado dos blocos. Em pixel art, bordas em degraus costumam ser intencionais. Suavizá-las pode ser tão destrutivo quanto borrar um desenho de linhas.

Preservar a grade e suavizar contornos são trabalhos diferentes

Caminho 1: preserve exatamente a grade de pixels

A conversão vetorial mais literal transforma células raster em retângulos vetoriais. Um pixel vermelho vira um quadrado vermelho. Uma sequência de pixels vermelhos adjacentes pode continuar como quadrados separados ou ser unida em uma forma retangular maior quando isso não mudar a silhueta.

Antes de começar, descubra as dimensões reais da grade da arte. Um sprite exibido a 800 por 800 pixels pode ter começado como grade de 32 por 32 ampliada por vizinho mais próximo. A estrutura de 32 por 32 é o que você quer reproduzir, não as dimensões ampliadas de exibição.

Fluxo de Object Mosaic no Illustrator

A Adobe documenta um caminho integrado para converter um bitmap incorporado em mosaico:

1. Insira a pixel art original no Illustrator e incorpore-a.
2. Selecione a imagem e escolha Object > Create Object Mosaic.
3. Defina a quantidade de peças conforme a grade original de pixels, se souber qual é.
4. Use peças quadradas e saída colorida.
5. Mantenha o raster original até inspecionar o mosaico; depois remova ou oculte.
6. Compare a silhueta externa, espaços internos e paleta com o original em zoom alto.

A documentação de Create Object Mosaic da Adobe descreve o comando, a opção de peças quadradas, a configuração de cor e o tratamento do raster original. O fluxo de pixel art é um uso prático desse comportamento documentado de mosaico.

Um mosaico de objetos pode ser estruturalmente fiel e ainda ineficiente. Um sprite de 64 por 64 tem 4.096 células antes de qualquer união. Remova células totalmente transparentes, combine retângulos adjacentes da mesma cor quando possível e evite levar objetos invisíveis ao SVG final.

Caminho 2: crie um SVG em grade sem Illustrator

Você pode construir o mesmo tipo de arquivo com um script que reconheça pixels ou um conversor específico. O princípio importa mais que o aplicativo:

1. Leia o original no tamanho nativo da grade.
2. Mapeie cada pixel não transparente para um retângulo vetorial exato.
3. Preserve os valores da paleta sem suavização.
4. Una células vizinhas apenas quando a forma unida produzir a mesma grade visível.
5. Exporte com um viewBox SVG correspondente às dimensões nativas da grade.
6. Teste o SVG em tamanhos de exibição inteiros e não inteiros.

O projeto de código aberto vectorize-pixelart é um exemplo de utilitário de conversão específico para pixels. Também demonstra um limite geral: grades grandes ou complexas podem produzir SVGs pesados. Trate um utilitário antigo primeiro como material de pesquisa. Revise seu código e estado de manutenção antes de incorporá-lo a um fluxo de produção.

Se você conhece marcação SVG, um sprite minúsculo também pode ser reconstruído manualmente com elementos <rect>. Isso é razoável para um ícone de 12 por 12. Não é uma boa maneira de passar a tarde com uma cena detalhada.

Caminho 3: suavize as formas de propósito

Às vezes, os pixels são um rascunho, não a identidade. Você pode querer transformar personagem, flor ou ícone em um adesivo limpo, gráfico impresso ou logotipo com contornos arredondados.

Se você quer deliberadamente essa interpretação suavizada, o PerfectVector se encaixa no caminho de contornos. Envie a maior versão ampliada por vizinho mais próximo que tiver e avalie o resultado como uma nova ilustração:

1. Remova a suavização primeiro. Pixels suavizados nas bordas criam cores extras e pequenas formas periféricas.
2. Controle a paleta. Se o original usa oito cores, a vetorização não deveria inventar dezenas por causa de compressão ou desfoque.
3. Inspecione diagonais em degraus. Decida quais devem virar segmentos retos e quais devem virar curvas.
4. Confira buracos e espaços de um pixel. Pequenas aberturas podem fechar quando regiões vizinhas são simplificadas.
5. Revise a quantidade de nós. O objetivo de suavizar não é substituir cada canto quadrado por várias curvas minúsculas.
6. Teste no tamanho de destino. Uma curva suave agradável no tamanho de pôster pode apagar um rosto ou uma mão no tamanho de ícone.

Esse caminho muda a arte. Salve o PNG original junto do SVG para que ninguém confunda a interpretação vetorial com uma versão exata para arquivo.

Problemas de preparação que pioram todos os caminhos

O original foi redimensionado com suavização. Volte ao sprite nativo ou redimensione por interpolação de vizinho mais próximo. Quando novas cores misturadas nas bordas já foram incorporadas, recuperar a grade original é mais difícil.

O arquivo é JPG. A compressão cria blocos de cor e halos ao redor de cada borda dura de pixel. Use o PNG original sempre que possível.

O fundo transparente virou branco sólido. Um fundo branco pode virar milhares de células indesejadas ou uma grande forma vetorizada. Restaure a transparência antes da conversão e confira o resultado sobre uma tela contrastante. Nosso guia de fundos transparentes em SVG cobre essa inspeção.

A arte contém efeitos semitransparentes. Brilhos, sombras e opacidade parcial não são células tradicionais de pixels. Decida se vai preservá-los como efeitos raster, reduzi-los a cores sólidas ou redesenhá-los para a versão vetorial.

Você precisa de vetor para um site?

Não necessariamente. Se a arte é um sprite de jogo ou ícone de interface, PNG pode continuar sendo o arquivo mestre correto. Use um recurso no tamanho nativo, amplie por múltiplos inteiros quando possível e configure o navegador ou mecanismo de renderização para usar interpolação pixelada ou de vizinho mais próximo.

Uma grade SVG ajuda quando a paleta precisa ser editada como objetos, o trabalho será impresso em tamanho grande ou o sistema de entrega exige vetor. Não torna automaticamente um pequeno recurso de tela mais leve. Um objeto vetorial por célula pode pesar mais que um PNG compacto.

Este é um caso em que “SVG redimensiona para sempre” é verdade, mas incompleto. A arte pode redimensionar para sempre e ficar cara para armazenar, editar ou renderizar. Nosso guia de PNG versus SVG explica a decisão mais ampla sobre formato, e o que significa vetorização de imagem mostra por que vetorizações convencionais favorecem formas em vez de grades de pixels.

Conferência final

Antes de entregar, compare o arquivo com o original no tamanho nativo e no tamanho pretendido de saída.

• As dimensões da grade correspondem ao original.
• Nenhuma cor de borda suavizada foi introduzida.
• Células transparentes continuam transparentes.
• Silhuetas em degraus estão intactas no caminho de preservação.
• Bordas suavizadas são intencionais no caminho de contornos.
• Espaços de um pixel, olhos, realces e buracos internos continuam legíveis.
• Células repetidas da mesma cor são simplificadas apenas onde a imagem permanece idêntica.
• O SVG não incorpora o raster original por acidente. Se incorporar, ainda pode parecer pixelado apesar da extensão.

O fluxo mais claro é o que identifica sua troca. Preserve a grade quando os pixels forem a arte. Suavize os contornos quando quiser uma nova interpretação vetorial. Mantenha PNG quando vetor não acrescentar controle útil.

Fontes

1. Adobe Illustrator — criação de esboços e mosaicos — comando Object Mosaic, peças quadradas, saída colorida e exigência de raster incorporado.
2. MDN — CSS image-rendering — renderização semelhante à de vizinho mais próximo para pixel art na web.
3. W3C — especificação PNG, terceira edição — modelo raster sem perda e comportamento do canal alfa do PNG.
4. W3C — formas básicas SVG — geometria de retângulos usada em SVGs literais de células de grade.
5. W3C — sistemas de coordenadas SVG e viewBox — mapeamento de um sistema de coordenadas de grade nativa para uma área de visualização SVG.

Se quiser contornos suaves em vez de uma grade preservada, passe a arte pelo PerfectVector e compare silhueta, espaços de um pixel e pequenos detalhes com o arquivo mestre em pixels antes de usar.