Quantização de cores
Um JPG carrega milhares de tons por causa dos gradientes. O K-means agrupa os vizinhos e devolve uma paleta curta de cores chapadas.
Vetorização por separação de cores
Pixel não
escala.
Curva sim.
Trocar a extensão do arquivo não vetoriza nada. É preciso reduzir a paleta, separar a imagem em camadas de tinta, seguir o contorno de cada uma e reescrever essa borda como curva de Bézier. É isso que acontece aqui, com os parâmetros na sua mão.
A mesa
Traçar e conferir lado a lado
PNG, JPG, WebP ou AVIF entram; um SVG de caminhos sai. O painel mostra quantos caminhos e nós o traçado gerou — os dois números que decidem se o arquivo vai ficar leve ou travar o navegador.
01 · Imagemvazio
02 · Receitamarca
Logo e ícone: paleta curta, cantos vivos, contorno limpo.
03 · Ajustes
Modo de corpaleta
Nenhuma imagem na mesa
- Dimensão
- —
- Peso
- —
- Recorte
- cheio
O traçado aparece aqui
- Caminhos
- —
- Nós
- —
- Peso
- —
- Gzip
- —
Envie uma imagem, escolha a receita e vetorize.
Da grade à curva
Cinco etapas, nesta ordem
A ordem importa: cada etapa só funciona com o resultado da anterior. Trocar a paleta no fim, por exemplo, obrigaria a refazer todo o contorno.
Separação em camadas
Cada cor da paleta vira uma máscara monocromática própria — uma chapa por tinta, como no fotolito de uma gráfica.
Detecção de contorno
A varredura percorre a máscara e marca a fronteira exata onde os pixels de uma camada terminam e os da próxima começam.
Ajuste de curvas
A escada serrilhada vira equação: curvas de Bézier com o menor número de nós que ainda descreve a forma sem deformá-la.
Montagem do SVG
Os caminhos são empilhados na ordem certa dentro de um XML: cada camada vira um <path fill> com as coordenadas arredondadas.
Fotos de pessoas
Um rosto vira ilustração, não retrato
Pele com degradê suave, sombra complexa e fio de cabelo não têm como virar equação sem perder o que os define. O traçado devolve uma ilustração posterizada — o visual de pop art ou de arte vetorial de jogo. Sabendo disso, dá para tratar o efeito como escolha em vez de acidente.
| Elemento da foto | O que acontece no SVG | Consequência |
|---|---|---|
| Pele e iluminação | Os degradês viram camadas de cor sólida empilhadas. | Manchas no rosto, com cara de mapa topográfico. |
| Olhos, dentes e expressão | As curvas simplificam justo onde o detalhe é mínimo. | Traços levemente deformados, com aparência derretida. |
| Cabelo e roupa | Os fios individuais somem na quantização. | Blocos genéricos de cor no lugar da textura. |
| Tamanho do arquivo | O traçado cria milhares de tags <path>. | SVG que passa de 10 MB e trava o navegador. |
Quando o efeito é o objetivo
- Ilustração estilizada, pop art, pôster
- Estampa de camiseta e recorte em vinil
- Ícone ou avatar a partir de uma foto
- Arte que precisa ampliar sem perder nitidez
Quando o realismo é o objetivo
- Rugas, poros e brilho natural da pele
- Detalhe dos olhos e do cabelo fio a fio
- Iluminação e sombra contínuas
- Qualquer uso em que a foto precise parecer foto
Diagnóstico
Por que a maioria dos conversores erra
Quase sempre o problema não está no algoritmo de traçado, e sim no que vem antes e depois dele.
O ruído vira vetor
Artefatos de compressão do JPG cercam cada borda de pontinhos. Sem uma filtragem antes da leitura, o traçador entende cada ponto como uma forma e devolve um arquivo pesado e deformado.
Cor demais, cor de menos
Poucas cores apagam sombras e achatam a forma. Cores demais criam milhares de micro-vetores sobrepostos que travam o navegador na hora de renderizar.
Serrilha ou pudim
Sem controle de tolerância, o contorno sai escadinha ou é arredondado até perder os cantos vivos. Logo e foto pedem números diferentes, e o mesmo botão não serve para os dois.
Por trás do projeto
Fiz porque eu precisava
Eu precisava vetorizar imagens no meio de outro trabalho e não achei um site que fizesse isso direito. Uns geravam SVG quebrado, outros só saíam em preto e branco, e nenhum deixava eu configurar o resultado do jeito que eu queria — nem comprimir o arquivo depois, para não ficar pesado. Por isso construí o Fotolito: um vetorizador com os parâmetros do algoritmo na minha mão, e a compactação embutida no fim do processo.
A seguir na mesa
Upscaling
Aumentar a resolução de uma imagem pequena antes de traçar, para o vetorizador ter mais detalhe real para trabalhar.
Recorte livre
O recorte atual já corta antes de vetorizar; a ideia é refinar isso, com proporção travada e ajuste fino da seleção.
Remoção de fundo
Isolar o assunto automaticamente antes da vetorização, sem precisar arrastar a seleção à mão.
Mais tratamentos
Outros ajustes de imagem que hoje exigem abrir um editor à parte, direto na mesma mesa.