Um logotipo chega em dois arquivos: logo.svg a 3 KB e logo.png a 40 KB. Ambos parecem iguais numa aba do navegadorAprove-os para preencher um ecrã de projector e só um fica afiado Tente carregá-los para um perfil social e só o outro é aceite E se tudo o que tem é o PNG, as ferramentas que prometem ao & quot; converter PNG para SVG" devolva algo que é tecnicamente um SVG mas não o ficheiro que o seu designer teria feito.
Este guia explica a diferença entre os dois formatos em termos do que cada arquivo armazena, quando usar qual, o que acontece quando você renderiza um SVG em pixels e o que o rastreamento de um PNG em formas vetoriais pode e não pode recuperar Inclui números reais do mecanismo de rastreamento atrás dos conversores Toolz e fica sob o hub de ferramentas de imagem.
tl;dr: SVG é um formato vetorial: armazena formas como geometria, por isso escala para qualquer tamanho sem desfocar e é ideal para logotipos, ícones e diagramas PNG é um formato raster: armazena uma grade fixa de pixels, sem perdas, que se adequa a capturas de tela, arte detalhada e qualquer lugar que aceite apenas imagens Ir de SVG para PNG é exato no tamanho que você escolher; use o Conversor SVG para PNG em 2 x ou 4 x para saída nítida Ir de PNG para SVG é o tracing, que reconstrói formas de pixels e não recupera um design original Ele funciona para logotipos planos e arte de linha, e falha em fotos Todas as conversões aqui executam lado do cliente, nada carregado, gratuito, sem inscrição.
Qual a diferença entre SVG e PNG?
SVG descreve uma imagem como instruções para desenhá-la, enquanto PNG armazena o desenho acabado como pixels Todo o resto sobre os dois formatos segue dessa diferença.
Um arquivo SVG, definido pelo W3 C em Gráficos vetoriais escaláveis (SVG) 2, é texto XML. Ele lista caminhos, círculos, retângulos, gradientes e texto, cada um com coordenadas e cores Nada nele diz quantos pixels a imagem tem Quando um navegador exibe, o renderizador descobre quais pixels cada forma cobre no tamanho da tela, e é por isso que o mesmo arquivo é nítido em um telefone e em um monitor de 5 K.
Um arquivo PNG, especificado pelo W3 C como Gráficos de rede portáteis e publicado como ISO/IEC 15948, é uma grade de pixels coloridos compactados com DEFLATE A compressão é sem perdas, então os pixels que você decodifica são exatamente os pixels que foram salvos Um PNG pode transportar um canal alfa completo e até 16 bits por canal O que ele não pode fazer é adicionar detalhes: um PNG 512 x 512 mostrado em 2048 x 2048 tem cada pixel esticado através de um bloco 4 x 4, e as bordas ficam suaves ou em blocos.
Aqui está o mesmo emblema simples da fonte SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Essas quatro linhas de marcação são a imagem inteira e permanecem quatro linhas, quer você a exiba com 240 pixels de largura ou 24.000. A versão PNG do mesmo emblema com 240 x 80 contém 19.200 pixels e com 960 x 320 contém 307.200.
SVG vs PNG: qual formato devo usar?
Use SVG para qualquer coisa feita de formas que devem escalar, e PNG para qualquer coisa feita de pixels ou dirigido a algum lugar que só aceita imagens rasterizada Esta tabela define-os lado a lado:
| Propriedade | VG | png |
|---|---|---|
| Modelo imagem | Vetor: caminhos, formas, texto | Raster: grade de pixels fixa |
| padrão | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| escalada | Afiado em qualquer tamanho | Borrões ou blocos quando ampliados |
| Compressão | Texto; gzip no servidor | DeFLATO SEM PERDAS |
| transparência | sim | Sim, alfa completo |
| Tamanho do arquivo para um logotipo | Geralmente alguns KB | Cresce com dimensões de pixel |
| Tamanho do arquivo para uma foto | Impraticável | Grande, mas razoável |
| Editável após exportação | Sim, formas e cores em um editor vetorial | Apenas pixel por pixel |
| Texto dentro | Pode permanecer selecionável e pesquisável | Assado em pixels |
| Pode conter scripts | Sim, o que é uma preocupação de segurança | não |
| Aceito por uploads sociais, aplicativos de escritório, e-mail | Muitas vezes não | quase sempre |
| melhor para | Logotipos, ícones, diagramas, gráficos, ilustrações de UI | Capturas de tela, arte detalhada, ativos de tamanho fixo |
Uma regra prática: mantenha o SVG como seu mestre para qualquer vetor, e exporte PNGs dele nos tamanhos que cada destino precisa Nunca mantenha apenas o PNG de um logotipo, porque transformar pixels de volta em formas é com perdas de uma forma que transformar formas em pixels não é.
Para fotografias, nenhum dos formatos é a escolha certa para entrega Uma foto em PNG é grande, e uma foto em SVG é uma PNG embrulhada em XML ou uma aproximação traçada JPEG, WebP ou AVIF são construídos para esse trabalho; o que é WebP e quando usá-lo cobre o lado da foto.
Por que tantos lugares recusam uploads SVG?
Porque um SVG é um documento que pode conter conteúdo ativo, não apenas uma imagem A especificação SVG permite <script> elementos, atributos do manipulador de eventos, como onload, links para recursos externos e HTML incorporado através de <foreignObject>. Um site que aceita um upload SVG e depois o serve a partir de seu próprio domínio pode acabar executando o JavaScript de outra pessoa e #39; para cada visitante que abre o arquivo diretamente.
Higienizar o SVG com segurança é possível, mas de forma complicada, por isso muitas plataformas seguem o caminho mais simples: fotos de perfil, listagens de mercado, redes de anúncios, muitas bibliotecas de mídia CMS e a maioria dos clientes de e-mail aceitam apenas formatos raster. Documentos de escritório e aplicativos de bate-papo também têm suporte mais irregular.
Essa é a razão mais comum para converter SVG para PNG. Um navegador desenhando um SVG como imagem é o caso seguro, já que um SVG carregado através de um <img> elemento ou em uma tela não tem permissão para executar scripts ou buscar arquivos externos Os conversores Toolz renderizam SVGs exatamente dessa maneira, o que torna seguro converter um arquivo de uma fonte desconhecida.
Como você converte SVG para PNG sem perder qualidade?
Renderize o SVG no tamanho de pixel que você precisa, ou maior, e nunca escalar o PNG para cima depois Como o SVG é geometria, desenhá-lo em 4 x é tão exato quanto desenhá-lo em 1 x; toda perda de qualidade nessa direção vem de escolher uma saída muito pequena.
o Conversor SVG para PNG calcula o tamanho nesta ordem:
- Se a raiz SVG se definir
widtheheight, aqueles são usados, com unidades comomm,pt,inecmconvertido em pixels CSS. - Se tiver apenas um
viewBox, a largura e a altura do viewBox são usadas. - Se não tiver nenhum dos dois, é sorteado em 1024 x 1024.
- Se o lado mais longo ainda estiver abaixo de 512 pixels, o desenho será ampliado proporcionalmente até que esse lado seja 512, porque um ícone de 24 x 24 desenhado no tamanho declarado é pequeno demais para ser usado.
- A opção de escala SVG multiplica então o resultado por 1, 2 ou 4.
Pegue o distintivo acima, que declara width="240" height="80". O lado mais longo está abaixo de 512, por isso é ampliado para 512 x 171 Em 2 x o PNG sai em 1024x342, com os cantos não pintados deixados transparentes A nota sob o resultado afirma o tamanho e de onde veio, então não há nenhuma adivinhação.
Escolha 2 x para telas, onde a maioria dos telefones e laptops usam dois ou mais pixels de dispositivo por pixel CSS, e 4 x para impressão ou grandes monitores O teto de saída é de 100 megapixels ou 16.384 pixels de um lado, e os arquivos SVG acima de 50 MB são recusados; uma escala menor corrige o primeiro caso.
Dois tipos de conteúdo não sobrevivem à renderização Imagens e fontes da web vinculadas por URL são deixadas de fora, porque um SVG desenhado como uma imagem não pode buscar nada fora do arquivo, então o texto cai de volta para uma fonte do sistema; converter texto em contornos em seu editor de vetores antes da exportação evita isso E um SVG animado se torna um único quadro estático.
Devo converter SVG para PNG, JPG ou PDF?
Converta para PNG por padrão, para JPG somente quando o destino rejeitar PNG ou precisar de um arquivo menor para um gráfico semelhante a uma foto e para PDF quando precisar de um documento para imprimir ou enviar um e-mail.
| alvo | transparência | Tamanho | O que você perde | usar para |
|---|---|---|---|---|
| png | guardado | Médio | Escalabilidade | Carregamentos, slides, ativos de aplicativos, qualquer coisa com fundo transparente |
| JPG | Cheio de branco | Menor para arte complexa | Escalabilidade, transparência, alguma nitidez das bordas | Formulários que levam apenas JPG, anexos de e-mail |
| PDF (rasterizado) | As áreas transparentes mostram a página branca | Maior | Escalabilidade, texto selecionável, links clicáveis | Folhas de prova, imprimindo um gráfico, enviando obras de arte para não designers |
o Conversor SVG para JPG preenche áreas transparentes com branco, porque JPEG não tem canal alfa, e aplica o controle deslizante Qualidade bordas nítidas na cor plana são exatamente onde compressão JPEG deixa toque fraco, então um logotipo geralmente parece melhor como PNG.
o Conversor SVG para PDF merece um aviso claro Ele rasteriza: cada SVG é desenhado em pixels, armazenado como PNG, e colocado em uma página O PDF não contém formas vetoriais, texto não pode ser selecionado, e zoom longe o suficiente mostra pixels A opção de escala ainda ajuda, uma vez que o tamanho da página permanece fixo enquanto 2 x e 4 x embalar mais pixels nele (72, 144 ou 288 pixels por polegada com Fit to image) Se uma gráfica pede um PDF vetorial, por ISO 32000 um PDF pode transportar caminhos vetoriais verdadeiros, mas você precisa de um editor vetorial e #39; para isso, não de um conversor de imagem.
O que faz a conversão de PNG para SVG?
A conversão de PNG para SVG traça a imagem: agrupa os pixels em áreas de cor semelhante e ajusta contornos em torno de cada área, produzindo caminhos vetoriais preenchidos Ele não encontra o arquivo vetorial original, porque um PNG não contém nenhum registro das formas que fizeram cada borda na saída é uma estimativa extraída dos pixels.
O rastreador atrás PNG para SVG e JPG para SVG no Toolz está o imagetracerjs, rodando em segundo plano Web Worker para que a página permaneça responsiva Funciona em duas etapas:
- Redução cor. A imagem é reduzida a uma pequena paleta, o número que você escolhe em Cores: 2, 8 ou 16.
- Encaixe borda. Para cada camada de cor, o traçador percorre o limite de cada área conectada e se ajusta a linhas retas e curvas a ele, produzindo um caminho preenchido por área.
Cada caminho também obtém um contorno de 1 pixel em sua própria cor. Sem ele, as formas vizinhas deixam lacunas na linha do cabelo onde suas bordas não se encontram, e o fundo aparece como finas costuras brancas.
Detalhe controla o quão próximos esses contornos seguem os pixels:
| Detalhe | Tolerância de linha e curva | As manchas caíram abaixo | Pré-borrão | Resultado |
|---|---|---|---|---|
| Baixo | 2 px | 16 pontos | Leve | Arquivos mais suaves, simples e menores |
| Médio (padrão) | 1 px | 8 pontos | nenhum | Equilibrado |
| Alto | 0,5 px | 2 pontos | nenhum | Segue pixels de perto, mantém formas minúsculas, mais pesadas |
O SVG traçado é escrito com seu width e height defina para o tamanho da imagem original e a viewBox em pixels traçados, ele abre no tamanho que você espera e escala de forma limpa onde quer que você o coloque.
O que o rastreamento pode fazer bem e onde falha?
Traçar faz bem em imagens que eram como vetor para começar: cor plana, bordas duras, poucas cores Ele falha em qualquer coisa com tons contínuos, porque uma foto não tem bordas para encontrar, apenas gradientes.
| Fonte | Como ele rastreia | Configurações sugeridas |
|---|---|---|
| Logotipo plano, 2 a 6 cores | Formas limpas, arquivo pequeno | 8 cores, Médio |
| Arte em linha preto e branco, assinaturas, selos | Muito limpo | 2 cores, Médio ou Alto |
| Ícones com gradiente | Gradiente se transforma em bandas | 16 cores, Médio, depois simplifique em um editor |
| Desenho digitalizado em papel | A textura do papel torna-se manchas | 2 cores, Baixo |
| Logotipo JPG com artefatos de compressão | Salpicos ao longo das bordas, fundo traçado como uma forma | Detalhe baixo; exclua a forma de fundo depois |
| Captura de tela com texto | As letras tornam-se contornos de blobby | Mantenha-o como PNG |
| Fotografia | Formas posterizadas manchadas, arquivo enorme | Não rastrear |
A linha de fotografias não é uma questão de gosto Em testes do motor Toolz, uma foto ruidosa de 2000 px traçada em 16 cores levou 28 segundos e produziu um SVG de 46 MB, muitas vezes mais pesado do que a imagem de onde veio e ainda visivelmente pior O ruído dá ao traçador milhares de regiões minúsculas, e cada uma se torna seu próprio caminho com suas próprias coordenadas.
Esse teste é o motivo pelo qual o conversor escala qualquer imagem com mais de 1200 pixels em um lado até 1200 antes de rastrear O rastreamento termina então em segundos, em vez de minutos, e como a saída mantém a largura e a altura originais, nada sobre como o SVG é colocado muda Um rastreamento ainda em execução após dois minutos é interrompido com uma mensagem sugerindo menos cores ou menos detalhes, em vez de deixar a guia ocupada indefinidamente.
Fontes JPG adicionar dois problemas específicos. compressão JPEG deixa blocos fracos em torno de bordas afiadas, que o traçador pode transformar em formas perdidas; baixo detalhe desfoca ligeiramente e deixa cair manchas para combatê-lo E JPG não tem transparência, então a caixa branca em torno de um logotipo torna-se mais uma forma preenchida por trás da obra de arte Em um editor de vetores, selecione essa forma e excluí-lo.
Como faço para obter um SVG limpo a partir de um logotipo PNG?
Comece com as configurações mais simples que preservam o design, olhe para a visualização e adicione cores ou detalhes apenas quando algo estiver faltando. Configurações mais pesadas raramente corrigem um traço incorreto; eles adicionam mais caminhos a ele.
Uma sequência confiável:
- Use a fonte maior e mais limpa que você tem Uma exportação PNG supera uma captura de tela, e uma captura de tela supera uma foto de uma impressão.
- Conte as cores no logotipo e escolha a opção mais próxima em ou acima dele Uma marca de duas cores quer 2, uma marca de cinco cores quer 8.
- Rastrear no Médio Verifique a visualização e o tamanho do arquivo mostrado no resultado.
- Se houver manchas ou arestas, refaça em Baixo. Se detalhes finos desaparecerem, refaça em Alto.
- Abra o resultado em um editor de vetores para a última etapa: exclua a forma de fundo se houver, mescle formas que deveriam ser uma e substitua qualquer texto rastreado por texto real na fonte certa.
Quando o tamanho do arquivo mostrado após o rastreamento for maior que o PNG, trate-o como um sinal. Para um logotipo, geralmente significa que o ruído está sendo rastreado; para qualquer outra coisa, geralmente significa que a imagem deve permanecer rasterizada.
Se o traço for direcionado para uma máquina de corte, gravador a laser ou software de bordado, 2 cores geralmente é a resposta certa, mesmo para um design colorido, uma vez que essas máquinas funcionam a partir de contornos em vez de preenchimentos.
Posso converter entre esses formatos em um só lugar?
Sim. O general Conversor de imagem aceita SVG junto com JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG e PDF, e escreve JPG, PNG, WebP, GIF, ICO, PDF ou SVG. Escolher SVG como destino rastreia qualquer fonte raster com as mesmas configurações de Cores e Detalhes; escolher um alvo raster para uma fonte SVG mostra a opção de escala SVG.
As páginas de pares dedicadas aceitam apenas seu próprio formato de origem, o que mantém as opções na tela relevantes: as páginas SVG mostram escala, as páginas de rastreamento mostram Cores e Detalhes.
Uma combinação não é oferecida: PDF para SVG O conversor recusa com uma mensagem, e a rota que sugere são duas etapas: converter a página PDF para PNG primeiro, depois rastrear a PNG Se o PDF veio de um programa vetorial, exportar SVG desse programa mantém os caminhos reais e é a melhor opção.
Um SVG também pode se tornar um favicon. Renderizá-lo para ICO produz imagens PNG quadradas em cada tamanho de ícone, e o mínimo de 512 px significa que um SVG de ícone pequeno ainda fornece uma entrada limpa de 256 px. Tamanhos Favicon e o que entra em um arquivo ICO abrange quais tamanhos incluir.
As conversões SVG e PNG são privadas?
Sim. renderização, codificação e rastreamento todos acontecem no lado do cliente, dentro da guia do navegador, então nenhum arquivo é carregado A etapa de decodificação SVG e o rastreador são baixados somente quando um arquivo precisa deles, o que mantém a luz da página quando você está convertendo apenas entre formatos raster.
Os limites, em um só lugar: arquivos SVG de até 50 MB, renderizavam saída de até 100 megapixels e 16.384 pixels por lado, fontes raster até 100 megapixels, traçando até 1200 px no lado mais longo e um teto de dois minutos por traço As ferramentas são gratuitas, sem inscrição, com limite diário de conversões.
