Imagyc›Artigos

Como converter PNG em SVG e usar no seu site sem erro

Publicado em 10 de outubro de 2026 · 16 min de leitura

Seu logo fica serrilhado quando aumenta? O ícone muda de cor no Elementor, ou simplesmente não aparece? Antes de procurar outro conversor, vale conferir o que existe dentro do arquivo. Uma imagem com extensão .svg pode conter formas vetoriais, uma fotografia em pixels ou uma combinação das duas.

Para converter PNG em SVG grátis com um resultado útil, você precisa escolher uma boa imagem de origem e uma ferramenta que realmente trace o desenho. No Imagyc, o Converter para SVG gera desenhos em uma cor: ícones, logos e até fotos no estilo estêncil. A compressão e a conversão de formatos do site cuidam dos outros usos, como preparar uma fotografia para a web.

Se você já tem um logo ou ícone, abra o Converter para SVG do Imagyc e acompanhe os exemplos deste guia. A leitura ajuda a escolher a configuração, identificar um SVG com imagem embutida e resolver problemas antes de publicar.

O que é SVG

SVG significa Scalable Vector Graphics. É um formato baseado em XML, uma linguagem de texto que descreve desenhos. Em vez de guardar somente uma grade de pixels, pode registrar círculos, linhas e caminhos, chamados de paths. Você consegue abrir seu código em um editor de texto.¹

Pense num círculo. Em uma imagem raster, como PNG ou JPG, ele é representado por pequenos pontos de cor. Em um desenho vetorial, pode ser descrito pelo centro e pelo raio. O navegador usa essa descrição para desenhá-lo no tamanho necessário.

As formas vetoriais podem ampliar sem apresentar o serrilhado provocado pela falta de pixels. Isso não recupera detalhes perdidos na origem e não se aplica às imagens raster que estejam embutidas no SVG. O formato também permite texto, estilos e outros recursos, além dos desenhos simples.²

Para um ícone pequeno, essa diferença facilita usar a mesma geometria no computador e no celular. Ainda assim, observe o desenho no tamanho real: um detalhe muito fino pode desaparecer visualmente em um botão de 24 pixels, mesmo sendo vetorial.

Quando usar SVG e quando não usar

SVG costuma funcionar bem em logos, ícones, diagramas e ilustrações com áreas de cor e contornos definidos. Fotografias geralmente ficam mais eficientes em formatos raster, como JPEG, WebP e AVIF. PNG é uma opção para imagens que precisam de compressão sem perdas ou transparência.^{3, 4}

A escolha depende também do canal. Um SVG adequado ao site pode não ser aceito por uma plataforma de anúncios, um aplicativo de mensagens ou um sistema de e-mail. Prepare uma versão raster para esses destinos quando necessário e mantenha o original vetorial para futuras exportações.

O SVG estático básico tem amplo suporte nos navegadores atuais de desktop e mobile, incluindo Chrome, Edge, Firefox, Safari, Chrome no Android e Safari no iPhone. Isso não significa que todo filtro, fonte ou recurso avançado funcionará igualmente. Navegadores internos de aplicativos e editores merecem um teste específico.⁵

SVG de verdade e SVG com imagem embutida

O que muita gente chama de SVG “falso” é um arquivo que coloca um PNG ou JPG dentro de um contêiner SVG. Isso é permitido pelo formato; a diferença é que a imagem embutida continua sendo raster. Trocar a embalagem não transforma seus pixels em curvas.^{6, 7}

Para fazer uma primeira inspeção, crie uma cópia do arquivo e abra essa cópia no Bloco de Notas ou em outro editor de texto. Procure por <image> e examine o atributo href, ou o antigo xlink:href. Um trecho como este indica um PNG embutido:

<image href="data:image/png;base64,..." width="300" height="300" />

O trecho é ilustrativo: as reticências substituem os dados da imagem e não formam um arquivo utilizável. A sequência data:image/jpeg;base64, indica JPEG. Já um endereço de arquivo pode apontar para uma imagem externa. O elemento <image> também pode referenciar outro SVG, por isso sua presença isolada não prova que o conteúdo seja raster.^{6, 7, 8}

