Qual mecanismo de vetorização você deve usar? Um guia para os quatro modos do SVGSnap

Um amigo me mandou uma mensagem na semana passada com uma captura de tela da página de upload e uma única pergunta: "Por que há quatro botões aqui? Qual devo escolher?" Pergunta justa. Os padrões funcionam na maioria das vezes, mas se você já se perguntou o que os outros três fazem, este é o post.

O SVGSnap inclui quatro mecanismos de vetorização. Cada um é construído para um tipo diferente de imagem, e escolher o errado é a principal razão pela qual uma conversão fica pior do que você esperava.

Por que quatro mecanismos em vez de um

A primeira versão deste site foi lançada com um rastreador, o vtracer. É excelente para ilustrações coloridas, logotipos e a maioria das artes derivadas de fotos. Mas "a maioria" deixa muitos casos de fora.

Um esboço a lápis rastreado como uma região colorida produz dois contornos para cada linha, um para cada lado do traço da caneta, o que dobra o tamanho do arquivo e parece visão dupla quando você recolore. Um sprite de pixel art rastreado com curvas perde todo o sentido de ser pixel art. Uma assinatura rastreada com regiões se torna uma mancha gorda em vez de um único traço editável. Problemas diferentes, matemática diferente.

Então o trabalhador cresceu. Hoje há quatro mecanismos e cada um é construído em torno de um tipo específico de imagem.

Ilustração: o rastreador multiuso

Este é o padrão. Por baixo dos panos é o vtracer, um rastreador de região em Rust que lê a imagem, agrupa pixels próximos por cor e desenha curvas de Bézier ao redor das bordas de cada grupo. Use para qualquer coisa com cor: logotipos, ícones, ilustrações, retratos vetoriais, capturas de tela de interface, fotos rastreadas.

As três configurações que você pode ajustar são modo de cor, nível de detalhe e suavização.

Modo de cor controla a paleta. Cor completa preserva gradientes (certo para ilustrações) mas produz arquivos maiores. Limitada ou preto e branco força formas planas, que é o que você quer para logotipos e serigrafia.

Nível de detalhe decide quão agressivamente o rastreador simplifica. Baixo dá menos caminhos e curvas mais limpas ao custo de detalhes finos. Alto preserva cada ruga da fonte, incluindo ruído. Para um logotipo plano, diminua. Para uma aquarela, aumente.

Suavização mapeia para o limite de canto do vtracer. Valores mais altos arredondam cantos; valores mais baixos mantêm ângulos agudos. Se sua marca geométrica parece um animal de balão após a conversão, sua suavização está muito alta.

Esboço: tinta preta no papel branco

Por trás do botão Esboço está o potrace, o mesmo rastreador que o Inkscape e uma centena de outras ferramentas usam há duas décadas. É a implementação de referência para uma entrada específica: um bitmap preto e branco. Lápis no papel. Desenhos a tinta. Flash de tatuagem. Uma assinatura digitalizada. Fantoches de sombra. Qualquer coisa que se resume a marcas escuras em um fundo claro.

Não pegará cor da fonte, mesmo se houver alguma, porque a primeira coisa que faz é limitar a imagem para 1 bit puro. Pixels mais escuros que o limite se tornam primeiro plano; tudo o mais se torna fundo. O rastreador então desenha contornos de Bézier limpos ao redor das regiões do primeiro plano.

Os três controles são limite, pontilhado e suavização.

Limite é a linha entre "este pixel é parte do desenho" e "isto é papel". Mova para cima se o scanner pegou muita textura do papel. Mova para baixo se traços de lápis claro estão desaparecendo.

Pontilhado é o --turdsize do potrace (sim, realmente). Remove regiões conectadas menores que o valor. Um pontilhado de 2 mantém o ponto em cada i; um pontilhado de 10 vai comer sua pontuação. Comece em 2 a 4.

Suavização mapeia para o alphamax do potrace, que controla quão disposto o rastreador está para arredondar cantos. Linhas de caneta e lápis são ligeiramente trêmulas mesmo quando você desenha com cuidado, e uma suavização maior transforma o tremor em curvas limpas. Para um logotipo entintado com ângulos agudos, diminua.

Se você tem um esboço real no papel e quer um passo a passo mais profundo, escrevi um post separado sobre vetorizar esboços a lápis e desenhos digitalizados que cobre como digitalizar bem desde o início.

Traçados: vetores de linha única editáveis

O terceiro botão diz Traçados. Internamente é o mecanismo de linha central, e faz algo completamente diferente dos dois primeiros.

Rastrear e Esboço ambos contornam linhas. Se você desenhar uma linha preta de 4 pixels de largura e executar qualquer um deles, você obtém um vetor com dois caminhos paralelos, um para cada lado do traço, e um preenchimento no meio. O resultado parece certo, mas você não pode "engrossar" a linha porque não há linha para engrossar. Há apenas um retângulo preenchido fino.

O modo Traçados esqueletiza a imagem primeiro. A linha de 4 pixels de largura se torna uma espinha de 1 pixel de largura, e o mecanismo desenha um único <path> SVG com estilo de traço ao longo dessa espinha. Agora o caminho tem um atributo stroke-width real. Você pode mudá-lo de 2 para 8 em qualquer editor vetorial e a linha fica mais grossa. Você pode recolorir mudando o atributo stroke. Você pode animá-la como um efeito de desenho.

