SVG Font

Het originele vectorfontformaat — voor mensen leesbare XML die SVG-paden koppelt aan fontglyphs.

.svg SVG Font Format
TypeXML-gebaseerde vector
CompressieGeen (platte tekst)
BestandsgrootteGrootste van alle formaten
OndersteuningAlleen Safari (elders verouderd)
Geschikt voorDebuggen, bronformaat
BobcornPipeline-bron

Wat is SVG Font?

SVG-fonts werden gedefinieerd als onderdeel van de SVG 1.1-specificatie, gepubliceerd door het W3C. In tegenstelling tot traditionele binaire fontformaten sluiten SVG-fonts glyph-contouren in als SVG-padgegevens binnen een <font>-element. Elke glyph wordt vertegenwoordigd door een <glyph>-element waarvan het attribuut d het vectorpad bevat dat de vorm beschrijft.

In wezen zijn SVG-fonts SVG-tekeningen verpakt als een font. Dezelfde padsyntaxis die u gebruikt om vormen te tekenen in een SVG-bestand wordt hergebruikt om lettervormen en icooncontouren te definiëren. Dit maakt ze uniek inspecteerbaar — u kunt een SVG-font openen in elke teksteditor en de werkelijke geometrie van elke glyph lezen.

Hoe Het Werkt

Een SVG-fontbestand omhult glyph-paden binnen een standaard XML-structuur. Hier is een vereenvoudigd voorbeeld:

SVG Font-structuur 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Het element <font-face> declareert de fontfamilienaam en het coördinatensysteem (units-per-em). Elke <glyph> koppelt een Unicode-codepunt aan een vectorpad. Het attribuut d gebruikt exact dezelfde padsyntaxis als een gewoon SVG <path>-element.

Dit is het tussenformaat in de pipeline van Bobcorn. Individuele SVG-iconen worden eerst samengesteld in deze SVG-fontstructuur, die vervolgens wordt geconverteerd naar binaire formaten: SVG Font → TTF → WOFF / WOFF2 / EOT.

Voor- en Nadelen

    Voordelen
  • Voor mensen leesbaar — open in elke teksteditor
  • Eenvoudig glyph-paden en metadata debuggen
  • Volledig vectorgebaseerd, oneindige schaalbaarheid
  • Geen compilatie nodig om de bron te bekijken
    Nadelen
  • Grootste bestandsgrootte van alle fontformaten
  • Verouderd in Chrome, Firefox en Edge
  • Geen enkele compressie
  • Geen hinting-ondersteuning
  • Slechte renderingkwaliteit op Windows

Browserondersteuning

SVG-fontondersteuning is verwijderd uit de meeste grote browsers. Chrome verwijderde SVG-fontondersteuning in versie 38 (2014). Firefox heeft het nooit geïmplementeerd. Edge (op Chromium gebaseerd) ondersteunt het ook niet. De enige overgebleven uitzondering is Safari en iOS Safari, die SVG-fonts nog steeds renderen.

Voor praktisch webgebruik is SVG Font in wezen een verouderd formaat. U mag er nooit op vertrouwen als leveringsformaat voor eindgebruikers. Gebruik in plaats daarvan WOFF2.

Wanneer SVG Font Gebruiken

  • Debuggen van fontgeneratieproblemen — omdat het gewone XML is, kunt u de padgegevens direct lezen en vergelijken met de originele SVG-iconen om problemen te diagnosticeren.
  • Als bronformaat in buildpipelines — veel fontgeneratietools (inclusief Bobcorn) gebruiken SVG Font als tussenliggende representatie voordat ze converteren naar binaire formaten.
  • Legacy iOS < 5 ondersteuning — tegenwoordig extreem zeldzaam, maar oudere iOS-apparaten die dateren van vóór WOFF-ondersteuning konden alleen SVG-fonts gebruiken voor webfonts.
Bobcorn
In Bobcorn is SVG Font de eerste stap van de generatiepipeline. Uw SVG-iconen worden samengesteld in een SVG-font, dat vervolgens wordt geconverteerd naar TTF, en van TTF naar WOFF, WOFF2 en EOT. U kunt het SVG-fontbestand exporteren voor debuggingdoeleinden — dit is met name nuttig wanneer een glyph er niet goed uitziet en u de onbewerkte padgegevens moet inspecteren.