SVG naar BMP omzetten

Een SVG is tekst: een lijst paden, vullingen en transformaties die een renderer op elke gevraagde grootte tot een beeld maakt, zonder eigen resolutie. Een BMP is het beeld al gemaakt, opgeslagen als letterlijke rijen kleur, zonder compressie en zonder structuur.

Die kloof is het hele onderwerp van deze pagina. De ene kant op is een rendering — een beslissing over grootte, achtergrond en anti-aliasing, eenmalig genomen en dan permanent. De andere kant op bestaat niet: er is geen weg terug van bytes naar de vormen die ze tekenden.

Een breedte- en hoogteattribuut op een SVG is een suggestie, geen maat — de tekening wordt bepaald door zijn viewBox en kan op elke resolutie geproduceerd worden. De schaalinstelling neemt die beslissing: standaard 1024 pixels breed, de hoogte volgt de eigen verhoudingen, en de schaal loopt van 0,1 tot 10.

Kies het getal dat de bestemming echt nodig heeft, want de kosten lopen hier ongewoon snel op. Anders dan bij PNG of WebP hangt de bestandsgrootte van een bitmap niet af van de inhoud: de breedte verdubbelen verviervoudigt het bestand, of de tekening nu een illustratie is of één zwarte lijn.

Elke pixel kost drie bytes — blauw, groen, rood — en elke rij wordt opgevuld tot een veelvoud van vier. Tel er een header van 54 bytes bij en dat is het hele bestand: een vierkant van 1024 pixels komt op 3.145.782 bytes in totaal.

Een SVG van enkele honderden bytes wordt zo ruwweg drie megabyte op de standaardinstelling. Dat is geen gebrek van de converter, dat is wat BMP is. Heeft de bestemming een groottelimiet, reken dan vooraf uit wat de schaal oplevert.

De hier geschreven bitmap heeft 24 bits per pixel en geen vierde kanaal, dus transparantie moet eerst opgelost worden. De tekening wordt op niets gerenderd en in één stap op de achtergrondkleur platgeslagen — vullen voor het schalen zou de vulling in de randen laten uitlopen.

Zet de kleur op wat het oppervlak is waarop de bitmap komt te staan. Wit is de standaard en is verkeerd op een donker paneel.

De rendering gebeurt met resvg, gecompileerd naar WebAssembly, in plaats van met de eigen SVG-motor van de browser — bewust, want een canvas geeft in elke browser een net iets ander resultaat: andere tekstmetrieken, andere filterondersteuning.

Dat weegt hier zwaarder dan bij de meeste doelen. Een bitmap voor een apparaat of installer wordt vaak eenmalig gecontroleerd en daarna vertrouwd, soms byte voor byte vergeleken met een referentie.

SVG slaat tekst op als tekst en verwijst naar een lettertype bij naam. Is dat lettertype niet ingebed, dan kiest de renderer iets anders, en een zorgvuldig uitgelijnd woordmerk komt terug met andere letters en spatiëring.

De oplossing hoort in het ontwerpprogramma: zet tekst om naar contouren of paden voordat je exporteert, dan worden de letters vormen die niets kan vervangen.

Omdat het lezen ervan geen bibliotheek vergt. Een microcontroller met een klein scherm kan voorbij de 54-byte header springen en bytes rechtstreeks in een framebuffer kopiëren; PNG ondersteunen betekent een decompressor en een chunk-parser toevoegen aan iets met misschien 32 KB RAM.

Dezelfde logica geldt voor installerbronnen, oudere Windows-besturingselementen en testfixtures die beelden vergelijken zonder codec ertussen. In elk geval is voorspelbaarheid de reden voor het formaat, en de megabytes zijn de prijs ervan.

Verwijder de bitmap en je maakt zo een nieuwe. Verwijder de SVG, en alles wat de tekening bruikbaar maakte — bewerkbaarheid, willekeurige resolutie, een tekst-diffbare geschiedenis in versiebeheer — is voorgoed weg. Een BMP terugtraceren naar paden gokt naar de randen.

Behandel de omzetting als exportstap, bij voorkeur eentje die een build uitvoert. Heeft het paneel volgend jaar een andere grootte nodig, render dan opnieuw vanuit de vector in plaats van een bestaande bitmap te schalen.