Como vetorizar um ícone ou favicon

O antialiasing é o inimigo aqui. Num ícone de 32 píxeis, os píxeis cinzentos suaves ao longo de cada diagonal são uma grande fração da imagem, e um traçador não tem como saber que eram para ser uma aresta dura e não um tom intermédio real. Dá-lhe uma versão de 512 píxeis e a mesma aresta é uma transição de um píxel contra quarenta e nove píxeis limpos — a forma é inconfundível.

Se o ícone for monocromático, torna-o genuinamente monocromático antes de converter: preto puro sobre transparente, ou preto puro sobre branco, sem sombra suave e sem brilho interior subtil. Cada um desses efeitos torna-se formas no resultado, e formas no resultado são nós que tens de encontrar e eliminar.

Ao tamanho a que o estás a ver, quase qualquer traçado parece bom. O teste que importa é o número de nós: abre o caminho e conta os pontos. Um ícone bem desenhado tem pontos só onde a curva muda genuinamente de direção — um quadrado arredondado tem oito, um círculo tem quatro, um chevron tem três ou seis. Se uma forma simples voltou com sessenta, o traçador andava a perseguir ruído de píxeis, e essa forma vai renderizar devagar, vai dar trabalho a editar e vai parecer subtilmente errada ampliada.

No Lite e superiores, o controlo de detalhe é o que governa isto diretamente: menos detalhe funde mais agressivamente e produz menos nós, mais limpos. Desce-o até os cantos começarem a suavizar e depois volta atrás um passo. No Free, o nível é escolhido automaticamente, e a forma de o influenciar é a qualidade da origem.

Os conjuntos de ícones têm uma grelha — normalmente 24×24 com uma margem de segurança de dois píxeis, ou 16×16 para interfaces densas. Um caminho traçado cai onde os píxeis estiveram, o que é perto dessa grelha mas não nela, e, nos tamanhos pequenos de renderização, «perto» é o que faz um ícone numa fila parecer meio píxel mais pesado do que os vizinhos.

Ajusta os caminhos acabados a coordenadas inteiras no teu editor e define o viewBox do SVG para a tua grelha. É maçador à primeira e mecânico depois, e é o que separa um conjunto de ícones com ar desenhado de um com ar convertido.

Se estás a reconstruir um conjunto inteiro, converte-os todos num único lote para passarem por definições idênticas e depois normaliza o peso dos traços à mão em todo o conjunto. Uma família de ícones lê-se como família porque os traços coincidem; um conjunto traçado individualmente ao longo de várias sessões não vai coincidir, e a discrepância é visível mesmo quando nenhum ícone isolado parece errado.

A conversão em lote começa no Pro, que aceita 30 ficheiros de uma vez. Abaixo disso, os ficheiros convertem-se um a um, o que, para um conjunto de vinte, são uns minutos de cliques em vez de um impedimento.