SVG Font

Il formato di font vettoriale originale — XML leggibile dall'uomo che mappa i percorsi SVG ai glifi del font.

.svg SVG Font Format

TipoVettoriale basato su XML

CompressioneNessuna (testo normale)

Dimensione fileLa più grande tra tutti i formati

SupportoSolo Safari (deprecato altrove)

Ideale perDebug, formato sorgente

BobcornSorgente del pipeline

Che cos'è SVG Font?

I font SVG sono stati definiti come parte della specifica SVG 1.1, pubblicata dal W3C. A differenza dei tradizionali formati di font binari, i font SVG incorporano i contorni dei glifi come dati di percorso SVG all'interno di un elemento <font>. Ogni glifo è rappresentato da un elemento <glyph> il cui attributo d contiene il percorso vettoriale che descrive la forma.

In sostanza, i font SVG sono disegni SVG confezionati come font. La stessa sintassi di percorso utilizzata per disegnare forme in un file SVG viene riutilizzata per definire le forme delle lettere e i contorni delle icone. Questo li rende particolarmente ispezionabili — è possibile aprire un font SVG in qualsiasi editor di testo e leggere la geometria effettiva di ogni glifo.

Come Funziona

Un file di font SVG racchiude i percorsi dei glifi all'interno di una struttura XML standard. Ecco un esempio semplificato:

Struttura di SVG Font

<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>

L'elemento <font-face> dichiara il nome della famiglia di font e il sistema di coordinate (units-per-em). Ogni <glyph> mappa un punto di codice Unicode su un percorso vettoriale. L'attributo d utilizza esattamente la stessa sintassi di percorso di un normale elemento SVG <path>.

Questo è il formato intermedio nel pipeline di Bobcorn. Le singole icone SVG vengono prima assemblate in questa struttura di font SVG, che viene poi convertita in formati binari: SVG Font → TTF → WOFF / WOFF2 / EOT.

Vantaggi e Svantaggi

Vantaggi

Leggibile dall'uomo — apribile in qualsiasi editor di testo
Facile da eseguire il debug dei percorsi dei glifi e dei metadati
Completamente basato su vettori, scalabilità infinita
Non necessita di compilazione per visualizzare la sorgente

Svantaggi

Dimensione del file maggiore tra tutti i formati di font
Deprecato in Chrome, Firefox ed Edge
Nessuna compressione
Nessun supporto all'hinting
Scarsa qualità di rendering su Windows

Supporto Browser

Il supporto ai font SVG è stato rimosso dalla maggior parte dei principali browser. Chrome ha eliminato il supporto ai font SVG nella versione 38 (2014). Firefox non lo ha mai implementato. Edge (basato su Chromium) non lo supporta neanche. L'unico rimasto è Safari e iOS Safari, che ancora renderizzano i font SVG.

Per l'uso web pratico, il font SVG è essenzialmente un formato legacy. Non si dovrebbe mai affidarsi ad esso come formato di distribuzione per gli utenti finali. Utilizzare WOFF2 al suo posto.

Quando Usare SVG Font

Debug dei problemi di generazione dei font — essendo XML semplice, è possibile leggere i dati del percorso direttamente e confrontarli con le icone SVG originali per diagnosticare i problemi.
Come formato sorgente nei pipeline di build — molti strumenti di generazione di font (incluso Bobcorn) utilizzano il font SVG come rappresentazione intermedia prima di convertire in formati binari.
Supporto legacy per iOS precedente alla versione 5 — estremamente raro oggi, ma i dispositivi iOS più vecchi che precedono il supporto a WOFF potevano utilizzare solo i font SVG per i font web.

Bobcorn

In Bobcorn, il font SVG è il primo passaggio del pipeline di generazione. Le icone SVG vengono assemblate in un font SVG, che viene poi convertito in TTF, e da TTF in WOFF, WOFF2 e EOT. È possibile esportare il file di font SVG a scopo di debug — è particolarmente utile quando un glifo appare sbagliato e si desidera ispezionare i dati grezzi del percorso.