Como abrir um arquivo SVG e salvar como PNG ou JPG

O jeito mais fácil de abrir um arquivo SVG é no navegador: arraste para o Chrome, Edge, Firefox ou Safari. No Windows, clique com o botão direito e escolha Abrir com > Microsoft Edge. No Mac, selecione o arquivo no Finder e pressione a barra de espaço para a Visualização Rápida. Para compartilhar ou fazer upload, converta para PNG ou JPG.

O que é um arquivo SVG?

SVG significa Scalable Vector Graphics (gráficos vetoriais escaláveis). Um SVG é um conjunto de instruções de desenho escritas como texto: linhas, curvas, formas e cores. Por isso ele continua nítido em qualquer tamanho, e por isso logotipos, ícones e ilustrações simples muitas vezes são entregues em SVG.

Isso também explica a confusão quando você tenta abrir um. Visualizadores de fotos esperam uma grade de pixels, então alguns não mostram nada ou dão erro. Já os navegadores desenham SVG nativamente, porque o SVG é um padrão da web. Se você abrir o arquivo em um editor de texto simples, vai ver o próprio código, começando com algo como <svg.

Muitos lugares não aceitam upload de SVG. Fotos de perfil em redes sociais, documentos do Office, assinaturas de e-mail e a maioria dos apps de mensagens pedem PNG ou JPG. Algumas plataformas bloqueiam SVG porque o arquivo pode conter scripts. Esse é o motivo mais comum para precisar de uma cópia em PNG. Para uma comparação rápida dos formatos comuns, veja o guia de PNG vs JPG.

Como abrir um arquivo SVG no Windows

1. Clique com o botão direito no arquivo .svg no Explorador de Arquivos.
2. Escolha Abrir com e depois Microsoft Edge. O Chrome ou o Firefox também funcionam, se estiverem instalados.
3. Para deixar isso como padrão, escolha Escolher outro aplicativo, selecione seu navegador e clique em Sempre.

O Explorador de Arquivos pode mostrar os SVGs como ícones em branco em vez de miniaturas. O app gratuito PowerToys da Microsoft resolve isso. Os complementos do Explorador de Arquivos dele incluem uma visualização de SVG para o painel de visualização e miniaturas de SVG. Ative-os nas configurações do PowerToys e reinicie o Explorer se as miniaturas não aparecerem logo.

O Paint e os visualizadores de fotos clássicos não são confiáveis para SVG. Para editar o desenho, use um editor vetorial como o Inkscape, que é gratuito e de código aberto.

Como abrir um arquivo SVG no Mac

• Visualização Rápida: selecione o arquivo no Finder e pressione a barra de espaço. O gráfico aparece em uma janela de prévia.
• Safari: arraste o arquivo para o Safari, ou clique com o botão direito e escolha Abrir com > Safari. Qualquer outro navegador funciona do mesmo jeito.
• Os ícones do Finder e a visualização em galeria mostram a arte como miniatura.

A Pré-Visualização nem sempre abriu arquivos SVG, dependendo da versão do macOS, então o Safari é a escolha confiável. Para editar, o Inkscape também roda no macOS.

Como abrir SVG no celular

Os celulares lidam com SVG de forma irregular, e tocar no arquivo pode não mostrar nada útil. A solução mais rápida é convertê-lo para PNG no navegador do celular com a ferramenta abaixo. Depois, veja ou compartilhe o PNG como qualquer outra imagem.

Como editar um SVG em vez de só visualizar

Como um SVG é texto, pequenas mudanças não exigem programa especial. Abra o arquivo em um editor de código ou de texto e você pode mudar uma cor editando um valor fill , como #000000 para #1a73e8. Salve e recarregue o arquivo no navegador para conferir. Guarde antes uma cópia do original, já que um único caractere fora do lugar pode impedir o arquivo de aparecer. Para qualquer coisa maior, como mover formas, editar texto ou combinar logotipos, use o Inkscape. Ele abre SVG diretamente e salva de volta como SVG, então nada vira pixel no caminho.