Formas como <path>, <circle> e <rect> são sinais de geometria vetorial. Um arquivo pode misturar essas formas com fotos. Verifique a parte que você precisa ampliar. Essa inspeção ajuda a entender a estrutura, mas não comprova a segurança do arquivo.

Como converter PNG ou JPG em SVG

Vetorizar significa reconstruir o desenho com contornos e formas. A ferramenta analisa a imagem, identifica regiões e gera caminhos. A qualidade depende do contraste, do ruído e dos detalhes que ela precisa interpretar. Fotos podem produzir muitas formas ou ganhar aparência de pôster, com menos tons.⁹

Comece pela melhor versão disponível do desenho. Prefira um PNG com transparência real ou um fundo de cor sólida que separe bem a figura. Uma imagem maior ajuda quando contém detalhes reais; aumentar artificialmente um arquivo pequeno não recupera bordas que já foram perdidas.

Antes de converter, confira se o quadriculado é apenas a visualização da transparência. Em algumas imagens, ele está gravado nos próprios pixels e será tratado como parte do desenho. Remova também margens excessivas e elementos que não devem entrar no ícone.

Um caminho prático no Imagyc

1. Acesse o Converter para SVG e escolha o arquivo. Além de PNG, JPG e WebP, ele abre PDF, AI, PSD, TIFF, HEIC e SVG. Para um logo, comece pelo original com transparência ou pelo PDF.
2. Confira quais regiões devem formar o desenho. Num logo, a seleção de cores separa o ícone das áreas que ficarão transparentes; numa foto, o modo estêncil decide pela luz e pela sombra.
3. Ajuste o detalhe aos poucos e observe os contornos. Mais detalhe pode preservar pequenas curvas, mas também conservar sujeira da imagem.
4. Use os ajustes de espessura e de manchas com cuidado. Compare o resultado com o original para não fechar letras ou apagar pontos importantes.
5. Escolha entre cor fixa e currentColor. Confira a moldura, as medidas e a aparência em fundos claro e escuro.
6. Baixe o SVG e teste no local em que ele será usado. O resultado desejado é um desenho reconhecível e bem dimensionado, não apenas um arquivo menor.

O Converter para SVG do Imagyc trabalha com uma cor de desenho. Ele não reproduz todas as cores de uma fotografia ou de um logo complexo: para preservar uma identidade visual colorida, use o Vetorizar do Imagyc, que mantém a paleta em camadas, e revise cada região.

PNG192 × 192 px · ampliado 5×

SVG3,4 KB · 4 contornos · mesmo zoom

Ícone de uma cor e SVG colorido

Um ícone monocromático usa uma cor de desenho sobre um fundo que pode ser transparente. Um SVG bicolor tem duas cores visíveis; transparência não conta como uma segunda tinta. Em um logo colorido, cada área pode precisar de um preenchimento próprio.

No código SVG, fill define o preenchimento e stroke define o contorno. O valor currentColor usa a propriedade CSS color disponível naquele contexto. Uma cor fixa, como #1A5F7A, conserva o valor escolhido, salvo quando outra regra de estilo a substitui.^{10, 11}

Quando o SVG é inserido diretamente no HTML, o site pode controlar seu currentColor. Em um arquivo externo exibido por <img>, a cor do texto da página não entra automaticamente no desenho. O editor precisa oferecer uma integração compatível; não basta selecionar a opção e presumir que funcionará em qualquer widget.^{10, 4}

Escolha currentColor para um ícone que deve acompanhar estados do botão, tema claro ou tema escuro. Escolha cores fixas para uma marca cuja paleta precisa permanecer estável. Teste também o estado de foco e o contraste, especialmente em telas pequenas.

O que é um SVG limpo e por que importa

