Converter WebP para SVG

O WebP nesta página quase sempre veio de um site, e sites que servem WebP costumam ser construídos por alguém que também tem o vetor. Três lugares valem checar, e os três levam menos de um minuto: peça /favicon.svg no domínio, abra o código-fonte da página e busque «.svg», ou observe o painel de rede enquanto a página carrega e veja o que ela buscou.

Muitos sites entregam sua logo como SVG inline no HTML, o que significa que a arte de verdade — curvas reais, texto real, formas nomeadas — está sentada na marcação e pode ser copiada direto para um arquivo. Uma cópia traçada é uma reconstrução com contornos onde havia letras e segmentos ajustados onde havia curvas. Quando o original está a um view-source de distância, pegá-lo é estritamente melhor que aproximá-lo, e esta página é para quando não está.

WebP são dois formatos compartilhando uma extensão: uma imagem parada e uma animação, e boa parte dos gráficos pequenos em loop pela web são do segundo tipo. O decodificador usado aqui é o caminho de imagem parada da libwebp, sem desmultiplexador anexado, então um arquivo animado não é parcialmente convertido — é recusado, e você recebe uma mensagem legível de «não foi possível ler este arquivo» em vez de um primeiro quadro silencioso.

Essa é a melhor das duas falhas possíveis, e é proposital em outros lugares do site também. Uma animação com perdas e uma sem perdas foram testadas contra o decodificador, e as duas foram recusadas. Se você precisa do movimento, WebP para GIF ou WebP para MP4 mantém. Se você só queria um quadro para traçar, abra a animação num navegador, pause, tire um print do quadro desejado e trace o print — lembrando que um print em si é um material de entrada ruim para traçar se contém texto.

WebP pode ser codificado dos dois jeitos, e a extensão não diz qual. Um WebP sem perdas equivale a um PNG: as bordas no arquivo são as bordas que o designer desenhou, e traça com uma limpeza próxima de um export. Um WebP com perdas passou por uma transformada que suaviza áreas planas e ondula em fronteiras duras, exatamente como o JPEG, e essas ondulações são estrutura no que diz respeito ao traçador.

O sintoma é uma logo cujos contornos parecem levemente acolchoados, com pequenas formas satélites grudadas em toda borda que deveria ser nítida. Detalhe suave remove a maioria delas por serem pequenas, e uma contagem menor de cores remove mais ainda porque há menos entradas de paleta para a ondulação ocupar. Nenhum dos dois recupera a borda original. Se o site também serve um PNG do mesmo ativo — muitos servem, como reserva num elemento `<picture>` —, esse PNG é o arquivo melhor para traçar.

Sites servem imagens no tamanho que o layout usa, muitas vezes por um serviço de redimensionamento, e o WebP existe exatamente para que esse tamanho seja o menor possível. Uma logo de cabeçalho entregue a 240 ou 320 pixels de largura é normal, e é toda a informação que o traçador tem para ajustar contornos.

A consequência é que cantos arredondam e traços finos tremem, e nenhum ajuste nesta página conserta, porque o conserto é mais pixels. Antes de converter, tente o óbvio: peça o mesmo arquivo com um parâmetro de largura maior na URL, procure uma versão @2x ou @3x, ou confira se o site tem uma página de imprensa ou de marca — organizações que publicam uma quase sempre publicam um SVG ou EPS lá. Qualquer coisa acima de 1.600 pixels é reduzida antes de traçar, então não há benefício além disso, mas a diferença entre 320 e 1.600 é real e visível.

Quatro para uma marca de uma ou duas cores, oito para uma ilustração plana ou um selo com alguns preenchimentos, e mais só quando algo estiver visivelmente faltando. Oito é o padrão e uma primeira tentativa razoável para a maioria do que se salva de uma página.