Como converter SVG para PNG ou JPG no navegador

O conversor de SVG para PNG/JPG renderiza o arquivo dentro do navegador e nunca faz upload dele. Funciona tanto no celular quanto no computador.

1. Abra o conversor e adicione seu arquivo SVG.
2. Escolha PNG, ou JPG se precisar de um fundo sólido.
3. Defina a escala. Uma escala maior dá mais pixels e um resultado mais nítido em telas grandes.
4. Se o envio tiver limite de tamanho de arquivo, defina um tamanho máximo.
5. Converta e baixe a imagem.

Como os navegadores desenham SVG muito bem, o resultado geralmente bate com o que você vê quando o SVG está aberto no Chrome, Edge, Firefox ou Safari.

O PNG mantém a transparência, então um logotipo com fundo transparente continua transparente. O JPG preenche as áreas transparentes com uma cor sólida. Por isso o PNG normalmente é a escolha certa para logotipos e ícones, e o JPG serve para casos em que um formulário exige.

Como converter SVG para PNG no Inkscape

1. Abra o SVG no Inkscape.
2. Abra a janela de exportação com Arquivo > Exportar, ou pressione Shift+Ctrl+E.
3. Escolha o que exportar: a página inteira, o desenho, a seleção ou uma área personalizada.
4. Digite uma largura ou altura em pixels, ou defina um DPI. Os outros valores se ajustam automaticamente.
5. Escolha PNG como tipo de arquivo, defina um nome e clique em Exportar.

O Inkscape exporta com fundo transparente por padrão. Para um fundo branco, defina a cor e a opacidade do fundo em Propriedades do Documento (Shift+Ctrl+D) antes de exportar.

Qual deve ser o tamanho do PNG ou JPG?

O SVG pode ter qualquer tamanho, mas o PNG terá um tamanho fixo. Parta de onde a imagem vai ser usada.

• Para um site ou app, confira o tamanho de exibição e exporte com o dobro da largura e da altura. Telas de alta densidade mostram o detalhe extra.
• Para uma plataforma com exigências próprias, como foto de perfil ou favicon, use as dimensões exatas que ela informa.
• Para impressão, multiplique o tamanho impresso em polegadas pelo DPI. Com 300 DPI, um logotipo de 2 polegadas de largura precisa de 600 pixels. O guia de 300 DPI explica a conta.

Exporte vários tamanhos a partir do mesmo SVG sempre que precisar. Mantenha o SVG como arquivo mestre.

Problemas comuns ao converter SVG em PNG

As fontes estão erradas

Um SVG pode se referir a uma fonte pelo nome sem incluí-la. Se essa fonte não estiver instalada no aparelho que faz a conversão, uma fonte substituta é usada. Converta o texto em contornos no app de design antes de salvar o SVG. No Inkscape, selecione o texto e use Caminho > Objeto para Caminho.

Partes da imagem estão faltando

Alguns SVGs apontam para imagens ou folhas de estilo externas em vez de incorporá-las. Um conversor que não consegue acessar esses arquivos desenha o SVG sem eles. Exporte o SVG de novo a partir da ferramenta de design original, com as imagens incorporadas.

O PNG tem uma caixa preta ou branca em volta

Isso acontece quando a saída é JPG, ou quando o próprio SVG tem um retângulo de fundo. Escolha PNG e verifique se há uma forma preenchida atrás da arte no arquivo de origem.

O PNG fica borrado ou o arquivo fica grande

Um PNG borrado foi exportado menor do que o tamanho em que é exibido. Exporte de novo com uma largura maior, já que ampliar o PNG não recupera detalhes. Se o arquivo estiver pesado, passe ele pelo compressor de PNG.

O caminho inverso, de uma imagem em pixels para SVG, exige vetorização e só funciona com artes simples. O guia de JPG e PNG para SVG explica o que esperar.

Perguntas frequentes