Converter SVG para BMP

Estes dois formatos ficam em extremos opostos. Um SVG é texto: uma lista de caminhos, preenchimentos e transformações que um renderizador transforma numa imagem no tamanho que for pedido, então o arquivo não tem resolução nem custo fixo em bytes. Um BMP é a imagem já pronta, armazenada como linhas literais de cor sem compressão, sem estrutura e nada para interpretar.

Essa distância é o assunto inteiro desta página. Ir numa direção é uma renderização — uma decisão sobre tamanho, fundo e antialiasing, tomada uma vez e depois permanente. Ir na outra não é possível; não existe caminho de volta de uma grade de bytes até as formas que a desenharam.

Um atributo width e height num SVG é uma sugestão, não um tamanho — o desenho é definido pelo viewBox e pode ser produzido em qualquer resolução. Então a conversão precisa escolher uma, e a configuração de escala é essa decisão. O padrão renderiza 1.024 pixels de largura e a altura segue as proporções do desenho.

Escolha o número que o destino realmente precisa em vez do maior disponível, porque o custo aqui é incomumente alto. Diferente de PNG ou WebP, o tamanho de um bitmap não depende do que está na imagem: dobrar a largura quadruplica o arquivo esteja o desenho cheio de detalhe ou seja uma linha preta só.

Todo pixel leva três bytes — azul, verde e vermelho, nessa ordem — e cada linha é preenchida até um múltiplo de quatro. Some um cabeçalho de 54 bytes e é o arquivo inteiro. Um quadrado de 1.024 pixels são 3.072 bytes por linha e 3.145.728 bytes de dados de imagem.

Então um SVG de algumas centenas de bytes vira aproximadamente três megabytes na configuração padrão, e cerca de doze na escala 2. Isso não é um defeito do conversor; é o que BMP é.

O bitmap escrito aqui é de 24 bits por pixel, sem um quarto canal. Existe uma variante de cabeçalho que define alfa, e arquivos usando ela existem, mas suportá-la é exatamente o tipo de coisa que BMP costuma ser escolhido para evitar — então a transparência precisa ser resolvida primeiro.

O desenho é renderizado sobre nada e depois achatado na cor de fundo numa passagem só, o que importa: preencher primeiro e escalar depois vazaria o preenchimento nas bordas. Defina a cor para qualquer superfície onde o bitmap vai sentar.

A renderização é feita pelo resvg compilado para WebAssembly em vez do motor SVG próprio do navegador, e isso é deliberado. Entregar um SVG a um canvas dá o que aquele navegador quiser: métricas de texto diferentes, suporte a filtro diferente, resultados visivelmente diferentes no Chrome e no Safari para o mesmo arquivo.

Isso importa mais aqui do que na maioria dos destinos. Um bitmap indo para um dispositivo ou num instalador costuma ser conferido uma vez e depois confiado para sempre, às vezes comparado byte a byte contra uma referência.

SVG armazena texto como texto e referencia uma tipografia pelo nome. Se a fonte não está embutida no arquivo, o renderizador escolhe outra, e uma marca cuidadosamente espaçada volta com letras e espaçamento diferentes. Este é o motivo mais comum de um SVG renderizado sair errado.

O conserto pertence à ferramenta de design, não aqui: converta texto em contornos ou caminhos antes de exportar, e as letras viram formas que nada consegue trocar.

Porque ler um não precisa de biblioteca nenhuma. Um microcontrolador controlando um display pequeno consegue pular o cabeçalho de 54 bytes e copiar bytes para um framebuffer com um loop; suportar PNG no mesmo aparelho significa acrescentar um descompressor, um alocador de memória e um interpretador de chunk a algo que pode ter 32 KB de RAM.

A mesma lógica cobre recursos de instalador carregados pelas próprias chamadas de bitmap da plataforma, controles antigos do Windows, e fixtures de teste que comparam imagens sem um codec no caminho.

Apague o bitmap e dá para fazer outro. Apague o SVG e o bitmap é tudo que sobra, e tudo que tornava o desenho útil — editabilidade, resolução arbitrária, um histórico legível no controle de versão — se foi para sempre. Traçar um BMP de volta em caminhos chuta as bordas e produz um arquivo diferente com mais nós e curvas piores.

Trate a conversão como uma etapa de exportação, idealmente uma que seu build roda em vez de uma feita à mão. Quando o painel precisar de um tamanho diferente ano que vem, renderize de novo do vetor em vez de escalar um bitmap de três megabytes.

Solte o conjunto inteiro. Todo arquivo é renderizado na mesma escala e achatado sobre o mesmo fundo, o que costuma ser o que esses destinos precisam — um conjunto de gráficos de painel que discordam sobre seus fundos parece pior do que qualquer um individualmente imperfeito.

Observe o tamanho total. Vinte desenhos na escala padrão são cerca de sessenta megabytes de bitmap antes do ZIP, o bastante para ser lento num celular. Reduzir a escala para o que o display realmente mostra é a coisa mais eficaz que você pode fazer a esse número.