SVG Font

O formato de fonte vetorial original — XML legível por humanos que mapeia caminhos SVG para glifos de fonte.

.svg SVG Font Format
TipoVetor baseado em XML
CompressãoNenhuma (texto simples)
Tamanho do arquivoMaior de todos os formatos
SuporteApenas Safari (obsoleto em outros)
Ideal paraDepuração, formato-fonte
BobcornFonte do pipeline

O que é SVG Font?

As fontes SVG foram definidas como parte da especificação SVG 1.1, publicada pelo W3C. Ao contrário dos formatos de fonte binários tradicionais, as fontes SVG incorporam contornos de glifos como dados de caminho SVG dentro de um elemento <font>. Cada glifo é representado por um elemento <glyph> cujo atributo d contém o caminho vetorial que descreve a forma.

Em essência, fontes SVG são desenhos SVG empacotados como uma fonte. A mesma sintaxe de caminho que você usa para desenhar formas em um arquivo SVG é reutilizada para definir formas de letras e contornos de ícones. Isso as torna exclusivamente inspecionáveis — você pode abrir uma fonte SVG em qualquer editor de texto e ler a geometria real de cada glifo.

Como Funciona

Um arquivo de fonte SVG envolve caminhos de glifos dentro de uma estrutura XML padrão. Aqui está um exemplo simplificado:

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

O elemento <font-face> declara o nome da família de fontes e o sistema de coordenadas (units-per-em). Cada <glyph> mapeia um ponto de código Unicode para um caminho vetorial. O atributo d usa exatamente a mesma sintaxe de caminho que um elemento SVG <path> regular.

Este é o formato intermediário no pipeline do Bobcorn. Os ícones SVG individuais são primeiro montados nesta estrutura de fonte SVG, que é então convertida em formatos binários: SVG Font → TTF → WOFF / WOFF2 / EOT.

Vantagens e Desvantagens

    Vantagens
  • Legível por humanos — abra em qualquer editor de texto
  • Fácil de depurar caminhos de glifos e metadados
  • Totalmente baseado em vetores, escalabilidade infinita
  • Não precisa de compilação para visualizar a fonte
    Desvantagens
  • Maior tamanho de arquivo entre todos os formatos de fonte
  • Obsoleto no Chrome, Firefox e Edge
  • Sem qualquer compressão
  • Sem suporte a hinting
  • Qualidade de renderização ruim no Windows

Suporte de Navegadores

O suporte a fontes SVG foi removido da maioria dos principais navegadores. O Chrome removeu o suporte a fontes SVG na versão 38 (2014). O Firefox nunca o implementou. O Edge (baseado em Chromium) também não oferece suporte. O único que ainda persiste é o Safari e iOS Safari, que ainda renderizam fontes SVG.

Para uso prático na web, a fonte SVG é essencialmente um formato legado. Você nunca deve confiar nela como formato de entrega para usuários finais. Use WOFF2 em vez disso.

Quando Usar SVG Font

  • Depuração de problemas de geração de fontes — como é XML simples, você pode ler os dados do caminho diretamente e compará-los com os ícones SVG originais para diagnosticar problemas.
  • Como formato-fonte em pipelines de compilação — muitas ferramentas de geração de fontes (incluindo o Bobcorn) usam a fonte SVG como representação intermediária antes de converter para formatos binários.
  • Suporte a iOS legado anterior à versão 5 — extremamente raro hoje, mas dispositivos iOS mais antigos que precedem o suporte a WOFF podiam usar apenas fontes SVG para fontes web.
Bobcorn
No Bobcorn, a fonte SVG é a primeira etapa do pipeline de geração. Seus ícones SVG são montados em uma fonte SVG, que é então convertida para TTF e de TTF para WOFF, WOFF2 e EOT. Você pode exportar o arquivo de fonte SVG para fins de depuração — é especialmente útil quando um glifo parece errado e você precisa inspecionar os dados brutos do caminho.