Como baixar uma imagem SVG — ou convertê-la

Assista — 19 segundos

Sai vetor, ou sai raster

tutorial · converter

Veja o sufixo no campo de nome mudar de .svg para .png, e o seletor de tamanho aparecer ao lado do segmento — o popup só oferece tamanho quando tamanho faz sentido.

O que a gravação mostra

1. A imagem é um SVG, então não tem tamanho fixo
2. Escolha a imagem que você quer
3. Leve o vetor se você for editar
4. Ou mude para PNG se precisar de um raster
5. Renderizado na sua máquina em 1×, 2× ou 4×
6. O mesmo ícone, agora um PNG pixel a pixel

Escolha de propósito

De qual você realmente precisa?

Essa é uma decisão que vale tomar de propósito, porque converter é de mão única. Um vetor sempre pode virar raster depois; um raster nunca volta a ser vetor.

Fique com o SVG quando o destino for um site ou app, uma ferramenta de design onde você vai editar as formas, impressão de qualquer tipo, ou qualquer lugar em que o tamanho ainda não esteja decidido. Ele continua nítido em todo tamanho, o arquivo normalmente é menor que um PNG equivalente, e você pode reestilizar com CSS.

Converta para PNG quando o destino não aceitar SVG — e um bocado deles não aceita. A maioria dos clientes de e-mail, muitos uploaders de CMS antigos, algumas plataformas de chat e redes sociais e um monte de modelos de apresentação ou rejeitam SVG ou renderizam de forma pouco confiável. PowerPoint e Keynote são notoriamente inconsistentes com ele. Se você está colando num documento que precisa ficar idêntico na máquina de outra pessoa, PNG é a resposta segura.

Converta para JPG raramente, e só para uma ilustração de estilo fotográfico. JPG não tem transparência, então um ícone sai sobre um fundo sólido, e a compressão dele deixa artefatos visíveis em volta das bordas duras de que os ícones são feitos. Para qualquer coisa com cor chapada e bordas nítidas, PNG é ao mesmo tempo menor e mais limpo.

Baixando dos dois jeitos

Os dois primeiros passos são compartilhados; o segmento de formato é onde eles se separam.

1. Abra o popup e ache a imagem. Clique no botão da barra de ferramentas e percorra até o gráfico que você quer. Funciona seja a imagem uma origem <img>, markup inline ou um fundo CSS.
2. Para o vetor, é só baixar. Deixe o formato em SVG, digite um nome de arquivo e aperte Baixar o atual. Você recebe o markup original, com namespace consertado.
3. Para um raster, mude o formato antes. Aperte PNG ou JPG no segmento. Um seletor de tamanho aparece ao lado, e o sufixo no campo de nome muda para combinar.
4. Escolha um tamanho e baixe. 1×, 2× ou 4× o tamanho intrínseco do vetor. A conversão roda na sua máquina, num canvas, e o resultado baixa como qualquer outra coisa.

Do que o multiplicador de tamanho é múltiplo

Ele escala o tamanho intrínseco do próprio vetor — seu width e height se ele os declara, senão a extensão do seu viewBox. Então um ícone 24×24 em 4× te dá um PNG 96×96. Se o vetor não declara tamanho nenhum, o que é comum em símbolos de sprite, ele cai num quadrado sensato em vez dos 300×150 que um canvas puro assumiria.

Na prática: 2× é o padrão certo para qualquer coisa que apareça numa tela, já que cobre telas retina. 4× é para impressão ou para um gráfico que será exibido grande. 1× é para quando você precisa bater um tamanho exato em pixels e sabe o que está fazendo.

Transparência

PNG mantém o fundo transparente; JPG não consegue e vai preenchê-lo. Se você converter um ícone para JPG e aparecer uma caixa branca ou preta inesperada atrás dele, isso não é bug — o formato não tem como expressar transparência. Use PNG.

A conversão acontece aqui, não em outro lugar

Vale dizer sem rodeio, porque “conversor de SVG para PNG” é, do contrário, uma categoria de site que exige que você faça upload do seu arquivo. Aqui o vetor é desenhado num canvas dentro do popup e lido de volta como imagem. É o mesmo markup sanitizado que um download produziria, renderizado através de um elemento de imagem isolado para nada nele executar. Nada é enviado, e a conversão funciona com a rede desconectada.

Quando a conversão falha

Um caso quebra ela de forma confiável: um SVG que embute dentro de si uma imagem raster de outra origem. Desenhar isso num canvas o “contamina”, e o navegador então se recusa a deixar os pixels serem lidos de volta — uma regra de segurança, não uma limitação da extensão. Você vai receber uma mensagem específica dizendo isso. O vetor em si continua baixando normalmente; só a conversão para raster é que não pode prosseguir.

Fique com SVG para

Web, apps, ferramentas de design, impressão — onde o tamanho final não está fixo.

Converta para

E-mail, apresentações, uploaders de CMS antigos e qualquer lugar em que SVG é rejeitado.

Tamanhos

1×, 2× ou 4× o tamanho intrínseco do vetor. 2× serve para a maioria das telas.

Onde

Na sua máquina, num canvas. Nada é enviado para converter.

Vale saber

Perguntas frequentes