Este é o mecanismo que você quer para arte desenhada à mão que planeja editar. Flash de tatuagem que você vai recolorir no Illustrator. Uma assinatura que você quer animar. Um esboço botânico que precisa ser entregue em três espessuras de traço diferentes sem re-rastrear.

As configurações são limite (mesma ideia do Esboço), largura do traço e cor do traço. A saída também passa por simplificação Ramer-Douglas-Peucker, que é uma forma elegante de dizer "descartar pontos redundantes". Se seus traços parecem entrecortados, a simplificação foi muito agressiva. Se parecem ruidosos, não foi agressiva o suficiente.

Pixel: vetor 1:1 para sprites e ícones

O quarto mecanismo é o mais opinativo. Existe porque o rastreamento de curvas destrói pixel art.

Se você rastrear um sprite 32x32 com vtracer, o rastreador faz média de pixels adjacentes de cor similar, ajusta curvas ao resultado, e as bordas nítidas de pixel se transformam em borrões suaves de Bézier. Seu ícone de espada agora parece um macarrão molhado.

O modo Pixel toma o outro caminho. Cada sequência contígua de pixels da mesma cor se torna um <rect> alinhado ao eixo com shape-rendering="crispEdges". Duas passadas de codificação run-length (uma horizontal, uma vertical) mesclam sequências que são idênticas através das linhas, então você não acaba com um rect por pixel. O resultado é um vetor real. Cada pixel é uma forma editável, e escala sem perder o caráter pixelizado que o tornou pixel art em primeiro lugar.

É limitado a 2048 pixels por lado. Pixel art é pequena por definição, e remover o limite significa uma captura de tela 4K se tornando um SVG de 200MB.

A única configuração é tamanho da paleta. Se sua entrada tem mais cores únicas que o alvo (padrão 256), o mecanismo as quantiza para baixo com corte mediano. Isso é o que permite você alimentar uma pintura digital e obter uma saída limpa no estilo pixel art em vez de uma falha. Diminua para 16 ou 32 para visual chunky de jogos retrô; mantenha em 256 para sprites precisos.

Como escolher, em 30 segundos

Se você não tem certeza de qual mecanismo usar, aqui está uma árvore de decisão que você pode executar em sua mente.

A fonte tem cor que você quer manter? Use Ilustração. Isso é verdade para quase todo logotipo, todo ícone, toda ilustração. Padrão primeiro, depois ajuste o modo de cor e nível de detalhe se a primeira passada não estiver certa.

A fonte é um desenho preto e branco no branco? Esboço. Saída mais limpa que Ilustração na mesma entrada, sempre.

É um desenho de linha que você planeja editar, recolorir ou animar os traços? Traçados. A saída dá caminhos reais com atributos de traço que você pode mudar no Illustrator, Figma, ou diretamente no arquivo SVG.

É pixel art, um sprite pequeno, ou um ícone menor que 256x256? Pixel. Qualquer outra coisa com esse mecanismo parecerá errada ou atingirá o limite de tamanho.

Na maioria das vezes a resposta é Ilustração. Os outros três existem para os casos onde Ilustração é tecnicamente um rastreador, mas não o rastreador certo.

Erros que vi pessoas cometerem

Executar Esboço em um logotipo colorido. O passo de limite descarta a cor. Você obtém uma silhueta preta do seu logotipo e se pergunta onde foi parar a cor da marca. Execute Ilustração em um logotipo colorido. Esboço é apenas para fontes preto e branco.

Executar Pixel em uma fotografia. Ou o limite de tamanho a rejeita (bom) ou a quantização de paleta executa e dá uma versão posterizada que pode ou não ser o que você queria. Se você quer um vetor real de uma foto, use Ilustração com alto detalhe. Se você quer o visual posterizado de propósito, é para isso que serve a quantização Pixel.

Executar Ilustração em um esboço desenhado à mão. Você obterá um resultado utilizável. Você também obterá linhas com contorno duplo, ruído de textura do papel incorporado nas formas, e um arquivo duas vezes maior que precisa ser. Esboço lida com essa entrada em uma passada.

Esperar que Traçados lide com regiões preenchidas. O passo de esqueletização assume linhas finas. Alimente um quadrado preto sólido e ele esqueletiza para um único ponto no meio. Use Traçados para line art, não para preenchimentos.

Quando você quer combinar

Um fluxo de trabalho que vale mencionar: se sua fonte é um esboço ou ícone de baixa resolução, execute através do ampliador de imagem em 2x ou 4x primeiro, depois converta. Cada mecanismo funciona melhor com mais pixels para ler. Vi a mesma digitalização ir de "mal utilizável" para "perfeita" com um passo de ampliação no meio.

Você também pode remover o fundo antes de converter se sua fonte tem ruído, um pano de fundo colorido, ou textura de papel. Entrada mais limpa dá um vetor mais limpo, independentemente de qual mecanismo você escolher.

Se você quer um olhar mais próximo em um caso de uso específico, há passo a passos para vetorizar logotipos para impressão e produtos e para vetorizar desenhos digitalizados que vão fundo no lado das configurações.

O conversor em si está em svgsnap.com. O seletor de mecanismo é a fileira de quatro botões sob a visualização do arquivo. Escolha um, aperte converter, veja como fica. Se a saída estiver errada, mude o mecanismo, não as configurações. Essa geralmente é a correção mais rápida.