Converter SVG para PNG

O que é um conversor de SVG para PNG

Um SVG é um desenho descrito como instruções: linhas, curvas, preenchimentos e texto, sem um único pixel dentro do ficheiro. Um PNG é uma grelha de pixéis. Converter significa escolher um tamanho e pedir a um motor que desenhe essas instruções nesse tamanho, e é por isso que o mesmo SVG dá um favicon nítido de 32 pixéis e um banner nítido de 4096 a partir de um só ficheiro.

Isso quer dizer também que o tamanho é uma decisão e não uma propriedade que se leia do ficheiro. Alguns SVG declaram um tamanho, muitos não declaram, e o que acontece no segundo caso é a diferença entre um conversor que funciona e outro que desilude em silêncio. Esta ferramenta mostra-lhe em qual dos casos está antes de converter.

Tudo acontece no seu navegador. O ficheiro é lido localmente, o desenho é rasterizado pelo mesmo motor que desenha SVG em qualquer página web, e o PNG é produzido por um canvas. Não se envia nada, portanto não há limite de tamanho imposto por um carregamento nem uma cópia do seu trabalho no servidor de ninguém.

Como usar

1. Escolha um ficheiro SVG. É lido no seu navegador em vez de ser enviado para algum lado. O painel abaixo indica logo o tamanho que o ficheiro pede, e diz que regra produziu esse número, porque um SVG pode declarar um tamanho, sugerir apenas uma forma, ou não dizer nada.
2. Defina o tamanho que quer mesmo. Escreva uma largura ou uma altura, ou use os botões de escala para duas, quatro ou oito vezes o tamanho do ficheiro. A proporção mantém-se a não ser que a desligue. Como o tamanho de destino é escrito dentro do desenho antes de ser rasterizado, uma exportação a oito vezes tem oito vezes o detalhe e não é uma imagem pequena ampliada.
3. Leia o que não vai sobreviver e descarregue. O painel lista tudo o que existe no ficheiro que um navegador se recusa a carregar quando um SVG é usado como imagem, e os tipos de letra que o ficheiro espera encontrar na sua máquina. Se essa lista estiver vazia, o PNG vai corresponder ao que vê no seu editor vetorial.

Porque tantos conversores devolvem um quadrado de 150 pixéis

Esta é a queixa mais repetida sobre a conversão de SVG, e não é uma falha dos conversores. A especificação do SVG distingue duas coisas que soam iguais. A proporção intrínseca é a forma do desenho, e um viewBox dá-lha. O tamanho intrínseco é uma medida a sério em pixéis, e isso só vem de atributos width e height absolutos.

Portanto um ficheiro que começa com um viewBox de 0 0 1024 1024 e sem width nem height tem uma forma conhecida e nenhum tamanho conhecido. Quando lhe pedem que o desenhe sem mais nada a que se agarrar, o navegador recorre ao tamanho de objecto por omissão que o CSS define para conteúdo substituído, que é 300 por 150 pixéis, e encaixa a forma lá dentro. Um desenho quadrado sai a 150 por 150. Um banner de quatro para um sai a 300 por 75. O original nunca mediu 150 pixéis de coisa nenhuma, e o mais provável é que o autor tivesse 1024 em mente, mas nada no ficheiro o dizia.

É nos conjuntos de ícones que isto dói mais, porque aí tirar o width e o height é uma convenção deliberada: permite que o ícone receba o tamanho do CSS onde quer que seja usado. Isso está perfeitamente certo para uma página web e perfeitamente errado para um conversor que não tem CSS nenhum para consultar. A ferramenta nomeia a regra que se aplicou ao seu ficheiro, portanto um tamanho pequeno é algo que decide e não algo que descobre depois.

Uma consequência que vale a pena saber: pôr width e height num SVG que não tem viewBox corta o desenho em vez de o escalar, porque não há sistema de coordenadas para mapear na caixa nova. Quando o seu ficheiro está nesse estado, esta ferramenta acrescenta um viewBox deduzido do tamanho a que já estava a ser desenhado, para que ampliar escale o desenho como seria de esperar.

O que um PNG não consegue levar consigo

Quando um SVG é carregado através de um elemento de imagem, a especificação coloca-o num modo de processamento restrito. Os scripts não correm e as referências externas não se resolvem, e isso acontece em todos os navegadores porque é o que a norma exige e não uma política escolhida por um fabricante. A razão é simples: uma imagem não deveria poder fazer pedidos de rede nem executar código só por ser mostrada.

Na prática isso faz desaparecer sem aviso um punhado de coisas. Um elemento de imagem dentro do SVG a apontar para uma fotografia noutro sítio é desenhado como nada. Uma folha de estilos trazida por uma regra de import nunca chega, portanto tudo o que ela estilizava cai para os valores por omissão. Um tipo de letra web declarado com uma origem remota não é descarregado. Uma forma reaproveitada de outro ficheiro SVG não aparece. Nada disto levanta um erro em lado nenhum, e é por isso que a ferramenta os procura antes de converter e lista o que encontra.

Os tipos de letra merecem um aviso próprio porque falham de outra maneira. Um tipo de letra nomeado no ficheiro mas não carregado de lado nenhum é procurado na máquina que está a desenhar, que é a sua. Se o tiver, o texto sai perfeito. Se não, o navegador põe outro no lugar e as letras mudam de largura, portanto as quebras de linha deslocam-se e a composição desalinha. Converter o texto em traçados no seu editor vetorial antes de exportar elimina a dúvida por completo, ao preço de o texto deixar de ser texto.

Dois limites menores. O que estiver dentro de um elemento foreignObject é HTML e não SVG, e neste modo não é desenhado. E o PNG tem canal alfa, portanto as zonas transparentes continuam transparentes em vez de ficarem brancas, o que costuma ser o que se quer mas convém saber se vai pôr o resultado sobre um fundo escuro.

Porque é grátis

Porque o trabalho é feito pelo seu computador. O ficheiro não sai da página: é lido localmente, rasterizado pelo próprio motor de desenho do seu navegador e codificado para PNG por um canvas. Não há carregamento, nem fila, nem servidor a pagar largura de banda, nem cópia nenhuma do seu trabalho fora da sua máquina.

Portanto não há conta, nem registo, nem marca de água, nem tecto de tamanho para além do que o seu navegador conseguir ter em memória. O motor que lê as dimensões do ficheiro e encontra o que ele vai perder está no repositório ao lado da página, com 122 verificações que o comprovam contra as especificações do SVG e do CSS.