Een SVG heeft geen maat tot jij hem er een geeft

Een rasterafbeelding is een raster van pixels en weet precies hoeveel. Een SVG is een beschrijving van vormen in een abstracte coördinatenruimte, en het enige dat die ruimte aan pixels bindt zijn de width en height op het rootelement, en die laten de meeste iconensets met opzet weg zodat het icoon meeschaalt met het vak waar het in landt.

Op een canvas getekend zonder maat rastert zo'n bestand op de standaardgrootte die de browser voor een vervangen element aanhoudt: 300 bij 150 pixels in elke huidige browser. Daar komt een wazig logo vandaan. Deze pagina leest de viewBox om de beeldverhouding terug te halen, schrijft expliciete afmetingen op de root voor het tekenen, en vraagt jou om het doel in plaats van te gokken. Bestanden met het label alleen viewBox zijn precies de bestanden waar dit voor telt.

Externe verwijzingen besmetten het canvas

Bevat een SVG een <image href="https://…">, een @import of een webfont van een andere oorsprong, dan markeert het tekenen het canvas als besmet door cross-origin. Het tekenen zelf slaagt. De fout komt later, bij toBlob, als een SecurityError zonder uitleg over welk bestand het veroorzaakte. Dat is echt een naar ding om uit te zoeken.

De bron wordt daarom eerst gescand en de verwijzing wordt benoemd voordat er iets getekend wordt. De oplossing is inlinen: zet een externe afbeelding om naar een data-URL, en zet tekst om naar omtrekken zodat het lettertype niet meer nodig is. Verwijzingen naar een fragment zoals href="#gradient" en data-URL's zijn veilig en worden door de controle genegeerd.

Veelvoorkomende problemen

De tekst kwam er in het verkeerde lettertype uit. De SVG noemt een lettertype dat niet geïnstalleerd is, dus de browser koos een vervanger. Zet tekst in je vectorprogramma om naar paden voordat je exporteert; dat haalt meteen het besmettingsrisico weg.
De PNG heeft een transparante achtergrond en je wilde wit. SVG heeft standaard geen achtergrond. Zet de optie voor een witte achtergrond aan, en die telt voor alles dat een document of een e-mail in gaat.
De randen zien er zacht uit op kleine formaten. Een gedetailleerde vector op 16px rasteren is echt lastig, en het resultaat haalt het nooit bij een met de hand afgestemde bitmap. Teken iconen op een pixelraster op de maat waarop ze gebruikt worden.
Er werd helemaal niets getekend. Een SVG met een kapotte root, of een bestand dat eigenlijk een EPS of een PDF met de verkeerde extensie is. De controle hier leest de echte bytes en niet de bestandsnaam.

Veelgestelde vragen

Kan het PNG terug omzetten naar SVG?

Nee, en niets dat eerlijk is kan dat. Van pixels naar vectoren gaan vraagt natrekken, en dat verzint vormen die nooit in het beeld zaten en levert meestal een bestand op dat groter is dan de bron. Dat is een andere tool met andere manieren om te falen, en dit is hem niet.

Op welke schaal moet ik exporteren?

Twee keer de weergavegrootte dekt elk huidig scherm met hoge dichtheid. Exporteer voor een set app-iconen elk vereist formaat apart in plaats van één grote PNG te verkleinen: de vector tekent op elk formaat schoon en een verkleinde bitmap niet.

Waarom PNG en geen JPEG?

Omdat vectorwerk vlakke kleur met harde randen is, en dat is precies waar JPEG het slechtst in is en PNG het best. Een JPEG van een logo is groter én zichtbaar geringd langs de randen. Heb je een kleiner bestand nodig, zet de PNG dan daarna om naar WebP.

Draait het in een worker zoals de andere afbeeldingstools?

Nee, en dat is met opzet. createImageBitmap weigert SVG-blobs in de meeste browsers, dus de enige betrouwbare weg is een <img> element, en dat bestaat niet in een worker. Eén vectordocument tekenen kost lang niet zoveel als een foto van 20 megapixel decoderen, dus de hoofdthread is hier prima.