Para ícones de site, chamamos de SVG limpo um arquivo simples, com geometria necessária, dimensões coerentes e poucas dependências. É um perfil prático de publicação, não uma regra que invalida todo SVG com classes, estilos, gradientes ou máscaras. Esses recursos fazem parte do formato.¹²

O viewBox descreve a região interna de coordenadas: posição inicial, largura e altura. Ele ajuda a relacionar o desenho com a área em que será exibido. Os atributos width e height fornecem medidas explícitas, úteis em editores e integrações.^{13, 14}

Este exemplo original contém um círculo com uma cor definida e uma área interna de 24 por 24 unidades:

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="8" fill="#1A5F7A" />
</svg>

Para um ícone simples, prefira fill e stroke nas formas, sem classes nem blocos de estilo. Remova scripts, dependências externas e metadados de programa dispensáveis. Esse perfil facilita a portabilidade e também exige sanitização adequada. Preserve o que sustenta a aparência e a acessibilidade, incluindo títulos, descrições e referências internas necessárias. Não apague créditos ou informações de licença sem verificar sua finalidade.

Uma ilustração com degradê pode precisar de <defs> e de identificadores. Retirar tudo em nome da limpeza pode quebrá-la. Também separe otimização de sanitização: reduzir o código não comprova que ele é seguro.¹⁵

SVG no WordPress e no Elementor

O WordPress não libera SVG na configuração padrão de uploads. No Elementor, as opções para aceitar esse formato variam conforme a versão e os recursos disponíveis. A restrição existe porque SVG pode carregar conteúdo ativo; permitir a extensão e avaliar sua segurança são tarefas diferentes.^{16, 17, 18}

Use uma solução mantida que faça sanitização de SVG, limite o envio a pessoas confiáveis e teste primeiro em uma cópia do site. Mantenha WordPress, Elementor e o mecanismo de sanitização atualizados. Quando houver uma opção para habilitar SVG no Elementor, leia o aviso e confira como os arquivos serão filtrados.

Evite tutoriais que liberam qualquer arquivo com ALLOW_UNFILTERED_UPLOADS. A documentação do WordPress alerta para o risco de aceitar arquivos executáveis. Também não confunda um filtro que acrescenta SVG à lista de tipos permitidos com um sanitizador.^{19, 18}

Depois do upload, confira qual widget você está usando. Um widget de imagem, um widget de ícone e um recurso específico para SVG podem tratar cor e tamanho de maneiras diferentes. As configurações do editor não substituem a verificação da página publicada.²⁰

Não trate a ausência de viewBox como uma explicação universal para um SVG invisível. O navegador pode renderizar arquivos sem ele. Da mesma forma, a falta de width e height não determina sozinha tamanho zero; o contexto de dimensionamento importa. Para portabilidade, declare medidas e um viewBox coerente.^{13, 14}

O preenchimento inicial de muitas formas é preto. Perder a regra de cor pode explicar a mudança. Um PNG embutido pode funcionar, depender de uma URL externa ou ser removido por um filtro específico.^{6, 21}

Arquivos AI EPS CDR PDF e PSD

Se o desenho já nasceu vetorial, procure preservar suas curvas. O Illustrator exporta SVG, e o CorelDRAW também oferece esse formato. Solicitar a exportação a quem criou a arte costuma dar mais controle sobre cores, fontes, efeitos e limites do desenho.^{22, 23}

Sem o programa original, o Inkscape pode abrir vários formatos, incluindo determinados arquivos AI, PDF, EPS e CDR. A compatibilidade depende da versão do arquivo e das bibliotecas instaladas; EPS pode exigir componentes adicionais. Revise fontes, cores e efeitos antes de salvar uma cópia como SVG simples.²⁴

PSD é um formato de trabalho do Photoshop que pode combinar diferentes tipos de conteúdo. Para um ícone raster, exportar PNG e vetorizar pode servir. Para uma fotografia, preserve o raster e use as conversões e transformações do Imagyc para preparar a versão de publicação.²⁵