Num WebP com perdas, o argumento para ficar baixo é mais forte que o normal. Toda entrada extra de paleta dá ao quantizador um lugar para colocar a ondulação de compressão, então subir de oito para dezesseis frequentemente acrescenta formas feitas inteiramente de artefato. Tente quatro primeiro em qualquer coisa que pareça uma logo; se a marca sobreviver, é ao mesmo tempo o menor arquivo e o conjunto mais limpo de contornos para arrumar depois.

O ajuste de detalhe decide o quanto cada contorno segue de perto a grade de pixels e o quão pequena uma forma precisa ser antes de ser descartada. Suave se ajusta soltamente e descarta qualquer coisa abaixo de dezesseis pixels; nítido segue a grade de perto e mantém formas até dois pixels; equilibrado é o padrão entre os dois.

Suave é o padrão certo para esta página, porque as manchinhas que um WebP baixado produz são artefatos de compressão, não design. Nítido vale tentar só num WebP sem perdas de um ícone preciso em pixels, onde um detalhe de dois pixels é genuíno. O traçador nunca desfoca a imagem antes de trabalhar nela — o raio de desfoque é fixo em zero — porque pré-desfocar reduz a contagem de manchinhas destruindo justamente as bordas duras que eram o motivo de traçar uma logo.

Uma pilha de contornos preenchidos, cada um com um preenchimento sólido e um traço combinando de um pixel, mais um contorno de tela inteira em opacidade zero onde o WebP era transparente. Sem grupos, sem nomes, sem elementos de texto, sem gradientes. Uma marca nominativa volta como contornos em forma de letra, então nunca pode ser recomposta na tipografia original; um gradiente volta como faixas.

Para um slide, uma impressão grande, uma cortadora ou um placeholder que parou de ficar borrado, geralmente isso é suficiente. Como ativo de marca não é, e um designer vai identificar como traço à primeira vista. Onde a marca vai voltar para qualquer sistema que será olhado de perto, trate o SVG como um modelo preciso para redesenhar por cima: a maioria das logos é algumas formas geométricas e uma tipografia, e reconstruí-las a partir de um bom traço é mais rápido que limpar um.

Esta página é usada para duas coisas que parecem idênticas para o conversor e não são a mesma coisa. Recuperar sua própria arte — a marca de um site seu, ou uma que uma agência construiu e não apoia mais — é o caso comum e sem problema nenhum.

O outro caso é reconstruir o ativo de marca de outra pessoa a partir do site dela, e traçar não muda quem é o dono. Vale resolver isso antes de o arquivo entrar num design, não depois. É também o motivo de esta conversão rodar inteiramente no seu navegador: seja lá o que for o arquivo, ele não sai da máquina, e não existe cópia no servidor de uma logo que alguém talvez não quisesse compartilhada.

Se a imagem é uma fotografia, traçar vai posterizar e ampliar demais; WebP para JPG ou WebP para PNG é o que essa situação realmente precisa, e WebP para JPG é a resposta usual quando algo rio abaixo simplesmente recusa o formato. Se é uma captura de tela com texto dentro, traçar é o pior movimento possível — WebP para TXT lê as palavras em vez disso.

Se o objetivo é um favicon, WebP para ICO produz o arquivo direto e não precisa de uma etapa de vetor primeiro. E se o objetivo era só ter a imagem em algo que software comum abre, WebP para PNG mantém cada pixel sem perder nada. Traçar se justifica só quando a arte é plana e genuinamente precisa escalar ou ser cortada.

Decodificação, redimensionamento e traçado acontecem tudo na aba. O decodificador de WebP é a libwebp compilada para WebAssembly e buscada só quando um WebP é solto, então nada sobre a imagem é enviado para lugar nenhum, e não há conta nem cota diária no caminho.

O traçado em si é o imagetracerjs: 46 KB de JavaScript puro sob a Unlicense. Não é o traçador mais forte disponível — potrace e autotrace ajustam curvas melhor e são GPL, e o VTracer é melhor que os dois mas entrega um build de navegador sem licença nenhuma declarada, o que este projeto trata como bloqueado em vez de permissivo. Numa marca plana, a diferença entre eles é pequena, e num WebP com perdas a compressão importa mais que o traçador.