SVG naar JPG omzetten

Een SVG heeft geen resolutie. Het is een reeks aanwijzingen — teken hier een cirkel, vul deze vorm met die kleur — en hij laat zich op elke afmeting even scherp uittekenen. Een JPG is een vast raster van beeldpunten. Ertussen omzetten vraagt dus om een getal, en die keuze is blijvend.

De meeste omzetters nemen zwijgend de breedte die de SVG toevallig opgeeft en tekenen daarop uit. Omdat veel SVG’s iets bescheidens opgeven — een pictogrammaat van 100 of 200 beeldpunten die is blijven hangen van waar ze ook vandaan komen — is het resultaat een klein beeld dat er goed uitziet tot iemand het vergroot, en dan is het zichtbaar zacht. Dit is verreweg de vaakste klacht over deze omzetting, en het is een instellingenprobleem en geen kwaliteitsprobleem.

Reken terug vanaf waar het beeld terechtkomt. Op een webpagina teken je uit op twee keer de maat waarop het getoond wordt — schermen met hoge dichtheid zijn al tien jaar de norm, en een beeld van 400 beeldpunten in een vak van 400 beeldpunten ziet er op de meeste telefoons zacht uit. Voor drukwerk is de werkregel 300 beeldpunten per inch: een tekening die tien centimeter breed wordt afgedrukt wil er ongeveer 1200.

Te groot mikken is goedkoop en te klein mikken niet. Een JPG die groter is uitgetekend dan nodig kost wat bestandsgrootte en laat zich zonder zichtbaar verlies verkleinen; een die te klein is uitgetekend valt helemaal niet meer te redden, want het detail is nooit getekend. De schaalknop staat onder het resultaat, dus je kunt omzetten, kijken, bijstellen en opnieuw omzetten zonder van voren af aan te beginnen.

JPG heeft geen alfakanaal. Geen beperkt kanaal — geen. Elke beeldpunt is ondoorzichtig, dus alles wat doorzichtig was in de SVG moet met iets gevuld worden, en wit is de verstandige standaard.

Het is ook de standaard die de geheugenwaardige mislukking oplevert: een wit of heel licht logo, ontworpen om op een donkere achtergrond te staan, omgezet naar JPG en afgeleverd als een wit vlak waar kennelijk niets op staat. Zie je de vorm in het voorbeeld en niet in het resultaat, dan is dit de reden. Kies bij de instellingen een contrasterende vulkleur, of zet om naar PNG of WebP, die de transparantie allebei behouden in plaats van haar op te lossen.

De meeste SVG’s zijn logo’s, pictogrammen en schema’s — vlakken kleur met harde randen. Dat is precies de inhoud waar JPEG-compressie het slechtst mee omgaat: ze is voor foto’s bedacht, en op een scherpe grens tussen twee vlakke kleuren reageert ze door er een vage halo omheen te smeren. Het bestand is vaak niet eens kleiner dan de PNG, want PNG is uitstekend in juist dit soort beeld.

Het eerlijke advies is dus PNG, tenzij iets uitdrukkelijk om JPG vraagt — en dat komt voor: advertentieplatformen, inzendsystemen voor drukwerk, oudere contentbeheersystemen en sommige kantoorsoftware accepteren nog altijd niets anders. Bevat de SVG een foto of een rijk geschilderde illustratie, dan is JPG oprecht het betere antwoord.

Een SVG noemt meestal een lettertype in plaats van het mee te dragen. Wat het bestand uittekent moet dat lettertype tot zijn beschikking hebben, en resvg — dat hier tekent — heeft de lettertypen van jouw systeem en niet die van het ontwerpprogramma.

Een ontbrekend lettertype wordt dus vervangen, en een zorgvuldig gespatieerd woordmerk komt met de verkeerde spatiëring binnen. De oplossing hoort in het ontwerpprogramma: zet tekst om naar contouren voordat je exporteert. De letters worden vormen, er valt niets meer te vervangen, en het bestand is veilig om aan iedereen te geven.

Vormen, lijnen, vullingen en verlopen komen getrouw mee. Het onzekere gebied zijn filters — vervaging en slagschaduw — samen met overvloeimodi en maskers die uit andere maskers zijn opgebouwd.

resvg dekt wat echte bestanden gebruiken en laat weg wat het niet uitvoert, in plaats van het te benaderen tot iets wat er bijna goed uitziet. Draagt een effect betekenis, kijk dan naar de JPG in plaats van iets aan te nemen. Ontbreekt het, plat het dan af voor je exporteert.

Een SVG kan met een adres naar een externe foto, een lettertype of een stijlblad verwijzen. Hier reikt niets naar het internet, dus een bestand waarnaar verwezen wordt is er simpelweg niet — en dat is dezelfde eigenschap die je tekening privé houdt.

Het verschijnsel is een JPG met een leeg vlak waar een afbeelding hoort. Exporteer opnieuw met de bronnen ingesloten in plaats van gekoppeld, en dan reist alles waar de tekening op steunt met haar mee.

De omvang volgt de resolutie die je koos, niet de SVG. Een pictogram van 3 kB dat op 4000 beeldpunten wordt uitgetekend is een JPG van meerdere megabytes, want het bestand is nu een raster van beeldpunten en geen beschrijving meer.

Kwaliteit rond de 85 is de verstandige standaard voor alles wat fotografisch is. Bij een logo van vlakke kleur is het helemaal de verkeerde vraag: geen kwaliteitsinstelling weerhoudt JPEG ervan een halo langs een harde rand te leggen, en daar is PNG het antwoord.

Sleep de hele map erin. Elke SVG wordt op dezelfde schaal uitgetekend en komt terug in een ZIP, en dat is wat een pictogrammenset of een exportronde meestal wil.

Het uittekenen gebeurt op je eigen machine, dus er is geen limiet per bestand en geen wachtrij. En omdat het resvg is en geen tekenvlak van de browser, wordt het laatste bestand precies zo getekend als het eerste.