O Converter para SVG do Imagyc abre PDF, AI salvo com compatibilidade de PDF e PSD direto no navegador: a página ou a imagem composta é desenhada em alta resolução e vetorizada de novo, em uma cor. É prático quando você não tem o programa original, mas não recupera as curvas exatas nem as cores da arte; para isso, a exportação feita no editor de origem continua sendo o melhor caminho. EPS e CDR não abrem no navegador, e renomear a extensão não resolve. Como o arquivo não é enviado a servidor nenhum, esse caminho também serve para arquivos de clientes e materiais confidenciais.

Peso e desempenho

O tamanho declarado de um SVG vetorial não determina seu peso como acontece com uma grade de pixels. Um desenho simples de 512 unidades pode ser pequeno; um ícone visualmente menor pode conter milhares de pontos. Curvas redundantes, filtros e imagens embutidas aumentam a complexidade.^{26, 27}

Ajuste o detalhe ao tamanho de uso. Num ícone de menu, conservar cada irregularidade do PNG costuma trazer pouco benefício. Num logo, simplificar demais pode mudar a identidade. Compare o contorno e a leitura em tamanho real antes de aceitar a redução.

Ferramentas como SVGO removem ou reorganizam informações redundantes. Faça uma cópia e compare o resultado: alterações em identificadores ou estilos podem afetar integrações. Otimizar não deve apagar informações úteis nem servir de prova de sanitização.²⁸

Como SVG é texto, a transferência pode ser comprimida com gzip ou Brotli quando servidor e cliente negociam essa opção. Ela não acontece obrigatoriamente em toda hospedagem. No painel de rede do navegador, confira o cabeçalho Content-Encoding e o tamanho efetivamente transferido.^{26, 29}

Para publicar, um arquivo .svg servido corretamente costuma ser mais simples de administrar que distribuir .svgz sem revisar a configuração. A extensão compactada exige suporte adequado no destino. Cache e compressão HTTP devem ser avaliados junto com o arquivo.^{24, 29}

Não existe um número de kilobytes que torne qualquer SVG bom para SEO. Meça a página com o recurso real. Menos dados ajudam em conexões limitadas, mas desenhos muito complexos também podem exigir processamento de celulares mais simples. A qualidade visual e o custo de renderização entram na decisão.

Segurança ao trabalhar com SVG

SVG pode incluir scripts, atributos de eventos e referências a outros recursos. Por isso, um arquivo vindo de terceiros precisa passar por avaliação e sanitização antes de entrar no site. Remover o nome do programa ou outros metadados não elimina esses riscos.³⁰

O contexto de uso muda o comportamento. SVG exibido como imagem em <img> tem restrições, incluindo a desativação de scripts. Abrir o mesmo arquivo como documento ou inseri-lo diretamente no HTML é outra situação. Uma prévia que parece inofensiva não comprova segurança para todos os usos.³¹

Um fluxo de upload deve validar o conteúdo, aplicar regras de elementos e atributos permitidos e restringir quem envia arquivos. Use um sanitizador mantido e específico para SVG. Procurar e apagar a palavra “script” manualmente não cobre todas as possibilidades; a OWASP recomenda múltiplas verificações para uploads.³²

Guarde o original fora da área pública quando necessário e mantenha uma versão revisada para publicação. Para ícones estáticos, não inclua código ou dependências externas que o desenho não utiliza. Se uma limpeza modificar a aparência, corrija a exportação em vez de desligar o filtro de segurança.

SVG acessibilidade e Google

O Google aceita SVG entre os formatos de imagem compatíveis com a Pesquisa. Isso não garante indexação nem coloca o arquivo acima de um PNG. O acesso ao recurso, a relevância da página e o contexto da imagem continuam importantes. Use um nome de arquivo descritivo e texto próximo que explique sua função.³³

Quando o SVG é um arquivo externo, o texto alternativo fica na tag HTML <img>. Descreva o que a imagem informa naquela página; se ela for decorativa, use alt="". Um logo que identifica a empresa precisa de uma descrição adequada ao contexto, sem empilhar palavras-chave.³⁴

