A resposta curta
Solte seu logo na ferramenta abaixo. A predefinição Logo reduz o logo às cores principais e traça cada área de cor como contornos suaves. O original e o SVG aparecem lado a lado; dê zoom nos dois para conferir as curvas e clique em Baixar SVG.
Se o logo vier sobre um retângulo branco ou de uma só cor, marque Remover fundo. O fundo que encosta nas bordas da imagem fica transparente, enquanto a mesma cor dentro do logo, por exemplo o miolo da letra O, continua preenchida. Se você só tem um JPG, tudo bem: a ferramenta limpa o ruído do JPG nas bordas.
Experimente aqui: Imagem para SVG
Abrir a página completa da ferramentaO que muda quando o logo vira SVG
Um PNG ou JPG é uma grade de quadradinhos coloridos. Ele fica bom no tamanho original, mas, ampliado para um banner, um adesivo de carro ou uma impressão grande, as bordas ficam borradas ou serrilhadas. Um SVG guarda formas: cada contorno é descrito por linhas e curvas e preenchido com cor, então o computador consegue desenhá-lo nítido em qualquer tamanho.
Vetorizar é passar do primeiro tipo de arquivo para o segundo. A ferramenta analisa os pixels, decide quais cores andam juntas, segue a borda de cada área e ajusta curvas ao longo dela. O resultado não é uma cópia do arquivo original, é um novo desenho. Por isso uma imagem de origem limpa dá um resultado limpo.
| Logo PNG ou JPG | Logo SVG | |
|---|---|---|
| Guarda | Pixels | Formas feitas de linhas e curvas |
| Ampliado | Fica borrado ou pixelado | Continua nítido |
| Trocar a cor | Precisa de um editor de fotos | Basta mudar um valor de preenchimento por cor |
| Uso típico | Telas, documentos, redes sociais | Impressão, placas, máquinas de corte, sites |
Quais imagens convertem bem
Quanto mais limpa e chapada for a origem, melhor o SVG. Logos com poucas cores sólidas, ícones, carimbos, lettering e desenhos a tinta escaneados viram formas caprichadas. Degradês, sombras, texturas e fotos não têm bordas claras, então a ferramenta precisa dividi-los em faixas de cor chapada.
Escolha a predefinição que combina com a imagem. Ela define valores adequados de cores, detalhe e suavização, e depois você ainda pode ajustar cada um.
| Imagem | Predefinição | O que esperar |
|---|---|---|
| Logo ou ícone chapado | Logo | Formas limpas, muitas vezes de poucos KB |
| Desenho animado ou ilustração chapada | Ilustração | Mais cores e pequenos detalhes mantidos |
| Assinatura, rascunho, carimbo, escaneamento | Desenho (uma cor) | Só a tinta fica, o papel vira transparente |
| Foto | Foto (efeito pôster) | Uma imagem estilo pôster, não um vetor de verdade |
Ajustando o resultado
Cores define o máximo de cores que o SVG pode usar. Em logos, tons quase iguais são unidos automaticamente, então um logo de três cores continua com três mesmo que o controle permita mais. Se uma cor real sumir, por exemplo um slogan cinza fino que fica com a cor da marca principal, aumente as cores.
Detalhe decide o quão pequena uma mancha pode ser antes de ser unida ao que está em volta. Aumente quando o texto pequeno se desfizer ou o pingo do i sumir. Diminua quando um JPG deixar pintinhas e pontos soltos em volta do logo.
Suavização controla o quanto o contorno segue os pixels. Valores altos dão curvas mais redondas e arquivos menores; valores baixos mantêm cantos vivos e serifas finas. Os cantos retos de quadros e letras são detectados e continuam nítidos em qualquer ajuste.
Cada mudança atualiza o SVG em um instante. Abaixo da prévia aparece o tamanho do original ao lado do SVG, além de quantas cores e formas ele tem, para você comparar ajustes rapidamente.
Limpando um logo JPG ou um escaneamento
Muitos logos só existem como JPG tirado de um site antigo ou de uma assinatura de e-mail. A compressão JPG deixa manchas leves nas bordas. A ferramenta une esses pixels soltos à cor vizinha, então os contornos saem limpos. Remover o fundo branco também funciona com JPG: o JPG não tem transparência, mas o SVG tem.
Para uma assinatura fotografada no papel, um rascunho escaneado ou um carimbo, use a predefinição Desenho. Ela separa a tinta escura do papel claro mesmo que o papel esteja um pouco cinza ou mal iluminado, mantém a tinta como uma única forma colorida e descarta todas as áreas brancas, inclusive o miolo das letras. Para bordas melhores, escaneie reto e em boa resolução, ou fotografe bem de cima com luz uniforme.
Imagens muito pequenas, como um favicon de 64 pixels, são ampliadas internamente antes do traçado, o que dá curvas mais suaves. Mas detalhe que não está nos pixels não volta. Se o texto tiver só alguns pixels de altura, procure antes uma cópia maior do logo.
Conferindo e usando o SVG
Use os botões de zoom acima da prévia, ou segure Ctrl e gire a roda do mouse, para examinar as bordas em até 16 vezes. Os dois painéis ampliam e rolam juntos, então você olha exatamente o mesmo ponto. Arraste com o mouse para se mover. Com zoom alto, o original aparece com os pixels reais, e a diferença fica fácil de ver.
O SVG baixado tem a mesma largura e altura da sua imagem e contém uma forma por cor, sem scripts, links ou imagens embutidas. Ele abre em navegadores, Inkscape, Illustrator, Figma, Affinity Designer, Canva e na maioria dos programas de máquinas de corte. Para mudar a cor do logo, altere o valor de preenchimento de uma forma. Copiar código SVG leva o código para a área de transferência, prático para colar direto em uma página web.
As letras viram contornos, não texto editável. Se precisar mudar o texto, digite de novo com a fonte original no seu programa de design.
Dicas para o melhor SVG do seu logo
- Comece com a maior e mais nítida versão do logo que encontrar. Uma captura de tela do logo em um site costuma ser melhor que um anexo de e-mail comprimido.
- Peça primeiro ao designer o arquivo vetorial original (AI, EPS, PDF ou SVG). Um logo traçado é um bom substituto, mas o original é sempre exato.
- Se puder, tire sombras e brilhos da origem. Logos chapados viram formas muito mais limpas.
- Confira o SVG sobre um fundo escuro e outro claro antes de mandar para a gráfica ou para quem faz placas.