SVG naar AVIF omzetten

Deze pagina is voor iemand middenin een beeldaudit: elke rasterafbeelding op de site wordt herbouwd naar AVIF, een buildstap of een CDN-regel gaat daar al van uit, en de vectorbestanden zijn de laatste map die nog over is.

De vraag is of de SVG’s bij die migratie horen, en het eerlijke antwoord is meestal nee — met een getal erbij om dat te onderbouwen, niet alleen een mening.

Een testlogo van 140 bytes, gerenderd op de standaardschaal, leverde als AVIF een bestand van 9.730 bytes op — zeventig keer groter dan het vector-origineel. Voor een simpel logo blijft de SVG dus zonder twijfel de kleinere, betere keuze.

Datzelfde beeld leverde als een ander rasterformaat een veel groter bestand op dan de AVIF; AVIF is dus het beste raster-alternatief in deze vergelijking, maar dat wint niet van het vectorformaat zelf.

Een SVG beschrijft vormen als paden en getallen, niet als een raster van pixels. Voor eenvoudige grafische elementen — logo’s, pictogrammen, lijntekeningen — is die beschrijving fundamenteel compacter dan welke pixelcompressie dan ook, hoe goed die compressie ook is.

AVIF is een sterke codec voor foto’s en complexe illustraties met veel kleurnuances, maar dat is een ander soort materiaal dan wat een typische SVG bevat.

Bevat de SVG complexe filtereffecten, ingebedde rasterafbeeldingen of animatie die een browser inconsistent weergeeft, dan kan een vaste rasterversie een betrouwbaarder resultaat geven dan de SVG zelf — dat is een compatibiliteitsargument, geen bestandsgrootte-argument.

Voor dat specifieke geval is deze omzetting wél de juiste stap, met het besef dat het bestand groter wordt in ruil voor voorspelbare weergave.

De achtergrond van een SVG wordt volledig transparant gerenderd, en dat alfakanaal komt over in de AVIF: een SVG-logo met een doorzichtige achtergrond behoudt die transparantie in het resultaat.

Voor een logo dat op verschillende achtergrondkleuren moet passen, blijft dat gedrag hetzelfde als bij de SVG zelf.

Standaard wordt de SVG gerenderd op 1.024 pixels breed, met de hoogte bepaald door de eigen verhoudingen van de tekening. Een schaalfactor is beschikbaar om dat te vergroten of verkleinen.

Voor een pictogram dat uiteindelijk klein wordt weergegeven, is een lagere schaal voldoende en levert dat een kleiner AVIF-bestand op dan de standaardbreedte zou geven.

De omzetting draait volledig in de browser; het bestand wordt niet naar een server gestuurd. De limiet op het gratis plan is 100 MB per bestand.

Voor een gewone SVG met een bestandsgrootte van enkele kilobytes is dat ruimschoots voldoende.

Tekst in de SVG die met de ingebedde lettertypen van het bestand wordt weergegeven, komt over in het gerenderde resultaat; tekst die op een systeemlettertype vertrouwt dat niet is ingebed, valt terug op een alternatief lettertype waarvan het exacte gedrag niet vaststaat.

Voor de meeste logo’s en pictogrammen met paden in plaats van tekst speelt dat geen rol — het is vooral relevant bij een SVG met veel losse tekstelementen.