Dois arquivos que terminam em .svg
Abra dois SVGs "convertidos" num editor de texto. O primeiro tem um único elemento <image> cujo href é uma longa sequência data:image/png;base64,…. O segundo tem elementos <path> com dados de coordenadas d="M12 4 L…" e uma cor fill cada um. Os dois abrem no navegador e os dois parecem certos no tamanho original. Só o segundo é um vetor.
O embrulho é exatamente o que parece: o bitmap original, carregado dentro de um contêiner SVG. Amplie e o navegador aumenta os pixels, então as bordas borram do mesmo jeito que o PNG borraria. Plotters de recorte e editores vetoriais não conseguem selecionar uma forma dentro dele, porque não há formas — só um retângulo de pixels.
Um SVG traçado descreve a imagem como geometria. Cada região de cor vira um contorno fechado feito de segmentos retos e curvas de Bézier; o renderizador preenche esse contorno no tamanho que você pedir, então as bordas continuam nítidas com 10 mm ou com 10 m.
O que o png2svg.art gera
O traçado agrupa os pixels da sua imagem num número pequeno de cores chapadas e depois contorna cada região de cor com segmentos retos e curvas de Bézier. Onde duas cores se encontram, elas dividem uma única borda, então não abre nenhuma fresta entre elas. O resultado é um <path> para cada forma, preenchido com a sua cor, agrupado por objeto e aninhado conforme o que envolve o quê (com Camadas em Por cor, um <path> por cor). Os furos, como o miolo de um "O", continuam abertos com qualquer regra de preenchimento do SVG. Não há elemento <image>, nem bitmap incorporado, nem script: todo resultado é verificado antes de ser guardado, e ele só pode conter caminhos, grupos e títulos.
Como a geometria é de verdade, a prévia informa a quantidade real de caminhos e a paleta usada. Se um logo volta com 6 caminhos e 6 cores, é literalmente isso que está no arquivo.
O "Fe" de um dos nossos logotipos de exemplo, ampliado na mesma medida: o PNG de 256 px mostra a sua grade de pixels (à esquerda); o SVG traçado a partir da imagem em tamanho original desenha as mesmas bordas como curvas, nítidas em qualquer tamanho (à direita).
Como conferir qualquer SVG você mesmo
- Abra o arquivo num editor de texto simples. Procure elementos
<path,<polygonou<circle— geometria. Procure<image— um embrulho. - Abra no navegador e dê zoom até 800 %. Bordas vetoriais continuam nítidas; um embrulho fica borrado ou quadriculado.
- Importe num editor vetorial como o Inkscape. Um traçado deixa você clicar em formas individuais; um embrulho é selecionado como uma única imagem.
- Compare o tamanho do arquivo. Um PNG embrulhado é no mínimo do tamanho do PNG (o base64 acrescenta cerca de um terço); um logo traçado normalmente tem poucos kilobytes.
O que o traçado não consegue fazer
O traçado reconstrói regiões chapadas. Ele não recupera detalhes que nunca estiveram nos pixels: um ícone de 64 pixels de largura, traçado com qualquer configuração, continua sendo um design de 64 pixels de largura, com as curvas deduzidas desses pixels. Fotos e degradês suaves viram faixas de cor chapada (veja o guia sobre por que fotos ficam posterizadas). Texto vira contornos, não texto editável. Essas são propriedades da técnica, não uma configuração que dá para desligar. Que tipos de imagem vetorizam bem, e quais não, está na página de imagem para vetor.
Por que a prévia importa
O png2svg.art mostra uma prévia com marca d'água do resultado traçado antes de você desbloquear qualquer coisa; o SVG limpo só é gerado para download depois do desbloqueio. A prévia é desenhada com os mesmos caminhos que você baixaria, então, se letras pequenas se juntaram ou uma linha fina se partiu, você vê isso antes de gastar um crédito. Desbloquear um SVG limpo custa 1 crédito; toda conta verificada recebe 3 créditos grátis.