<img src="logo-imagyc.svg" alt="Imagyc"
  width="160" height="40">

Essas medidas são um exemplo, não o tamanho obrigatório de um logo. Preserve a proporção do arquivo e ajuste o espaço no layout. No celular, confira se a imagem cabe no contêiner e se o texto e os controles ao redor continuam legíveis.

Para SVG inserido diretamente no HTML, o próprio <svg> não recebe o alt de <img>. É possível fornecer um nome acessível com <title> e aria-labelledby. Use identificadores exclusivos quando houver mais de uma instância.³⁵

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" role="img" aria-labelledby="selo1">
  <title id="selo1">Selo de confirmação</title>
  <circle cx="12" cy="12" r="8" fill="#1A5F7A" />
</svg>

Em um botão, o nome acessível deve explicar a ação, como “Abrir menu”. Um ícone decorativo junto de um rótulo suficiente pode ficar oculto das tecnologias assistivas. A descrição deve ajudar a pessoa a entender ou operar a página.³⁶

Para aprofundar a preparação dos outros arquivos do site, consulte também os guias do Imagyc sobre formatos de imagem e como nomear imagens para SEO.

Checklist antes de publicar um SVG

• O formato combina com o conteúdo e é aceito pelo destino.
• A parte que precisa ampliar contém vetores, não apenas um raster embutido.
• O desenho foi comparado com a origem, incluindo letras, furos e pequenos detalhes.
• O viewBox cobre a arte, as medidas são coerentes e a proporção está correta.
• A cor fixa ou currentColor funciona no widget e nos fundos reais.
• O arquivo passou pelo fluxo de segurança adequado à sua origem e ao uso.
• A otimização preservou gradientes, referências, acessibilidade e informações necessárias.
• O peso transferido e a compressão foram conferidos no site publicado.
• O texto alternativo ou nome acessível corresponde à função da imagem.
• A página foi testada em desktop e mobile, além da prévia do editor.

Perguntas frequentes

SVG é melhor que PNG

Para formas que precisam ampliar, SVG pode ser a escolha mais prática. PNG funciona bem para conteúdo raster sem perdas. Compare o desenho, o peso e o destino; um SVG complexo não é automaticamente mais leve que um PNG adequado.³

Dá para transformar foto em SVG

Sim, por vetorização, mas o resultado simplifica os tons. No Imagyc, o modo estêncil transforma a foto num desenho de uma cor: a pele fica transparente, e cabelo, olhos, boca e sombras viram traço. Embutir a foto no SVG conserva os pixels, e para mostrar uma fotografia fiel num site geralmente faz mais sentido otimizar um formato raster.^{7, 9}

Por que meu SVG não aparece no Elementor

Confira se o upload foi aceito, se a URL funciona e se o desenho sobreviveu à sanitização. Depois revise viewBox, cores, CSS e espaço no widget. A falta de uma medida isolada não explica todos os casos.^{16, 20}

Como abrir um arquivo SVG

Um navegador atual pode mostrar um SVG estático. Um editor vetorial permite alterar as formas, enquanto um editor de texto revela o código. Para arquivos desconhecidos, faça a avaliação de segurança antes de abri-los ou publicá-los.^{1, 30}

Posso converter PNG em SVG grátis sem manter todas as cores

Sim. Um ícone de uma cor pode ser adequado para botões e menus. No Imagyc, revise o contorno e escolha cor fixa ou currentColor; para uma marca colorida, use o Vetorizar, que mantém todas as cores.

Tirar os metadados deixa o SVG seguro

Não. Metadados, estrutura visual e conteúdo ativo são aspectos diferentes. A versão de publicação precisa de sanitização e verificação adequadas, mesmo quando não contém informações do programa que a criou.

Escolha um ícone simples e teste no Converter para SVG do Imagyc. Compare o resultado em tamanho real e use o checklist para conferir a versão que entrará no seu site.