Pular para o conteúdo
Toolars
Explorar

Converter SVG para PNG

Abra um SVG e esta página o limpa com uma lista de permissões rígida e depois renderiza a versão segura em um PNG transparente na escala que você escolher, tudo no seu navegador. Scripts nunca rodam e o arquivo não é enviado. O porém que você precisa saber: tudo o que fica fora da lista de permissões, como estilos CSS, filtros, marcadores ou imagens incorporadas, é removido antes da renderização.

Fatos da ferramenta

Limite de tamanho do SVG
2 MiB de marcação, identificada como image/svg+xml
Escala
Botões 1x, 2x, 3x e 4x, com 2x pré-selecionado aqui; “Escala de exportação” também aceita de 0,01 a 32
Teto de saída
8.192 px por lado e 24 MP depois de escalar
Removido antes da renderização
Scripts, manipuladores de eventos, atributos style e <style>, filtros, marcadores, <image>, foreignObject, URLs externas e data:
Recusado de cara
Declarações DOCTYPE ou ENTITY e arquivos sem width/height e sem viewBox
Fundo
Transparente no PNG; uma cor de preenchimento só é aplicada se você mudar para JPEG

Caminho da tarefa / da entrada ao resultado

Como rasterizar um SVG em PNG

  1. 01

    Adicione o SVG

    “Escolher arquivo” aceita um .svg por vez. A marcação bruta nunca é inserida na página; a prévia só aparece depois da renderização sanitizada.

  2. 02

    Escolha o tamanho

    Clique em 1x, 2x, 3x ou 4x em “Escala de exportação”, ou digite valores exatos em pixels em “Largura de saída” e “Altura de saída”.

  3. 03

    Sanitizar e converter

    Clique em “Sanitizar e converter”. O resumo informa o tamanho final em pixels e quantos itens inseguros ou não suportados foram removidos.

  4. 04

    Confira e baixe

    Se a contagem de remoções for maior que zero, compare a prévia com a arte original antes de baixar o PNG.

Transformando arte vetorial em pixels

O SVG descreve formas, por isso fica nítido em qualquer tamanho, mas muitos destinos, como ferramentas de apresentação, editores de documentos e páginas de lojas de apps, querem um bitmap fixo. Rasterizar para PNG mantém a transparência e não perde nada além da grade de pixels que você escolher.

Essa grade é a decisão que importa. A escala multiplica a largura e a altura do próprio SVG, ou o viewBox quando esses atributos faltam, então um ícone de 64×64 vira 128×128 em 2x. Ampliar o PNG depois vai deixá-lo borrado, por isso renderize no maior tamanho de que você precisa.

A sanitização explica a maioria das surpresas. Caminhos, formas básicas, texto, degradês, caminhos de recorte, máscaras, padrões e referências <use> locais são mantidos, junto com atributos de apresentação como fill e stroke. Estilos definidos em classes CSS, atributos style ou um bloco <style> são descartados, então uma arte exportada desse jeito pode sair preta ou sem preenchimento.

Perguntas frequentes

Por que meu PNG ficou preto ou perdeu as cores?
As cores provavelmente foram definidas por CSS: um bloco <style>, regras de classe ou atributos style. Tudo isso é removido, e formas SVG vêm com preenchimento preto por padrão. Exporte o SVG de novo com atributos de apresentação (fill, stroke) em vez de CSS, ou peça à sua ferramenta de design uma exportação com atributos inline.
Qual escala escolher para telas de alta densidade?
Esta página abre em 2x, que dobra as dimensões declaradas do SVG e atende a maioria das telas de alta densidade. Use 3x ou 4x para aplicações maiores, lembrando que o resultado ainda precisa caber em 8.192 px por lado e 24 MP.
Por que as pontas de seta ou as sombras sumiram?
No SVG, pontas de seta são desenhadas com elementos marker e sombras projetadas com elementos filter, e nenhum dos dois está na lista de permissões do sanitizador. Converta esses efeitos em caminhos simples no seu editor antes de exportar o SVG.
Por que meu SVG foi recusado?
Os motivos mais comuns são uma declaração DOCTYPE ou ENTITY, um arquivo com mais de 2 MiB, um arquivo não reconhecido como image/svg+xml ou um elemento raiz sem width, height ou viewBox. Uma escala que levaria a renderização além do teto de pixels é recusada com o limite informado.
Fontes e imagens vinculadas aparecem no PNG?
Não. URLs externas, URLs data: e elementos <image> são removidos, então imagens vinculadas e fontes da web nunca carregam. O texto é desenhado com uma fonte que o navegador já tenha para a font-family indicada; converta o texto em contornos no seu editor quando as letras exatas forem importantes.

Conversor de SVG para imagem