Svg font

Beknopte documentatie voor het koppelen van SVG bestanden aan karakters in een OpenType font (.otf).

Benodigde software

• FontForge https://fontforge.org/en-US/
• OpenType SVG Font Editor https://apps.microsoft.com/detail/9NJ7K9JX60P1?hl=en-US&gl=US

Aandachtspunten

SVG karakters worden anders geplaatst dan reguliere karakters in een font, houdt rekening met de volgende zaken:

• De karakters worden geplaatst op de basislijn.
• De karakters nemen de breedte over van het reguliere karakter, welke vervangen is door de SVG (aanname, nog te bevestigen!). Hierdoor kan het nodig zijn om de spatiering aan te passen.
• De karakters worden op ware grootte (relatief) geplaatst, zorg er dus voor dat deze de juiste hoogte hebben ten opzichte van de reguliere karakters.
• Gebruik inline styles voor de kleuren in de SVG, classes geven een suboptimaal resultaat.

FontForge

Met FontForge kunnen fonts bewerkt en/of gemaakt worden. Documentatie is beschikbaar via https://fontforge.org/en-US/documentation/ Voor SVG fonts is het volgende van belang:

• Fontnaam; via Element > Font Info > PS Names kan de naam van het font ingesteld worden. Dit is niet de bestandsnaam, maar de naam van het embedded font in de PDF.
• Hoogte; via Element > Font Info > OS/2 > Metrics kan de kapitaalhoogte (Capital Height) en X-hoogte (X Height) uitgelezen worden. Gebruik deze als hoogte voor de SVG als de SVG karakters uit moeten lijnen met de overige karakters in het font.

OpenType SVG Font Editor

Met de OpenType SVG Font Editor kunnen SVG bestanden gekoppeld worden aan karakters in een font. Alleen bestaande karakters vervangen worden door een SVG karakter, het is niet mogelijk om extra karakters toe te voegen. Zorg dus eerst voor een font met de benodigde karakters.

De editor zelf is erg eenvoudig, kies het font en de map waarin de SVG bestanden staan en sleep de bestanden naar het gewenste karakter. Als alle bestanden gekoppeld zijn, sla dan het font op.

Let op; na het toevoegen van SVG bestanden kan Windows het font niet meer openen of installeren. In browsers en PDF bestanden werkt dit wel. Bij twijfel open het font opnieuw in de editor. Als het goed is opgeslagen, dan zijn de SVG bestanden zichtbaar in de lijst met karakters.

SVG karakters met maar één kleur

Deze kunnen gewoon via FontForge aan het font toegevoegd worden, dit geeft meer controle over de plaatsing etc (en je kunt deze van kleur wisselen). Open hiervoor het karakter in FontForge, verwijder de lijnen van het karakter en selecteer "Import" uit het menu. Je kunt nu het gewenste SVG bestand importeren. Controleer hierna of de breedte van het karakter nog aangepast moet worden, dit kan door de lijn te slepen.

Stel je font heeft 825pt boven de basislijn en 175pt eronder, maak dan een SVG bestand van 1000px hoog, waarbij de karakters uitgelijnd zijn op 125pt hoogte (de basislijn). Sla de SVG op als outline. De afstand vanaf de linkerkant wordt na import overgenomen als padding.