SVG Font

El formato de fuente vectorial original — XML legible por humanos que mapea trayectos SVG a glifos de fuente.

.svg Formato de fuente SVG

TipoVector basado en XML

CompresiónNinguna (texto plano)

Tamaño de archivoEl más grande de todos los formatos

CompatibilidadSolo Safari (obsoleto en otros)

Ideal paraDepuración, formato fuente

BobcornFuente del pipeline

¿Qué es SVG Font?

Las fuentes SVG se definieron como parte de la especificación SVG 1.1, publicada por el W3C. A diferencia de los formatos de fuente binarios tradicionales, las fuentes SVG incorporan los contornos de los glifos como datos de trayecto SVG dentro de un elemento <font>. Cada glifo está representado por un elemento <glyph> cuyo atributo d contiene el trayecto vectorial que describe la forma.

En esencia, las fuentes SVG son dibujos SVG empaquetados como una fuente. La misma sintaxis de trayecto que se usa para dibujar formas en un archivo SVG se reutiliza para definir las formas de las letras y los contornos de los iconos. Esto las hace únicas en cuanto a inspección — puede abrir una fuente SVG en cualquier editor de texto y leer la geometría real de cada glifo.

Cómo funciona

Un archivo de fuente SVG encapsula los trayectos de glifos dentro de una estructura XML estándar. A continuación se muestra un ejemplo simplificado:

Estructura de una fuente SVG

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

El elemento <font-face> declara el nombre de la familia de fuentes y el sistema de coordenadas (units-per-em). Cada <glyph> asigna un punto de código Unicode a un trayecto vectorial. El atributo d usa exactamente la misma sintaxis de trayecto que un elemento SVG <path> ordinario.

Este es el formato intermedio en el pipeline de Bobcorn. Los iconos SVG individuales se ensamblan primero en esta estructura de fuente SVG, que luego se convierte a formatos binarios: SVG Font → TTF → WOFF / WOFF2 / EOT.

Ventajas e inconvenientes

Ventajas

Legible por humanos — se abre en cualquier editor de texto
Fácil depuración de trayectos de glifos y metadatos
Totalmente vectorial, escalabilidad infinita
No se necesita compilación para ver el código fuente

Inconvenientes

Mayor tamaño de archivo de todos los formatos de fuente
Obsoleto en Chrome, Firefox y Edge
Sin ningún tipo de compresión
Sin soporte de hinting
Mala calidad de renderizado en Windows

Compatibilidad con navegadores

La compatibilidad con fuentes SVG ha sido eliminada de la mayoría de los navegadores principales. Chrome eliminó el soporte para fuentes SVG en la versión 38 (2014). Firefox nunca lo implementó. Edge (basado en Chromium) tampoco lo soporta. El único navegador restante es Safari e iOS Safari, que aún renderiza fuentes SVG.

Para el uso web práctico, la fuente SVG es esencialmente un formato heredado. No debe depender de él como formato de entrega para usuarios finales. Use WOFF2 en su lugar.

Cuándo usar SVG Font

Depuración de problemas de generación de fuentes — como es XML plano, puede leer los datos del trayecto directamente y compararlos con los iconos SVG originales para diagnosticar problemas.
Como formato fuente en pipelines de compilación — muchas herramientas de generación de fuentes (incluida Bobcorn) usan SVG Font como representación intermedia antes de convertir a formatos binarios.
Soporte heredado iOS < 5 — extremadamente raro hoy en día, pero los dispositivos iOS más antiguos anteriores al soporte de WOFF solo podían usar fuentes SVG para fuentes web.

Bobcorn

En Bobcorn, SVG Font es el primer paso del pipeline de generación. Sus iconos SVG se ensamblan en una fuente SVG, que luego se convierte a TTF, y desde TTF a WOFF, WOFF2 y EOT. Puede exportar el archivo de fuente SVG con fines de depuración — es especialmente útil cuando un glifo parece incorrecto y necesita inspeccionar los datos del trayecto sin procesar.